Серёжа Сыроежкин
Серёжа СыроежкинКопирайтер
27.05.2015

HTML5 audio

В прошлой статье Проигрыватель видео HTML5 мы уже говорили об использовании HTML5 и почему это актуально на сегодняшний день. Теперь остановимся более подробно на вопросе "Как вставить аудио на сайт с помощью HTML5".

Добавить музыку на сайт можно с помощью тега audio. Пример простейшей реализации этого тега:

<audio src="nubex.mp3" />

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

БраузерGoogle ChromeMozilla FirefoxSafariOperaInternet Explorer
mp3 Есть Нет Есть Нет Есть
wav Есть Есть Есть Есть Нет
AAC Есть Нет Есть Нет Есть
ogg/vorbis Есть Есть Нет Есть Нет

Как видно из таблицы, наиболее "универсальным" является формат .wav. Но, тем не менее, его не поддерживает Internet Explorer. Поэтому, рекомендуется конвертировать аудиофайл в несколько форматов и использовать несколько аудио-кодеков. Следующий пример иллюстрирует один из способов добавления аудио HTML на веб-страницу:

<audio controls>
    <source src="nubex.ogg" type="audio/ogg; codecs=vorbis">
    <source src="nubex.mp3" type="audio/mpeg">
    Ваш браузер не поддерживает тег audio.
</audio>

Внешний вид аудиоплеера будет зависеть от браузера, вот, например, вид аудиоплеера в браузере Firefox:

Внешний вид аудиоплеера HTML5 в браузере Firefox

Атрибуты тега AUDIO

К основным атрибутам тега audio относятся:

  • src - путь к аудиофайлу (может задаваться отдельно с помощью вложенного тега source);
  • controls - отображается панель управления аудио (play, pause, volume и т.д.);
  • autoplay - воспроизводит аудиофайл сразу после загрузки веб-страницы;
  • loop - циклическое воспроизведение;

Вложенный тег source может иметь следующие атрибуты:

  • src - путь к аудиофайлу;
  • type - тип аудио-источника;
  • media - тип устройства, на котором будет проигрываться аудиофайл (all - на всех устройствах, tv - телевизор и т.д.);