ГлавнаяУроки html → Урок 13. Музыка в html

HTML - Урок 13. Музыка в html

Фоновая музыка в html

На web-страницу можно интегрировать фоновую музыку. Когда пользователь будет попадать на эту страницу, будет проигрываться мелодия, конечно, если у пользователя есть колонки или наушники.

Для этого нужен аудифайл в одном из форматов: WAV, AU, MIDI. Для примера можете взять такой файл в папке C:\WINDOWS\Media или скачать мелодию с сайта http://midi.bun.ru.

Положите этот файл в тот же каталог, где лежат ваши html-страницы. Теперь в код любой страницы (в теги body)добавьте следующий тег:
<bgsound src="Love_Me_Do_Beatles.mid" loop="1"></bgsound>

Теперь при просмотре этой страницы всегда будет присутствовать фоновая музыка. Рассмотрим параметры тега <bgsound>:

  • src - адрес звукового файла

  • loop - число повторов мелодии (если равно -1, то повторяется бесконечно)

  • balance - стереобаланс (значения от -10000 до 10000)

  • volume - громкость, максимальное значение = 0 (возможные значения от -10000 до 0)

Стоит ли задавать странице фоновую музыку решать вам, но хотелось бы привести несколько доводов, почему от этого лучше воздержаться:

Чаще всего у пользователя уже играет его любимая композиция или, наоборот, он сидит в тишине (может вокруг все спят) и вдруг начинает "петь" страница. Причем отключить фоновый звук пользователь не может. Что он сделает? Немедленно покинет вашу страницу и больше не вернется.

Качественный звуковой файл вы добавить не сможете (он слишком большого объема), а файлы в форматах wav, au и midi качеством не отличаются. Зачем же заставлять пользователя слушать не очень хорошую музыку, когда у него под рукой, скорее всего, есть выбор музыки отличного качества.

Наконец, каким бы маленьким не был звуковой файл, он съедает время на загрузку и часть трафика, а полезной информации не несет. Так стоит ли? Прежде, чем размещать фоновую мелодию подумайте об этом.

Подключаемые модули

Подключаемые модули позволяют управлять проигрыванием звуковых файлов.

Здесь тоже не все просто. Когда мы встраиваем в html-страницу какой-либо объект, браузер пытается отобразить его самостоятельно. Если это простой объект (текст или рисунок), то браузер это сделает без посторонней помощи. Если объект незнакомый, то браузер попробует прибегнуть к помощи внешней программы или встроенного в браузер программного модуля (плагина), которые и отобразят этот объект. Если же нужного приложения браузер не найдет, то появится сообщение о том, где его можно скачать и как установить (в большинстве случаев, но не всегда).

А по статистике лишь 5% людей станут устанавливать себе дополнительные модули, остальные 95% просто уйдут со страницы.

Для примера всего вышеизложенного создадим html-страницу со следующим кодом:
<html> <head> <title>Музыка в html</title> </head> <body> Композиция "Love Me Do" Beatles <embed src="Love_Me_Do_Beatles.mid" height="60" width=144> </body> </html>

Здесь тег <embed> указывает браузеру вставить на web-страницу модуль управления звуковым файлом, а его параметры задают адрес музыкального файла, а также ширину и высоту консоли органов управления.

Посмотрим как эту страницу будут отображать разные браузеры:

работа со звуком в IE


работа со звуком в Opera


работа со звуком в FF


Как видите, Opera не отработал так, как ожидалось, т.е. не дала возможность управлять прослушиванием файла.

Стоит ли отказываться от музыки в html? Вряд ли, мультимедиа завоевывает интернет семимильными шагами, поэтому встраивать такие объекты иногда просто необходимо, но делать это лучше с помощью элемента <object>, которому посвящен следующий урок.

Правда, проблему это не решит, пользователю все равно придется устанавливать дополнительные модули, но с развитием мультимедийных технологий и пользователи становятся другими и уже у многих стоят различные проигрыватели тех или иных файлов. И будем надеяться, что в скором времени установка маленького плагина перестанет быть преградой.



Предыдущий урок Вернуться в раздел Следующий урок 
Если этот сайт оказался вам полезен, вы можете помочь в его развитии, поставив одну из этих ссылок на свой сайт.

Уроки PHP Уроки PHP Уроки PHP Уроки PHP Уроки PHP Уроки PHP

Код кнопки:


Скачайте одним архивом видеоуроки HTML!

Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.