Музыка на сайте. Тег <аudio> в HTML5

Январь, 21st 2012Рубрика: Web-мастеринг 8372
Подписаться на комментарии по RSS

Не секрет, что времена технологии flash, к сожалению или к счастью, уходят. Виной тому нежелание компании Adobe доработать свой продукт под современные нужды. А рынок диктует новые условия и сбрасывать со счетов такого гиганта, как Apple было не предусмотрительно.

Apple полностью отказалась от поддержки технологии Flash в своих мобильных устройствах, в виду её чрезмерной ресурсоемкости, что в свою очередь, не лучшим образом сказывалось на времени автономной работы.

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

Но не всё так плохо, HTML5 наконец-то начал входить в жизнь, и толчок к его быстрому развитию и распространению, на мой взгляд, дало именно огромное количество устройств на базе iOS.

HTML5, к примеру, предоставляет простую возможность добавления музыки на сайт с помощью тега <audio>. В предыдущем моем посте, о Конюхе Федорове, для вывода аудиофайла использовался как раз этот тег.

Для проигрывания аудио файла в HTML5, достаточно разместить на страничке следующий код:

<audio src="song.mp3" controls="controls"></audio>

Выглядеть это будет примерно так:

В примере использована песня американской джазовой певицы Carmen Mercedes McRae.

На текущий момент существует три основных формата для элемента <audio> - .ogg, .mp3 и .wav. Однако, нет ни одного браузера, где полностью реализована поддержка всех указанных форматов.

ФорматIE 8IE 9Firefox 3.5Opera 10.5Chrome 10.0Safari 3.0
Ogg VorbisНетНетДаДаДаНет
MP3НетДаНетНетДаДа
WavНетДаДаДаДаДа

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

Проблему кроссбраузерности можно решить, добавив несколько элементов source элементу <audio>, указав в качестве параметра, пути к одному аудиофайлу в различных форматах. Браузер воспроизведет первый поддерживаемый файл. Пример:

<audio controls="controls">
   <source src="song.ogg" />
   <source src="song.mp3" />
   Ваш браузер не поддерживает элемент audio.
</audio>

В примерах, у тега <audio> присутствует атрибут controls, который добавляет управление аудио файлом (play, pause, volume). Помимо controls имеется ещё несколько атрибутов:

src – собственно путь к воспроизводимому файлу;

autoplay – воспроизведение файла при открытии страницы;

loop - зацикливает воспроизведения трека.

Это далеко не весь список, да и цели полностью описать работу данного элемента не ставилось.

Хотелось ещё заметить, что в MaxSite CMS, на которой сейчас работает блог, нашелся не понятный баг - аудиофайлы не проигрываются, если пути к ним указывать в элементе source. По всей видимости элемент source где-то экранируется движком. Попробую разобраться, как будет время, а пока, для совместимости, размещаю аудиофайлы в формате wav.

Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

Без регистрации
ваш комментарий будет опубликован после проверки
Регистрация на сайте

На указанный адрес будет отправлено письмо с кодом активации. Вы можете настроить собственный профиль и стать активным участником или автором.