1.12. HTML5-аудио

Опубликовано: 7 августа 2014 Обновлено: 5 июня 2022 18 комментариев

HTML5-аудио предоставляет улучшенные возможности работы с аудио контентом. До недавнего времени единственным способом добавления звуковых файлов на веб-страницы было интегрирование фонового звука с помощью тега <bgsound>, который проигрывался во время просмотра пользователем страницы без возможности выключения.

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

Как добавить HTML5-аудио на веб-страницу

Содержание:
1. Элемент <audio>
2. Аудио кодеки
3. Альтернативные медиа-ресурсы <source>
4. Добавление субтитров и заголовков <track>
5. Стилизованный пример аудио плеера

1. Элемент <audio>

Поддержка браузерами

IE: 9.0
Firefox: 3.5 базовая поддержка, 15.0 — полная
Chrome: 3.0
Safari: 3.1
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44

HTML5-элемент <audio> используется для внедрения звукового контента в веб-страницы. В общем виде HTML-разметка имеет следующий вид:

<audio src="name.ogg" controls></audio>

Атрибут controls добавляет отображение браузерами интерфейса управления аудио плеера — кнопки воспроизведения, паузы, громкости.

audio — Рис. 1. Внешний вид аудио плеера в разных браузерах

В настоящий момент не существует аудио формата, который бы работал во всех браузерах, поэтому для обеспечения доступности контента максимально широкой аудитории рекомендуется включать несколько источников звука, представленных с использованием атрибута src элемента <source>. Одновременно можно добавить резервный контент для браузеров, которые не поддерживают элемент <audio>.

<audio controls>
  <source src="name.ogg" type="audio/ogg">
  <source src="name.mp3" type="audio/mpeg">
  <a href="sounds/name.mp3">Скачать name.mp3</a>
</audio>

Таблица 1. Атрибуты тега <audio>
Атрибут	Описание, принимаемое значение
`autoplay`	Автоматическое воспроизведение аудио файла сразу же после загрузки страницы.
`controls`	Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (начинать и останавливать воспроизведение, переходить в другое место записи, регулировать громкость).
`loop`	Циклическое воспроизведение аудио файла.
`muted`	Выключает звук при воспроизведении аудио файла.
`preload`	Атрибут, отвечающий за предварительную загрузку аудио контента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения: `auto` — браузер загружает аудио файл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение. `metadata` — браузер загружает первую небольшую часть аудио файла, чтобы определить его основные характеристики. `none` — отсутствие автоматической загрузки аудио файла.
`src`	Содержит абсолютный или относительный URL-адрес аудио файла.

2. Аудио кодеки

Аудио кодек (декодер) представляет собой программу для преобразования цифровых данных в формат звукового файла или звукового потока. Популярными аудио форматами являются следующие:

MP3 — самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. В силу лицензионных отчислений не поддерживается Firefox и Opera.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним, поддерживает более высокое качество звука при сходном размере файла.

Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно широко поддерживается аппаратными проигрывателями.

3. Альтернативные медиа-ресурсы

Элемент <source> используется для добавления нескольких медиа-ресурсов для <audio> и <video>. Указывает на альтернативные видео/аудио файлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека.

Таблица 2. Атрибуты тега <source>
Атрибут	Описание, принимаемое значение
`media`	Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл).
`src`	Содержит абсолютный или относительный URL-адрес медиафайла.
`type`	Определяет MIME-тип медиафайла.

4. Добавление субтитров и заголовков

Элемент <track> используется в качестве дочернего элемента <audio> и <video>. Добавляет текстовую дорожку для субтитров, заголовков медиафайлов или другой текстовой информации, которая должна быть видна во время воспроизведения аудио или видеофайла.

Таблица 3. Атрибуты тега <track>
Атрибут	Описание, принимаемое значение
`default`	Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент `<track>` может содержать данный атрибут.
`kind`	Указывает тип текстовой дорожки, по умолчанию выводятся субтитры (`subtitles`). Принимаемые значения: `captions` — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей). `chapters` — добавляет названия глав в виде списка для навигации по медиафайлу. `descriptions` — добавляет звуковое описание происходящего в видео (для слепых пользователей). `metadata` — метаданные, используемые скриптами, не отображаются для пользователей. `subtitles` — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео.
`label`	Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию.
`src`	Содержит абсолютный или относительный URL-адрес данных текстовой дорожки.
`srclang`	Язык воспроизводимой дорожки.

5. Стилизованный пример аудио плеера

С помощью css-стилей можно придать аудио плееру необычный вид. Воспроизведение управляется с помощью небольшого скрипта (используется библиотека jQuery), звук появляется при наведении на пластинку.

See the Pen Music animation by Elena Nazarova (@nazarelen) on CodePen.

Скрипты

HTML5-видео