Наука + Бизнес = $$$

Карта Сайта

Суббота, 21.10.2017, 11:35
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №12: Музыка и звуки в HTML

Музыка и звуки в HTML

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


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

Прежде чем устанавливать на сайт(особенно на главную его страницу) фоновую музыку, следует подумать, не будет ли она раздражать посетителей, ведь у каждого из нас свои предпочтения к музыке. Также стоит учитывать, что многие пользователи могут зайти на ваш сайт, слушая свою музыку, им будет не очень приятно слушать одновременно два музыкальных трека. Также у посетителей должен быть установлен веб-плеер (Quick Time, VLC media player), иначе ничего они не услышат. Существует два способа задать фоновую музыку, однако мы рассмотрим только один, т.к второй работает не во всех браузерах и задается в контейнере head, что не всегда удобно. Пример вставки фоновой музыки:

<body>

<embed src="http://phantomx5.ucoz.ru/Lisa_Miskovsky-.mp3" autostart="true" hidden="false" loop="false" width="2" height="2" align="bottom"> </embed>

</body>

Благодаря этому коду сейчас на сайте играет фоновая музыка. Рассмотрим более детально параметры и значения тега <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>, включив отображение плагина, например:

<body>

<embed src="http://phantomx5.ucoz.ru/Lisa_Miskovsky-.mp3" autostart="true" hidden="true" loop="false" width="400" height="200" align="bottom"> </embed>

</body>

Вид в браузере:


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

В HTML5 существует еще один парный тег <audio>, к сожалению он воспроизводит музыку не во всех браузерах, однако браузеры постоянно обновляются и улучшаются, так что это лишь вопрос времени. Если рассматривать Google Chrome, то он предпочтет тег <audio>, чем открывать веб-проигрыватели, ведь у него есть свои, встроенные. Opera наоборот, скорее "предпочтет" первый способ, так как mp3 в данном теге не поддерживает. Тег <audio> имеет следующие параметры:

  • src – задает путь к воспроизводимому файлу
  • autoplay – автоматическое воспроизведение файла при открытии страницы
  • loop - зацикливает воспроизведения трека.
  • control - добавляет панель управления

Пример использования атрибутов данного тега:

<audio src="http://phantomx5.ucoz.ru/Lisa_Miskovsky-.mp3" controls="controls"></audio>

 

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

Тег <embed> предназначен не только для вставки в HTML-код музыки, однако с появлением тега Тег <object>, благодаря которому можно вставлять большинство мультимедийных объектов, он немного устарел. Более подробно рассмотрим <object> на следующем уроке: Встраивание мультимедийных объектов


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru