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

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

Начну с основного. Существует несколько способов воспроизведения звука в 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> очень прост:

<bgsound src="melody.mid" loop="infinite">

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

<embed>

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

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

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

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

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

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

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

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

Параметры width и height задают размеры панельки проигрывателя. К сожалению, у разных плагинов панельки разного размера, поэтому приходится идти на компромисс, которым является width="145" height="45". Ниже вы можете взглянуть на разные варианты размера панельки. Плагин LiveAudio входит в комплект Netscape. Internet Explorer вызывает Media Player. Плагин Crescendo потихоньку вытесняется из употребления...

В качестве альтернативы можно задать опциональный параметр 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 и не поддерживался старыми браузерами, поэтому решайте сами, использовать его или нет. В конце концов, зачем музыка лентяям и упрямцам, не идущим в ногу с прогрессом? ;)

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

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

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

Всё понятно, правда? Если ваш браузер поддерживает тэг <object>, справа от примера вы увидите работоспособную панельку плагина. Если у вас Internet Explorer - вероятно, увидите, но неработоспособную... По крайней мере, у меня на версии 5.0 панелька была видна, но неактивная. А вот в Netscape 4.71 - никаких проблем.

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