HTML5-аудио

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-разметка имеет следующий вид:

HTML

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

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

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

HTML

<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), звук появляется при наведении на пластинку.

Источник ↗