Как правильно вставить звук в страничку

Как ни странно, но среди множества раскиданных по сети руководств по сетевым языкам этот вопрос освещён слабо. Особенно по-русски. А полного и достаточно подробного я и вовсе не нашёл, пришлось из нескольких компилировать и дополнять собственными экспериментами. Результаты предлагаю вашему вниманию.

Начну с основного. Существует несколько способов воспроизведения звука в html-страничке:

1. Тэг <bgsound>. Наиболее простой, предназначенный именно для этой цели. Недостаток: не поддерживается в Netscape и вообще считается устаревшим. Здесь я его рассмотрю только для комплекта.
2. Использование Java-апплета или аналогичного JavaScript-скрипта. Позволяет сделать все, что угодно, от обычного фонового воспроизведения до "музыкальной шкатулки" со множеством мелодий и анимационными эффектами. Недостаток: требует, чтобы в браузере была установлена и включена поддержка Java (а многие её выключают ради повышения быстродействия и надёжности). Это тема для отдельной статьи, да и я не ахти какой специалист в Java, чтобы давать квалифицированные советы.
3. Тэг <embed>. Основной и наиболее широко используемый способ, о котором я и буду говорить.
4. Тэг <object>. Более универсальный механизм, заменяющий <embed>, <img> и <applet>. Его синтаксис во многом похож на синтаксис <embed>, поэтому я кратко остановлюсь на нём в конце статьи. Недостаток: официально появился только в HTML 4.0 (в виде расширений - в HTML 3.2), поэтому не поддерживается старыми браузерами.

<bgsound>
Тэг был введен в Internet Explorer 2.0. С тех пор поддерживается, по-моему, только линией Internet Explorer. С версии 4.0 Internet Explorer стал понимать тэг <embed>, так что <bgsound> можно считать устаревшим.

Синтаксис <bgsound> очень прост:


Обязательный параметр src задаёт URL воспроизводимого звука. Параметр loop может принимать значение infinite (бесконечное зацикливание звука) либо число - количество повторов (например, loop="3" задаёт 3 повтора мелодии).


<embed>
Был введен в Netscape Navigator 3.0, с версии 4.0 поддерживается и в Internet Explorer. Используя механизм плагинов, позволяет вставлять в страничку практически любые мультимедийные объекты. Я ограничусь описанием работы только с аудио-объектами.

Рекомендуемый универсальный синтаксис использования <embed> следующий:


Обратите внимание, что это одиночный тэг, а не обрамляющий, как ошибочно указывается в некоторых руководствах. Добавлять после него </embed> не нужно, хотя и не повредит, конечно.

Обязательный параметр src задаёт URL воспроизводимого звука. Параметр loop может принимать значение true (бесконечное зацикливание звука), false (однократное воспроизведение) либо число - количество повторов (например, loop="3" задаёт 3 повтора мелодии).

Параметр autostart="true" указывает, как и можно было догадаться, на необходимость автоматического запуска звука при загрузке странички.

Параметр type позволяет явно указать MIME-тип воспроизводимого файла, по которому браузер и определяет, какой плагин вызвать. Его можно не указывать, если http-сервер сам правильно возвращает тип для данного расширения, однако указывать явно - надёжнее (конструкция будет работать и при переносе странички на другой сервер, и после сохранения её на локальном диске).

Стандартные MIME-типы для основных мультимедийных типов:

MIME-тип File Extension audio/basic .au audio/x-wav .wav audio/x-aiff .aif .aiff audio/x-midi .mid .midi audio/x-pr-realaudio .ra .ram audio/x-mpeg .mpg .mpeg .mp2 .mp3 Параметры width и height задают размеры панельки проигрывателя. К сожалению, у разных плагинов панельки разного размера, поэтому приходится идти на компромисс, которым является width="145" height="45". Ниже вы можете взглянуть на разные варианты размера панельки. Плагин LiveAudio входит в комплект Netscape. Internet Explorer вызывает Media Player. Плагин Crescendo потихоньку вытесняется из употребления...

Универсальный размер <embed src="magic03.mid" type="audio/x-midi" width="145" height="45" autostart="true" loop="3"> LiveAudio (маленькая панель) <embed src="chanmian.mid" type="audio/x-midi" width="144" height="15" autostart="false" controls="smallconsole" loop="true"> LiveAudio (стандартная панель) <embed src="soundless.mid" type="audio/x-midi" width="145" height="60" autostart="false" loop="true"> Crescendo <embed src="mtr.mid" type="audio/x-midi" width="200" height="55" autostart="false" loop="false"> Media Player (полная панель) <embed src="romance.mid" type="audio/x-midi" width="280" height="45" autostart="false" loop="false"> В качестве альтернативы можно задать опциональный параметр hidden="true", в результате чего панелька вообще не будет показана, хотя звук будет воспроизводиться (при этом, естественно, нужно указать autostart="true").

Параметр volume="n" задаёт громкость звука в процентах (от 0 до 100). Однако не все плагины поддерживают регулировку громкости.

Для LiveAudio можно также указать параметр controls="smallconsole" (маленькая панелька), однако Media Player эту опцию не поддерживает, и вид получается некрасивый. Есть и другие значения параметра controls - playbutton, pausebutton, stopbutton, volumelever, однако их не стоит использовать по той же причине, так же как и другие специфические для конкретных плагинов параметры.

Параметр pluginspage="URL" позволяет задать URL, откуда можно выкачать плагин для работы с этим типом файлов, если в браузере тип не зарегистрирован. В нашем случае это вряд ли понадобится.

Примечание. Постоянная непрошеная музыка часто раздражает пользователей, так что, если только звук не является абсолютно необходимым элементом дизайна, не используйте одновременно параметры hidden="true" и loop="true". Укажите небольшое конечное число повторов и/или дайте возможность пользователю остановить музыку на панельке плагина.


<object>
Тэг официально был принят в спецификации HTML 4.0. До того он существовал на правах расширения HTML 3.2 и не поддерживался старыми браузерами, поэтому решайте сами, использовать его или нет. В конце концов, зачем музыка лентяям и упрямцам, не идущим в ногу с прогрессом? (IMG:style_emoticons/default/wink.gif)

Синтаксис <object>, вообще весьма сложный и многовариантный, в случае воспроизведения звука дословно переводится из синтаксиса <embed>. Так, тэгу

<embed src="melody.mid" type="audio/x-midi" width="145" height="45" autostart="true" loop="3">

соответствует

<object data="melody.mid" type="audio/x-midi" width="145" height="45">
<param name="autostart" value="false">
<param name="loop" value="3">
</object>
Всё понятно, правда? Если ваш браузер поддерживает тэг <object>, справа от примера вы увидите работоспособную панельку плагина. Если у вас Internet Explorer - вероятно, увидите, но неработоспособную... По крайней мере, у меня на версии 5.0 панелька была видна, но неактивная. А вот в Netscape 4.71 - никаких проблем.

Так что используйте <embed>. Это пока единственный совместимый способ.

Молча аплодирует. (IMG:style_emoticons/default/huh.gif)

Наконец-то, я нашёл эту инфу. Думал её уже резанули. Отлично, спасибо, всё легко. Вставил музычку нераздражительную. Плеер скрыл и нормально. На каждую страничку код скопировал. Бомбезно. Кто сказал что музыка раздражает пользователей? Даже если так можно выключить звук.