Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:
Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139
Урок №12: Музыка и звуки в HTML
Иногда возникает необходимость подключить фоновую музыку к HTML странице или же создать проигрыватель со списком воспроизведения. Конечно исключительно с помощью HTML это сделать можно, однако эффективнее будет подключить на сайт флеш-проигрыватель. В данной статье мы постараемся максимально раскрыть связь звуковых файлов с HTML и рассмотрим различные способы, как интегрировать музыку в HTML-код.
Фоновая музыка
Прежде чем устанавливать на сайт(особенно на главную его страницу) фоновую музыку, следует подумать, не будет ли она раздражать посетителей, ведь у каждого из нас свои предпочтения к музыке. Также стоит учитывать, что многие пользователи могут зайти на ваш сайт, слушая свою музыку, им будет не очень приятно слушать одновременно два музыкальных трека. Также у посетителей должен быть установлен веб-плеер (Quick Time, VLC media player), иначе ничего они не услышат. Существует два способа задать фоновую музыку, однако мы рассмотрим только один, т.к второй работает не во всех браузерах и задается в контейнере head, что не всегда удобно.
Благодаря этому коду сейчас на сайте играет фоновая музыка. Рассмотрим более детально параметры и значения тега <embed>
autostart – параметр определят будет ли автоматически играть музыка после открытия станицы. При значении true – да, при false – нет.
loop – параметр определяет будет ли фоновая музыка играть бесконечно или один раз прозвучит и все. При значении true – да, при false – только один раз.
hidden - определяет наличие панели управления плеера. При значении true – отображается, при false – отсутствует.
width - задает ширину панели управления проигрывателя (если проигрыватель не отображается, то и задавать не следует)
height - задает высоту панели управления проигрывателя (если проигрыватель не отображается, то и задавать не следует)
Есть еще один способ задать фоновую музыку, однако качество такой музыки будет намного хуже, так как парный тег <bgsound>, работает с файлами таких форматов - wav, au, midi. Данный тег имеет следующие параметры:
src - задает url адрес звукового файла с расширением.
loop - задает количество повторов фоновой музыки, при значении -1, трек будет повторятся бесконечно.
balance - баланс стерео-звучания ( имеет значения от -10000 до 10000, по умолчанию 0)
volume - громкость воспроизведения, максимальное значение 0 (возможный диапазон громкости от -10000 до 0)
Пример использования такой фоновой музыки: <bgsound src="http://phantomx5.ucoz.ru/Frozen_Madonna.mid" loop="1"></bgsound>
К использованию фоновой музыки необходимо серьезно подойти и встраивать ее когда это действительно необходимо.
Подключение проигрывателей
Проигрыватели также можно настроить, чтоб они автоматически начинали воспроизведение музыки(в качестве фоновой), при загрузке веб-страницы, преимуществом такого способа является, что музыку можно остановить, если уж сильно раздражает. Можно подключить проигрыватель с помощью того же <embed>, включив отображение плагина, например:
В HTML5 существует еще один парный тег <audio>, к сожалению он воспроизводит музыку не во всех браузерах, однако браузеры постоянно обновляются и улучшаются, так что это лишь вопрос времени. Если рассматривать Google Chrome, то он предпочтет тег <audio>, чем открывать веб-проигрыватели, ведь у него есть свои, встроенные. Opera наоборот, скорее "предпочтет" первый способ, так как mp3 в данном теге не поддерживает. Тег <audio> имеет следующие параметры:
src – задает путь к воспроизводимому файлу
autoplay – автоматическое воспроизведение файла при открытии страницы
Несомненно, музыка - это жизнь, это ключ к любому настроению. Существуют страницы с маленьким контентом, например, страницы подписки на рассылку, регистрации и т.д., именно туда и можно вставить вашу фоновую музыку. А по-поводу проигрывателей, в основном они уместны на музыкальных сайтах и развлекательных порталах. Сейчас все, как правило, слушают музыку со своего плеера, где уже стоит список любимых песен или же онлайн, в социальных сетях, что также очень удобно.
Тег <embed> предназначен не только для вставки в HTML-код музыки, однако с появлением тега Тег <object>, благодаря которому можно вставлять большинство мультимедийных объектов, он немного устарел. Более подробно рассмотрим <object> на следующем уроке: Встраивание мультимедийных объектов