Фоновый звук, пример использования. Как правильно вставить звук в страничку?

« Назад

Фоновый звук, пример использования:

вставка звука на страницу

пример использования:

описание:

width (height) - ширина (высота) пульта управления

controls - тип пульта управления

autostart - если значение равно true, то воспроизведение начнётся сразу после загрузки (значения true или false)

loop - повторять ролик или нет (значения true или false)

play_loop - количество повторений ролика

hidden - показать или скрыть пульт управления (значения true или false)

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

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

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

Тэг <bgsound>. Наиболее простой, предназначенный именно для этой цели. Недостаток: не поддерживается в Netscape и вообще считается устаревшим. Здесь я его рассмотрю только для комплекта.

Использование Java-апплета или аналогичного JavaScript-скрипта. Позволяет сделать все, что угодно, от обычного фонового воспроизведения до "музыкальной шкатулки" со множеством мелодий и анимационными эффектами. Недостаток: требует, чтобы в браузере была установлена и включена поддержка Java (а многие её выключают ради повышения быстродействия и надёжности). Это тема для отдельной статьи, да и я не ахти какой специалист в Java, чтобы давать квалифицированные советы.

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

Тэг <object>. Более универсальный механизм, заменяющий <embed>, <img>и <applet>. Его синтаксис во многом похож на синтаксис <embed>, поэтому я кратко остановлюсь на нём в конце статьи. Недостаток: официально появился только в HTML 4.0 (в виде расширений - в HTML 3.2), поэтому не поддерживается старыми браузерами.

Тэг был введен в 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". Укажите небольшое конечное число повторов и/или дайте возможность пользователю остановить музыку на панельке плагина.

Тэг официально был принят в спецификации HTML 4.0. До того он существовал на правах расширения HTML 3.2 и не поддерживался старыми браузерами, поэтому решайте сами, использовать его или нет. В конце концов, зачем музыка лентяям и упрямцам, не идущим в ногу с прогрессом? ;)

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

соответствует<object data="melody.mid" type="audio/x-midi" width="145" height="45">

</object>

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

З повагою ІЦ “KURSOVIKS”!