Аудио в HTML5

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

Но благодаря новшествам HTML5 появилась возможность добавлять аудио содержимое на страницы сайта. Причем не используя множества дополнительных модулей.

Элемент <audio>

Используется для вставки звукового файла на веб страницу.

Общий вид элемента:

<audio src= «music.ogg» controls></audio>

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

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

Атрибуты тега <audio>

• autoplay — автоматическое воспроизведение после загрузки страницы;
• controls — указывает что нужно отобразить элементы управления воспроизведением;
• loop — циклическое воспроизведение звука;
• muted — выключение звука при воспроизведении файла;
• preload — отвечает за предварительную загрузку каудио файла. некоторые браузеры его игнорируют. значение: auto — браузер загружает файл полностью чтобы он был доступен когда пользователь начнет его воспроизведение; metadata — браузер загружает небольую начальную часть чтобы определить его характеристики; none — автоматическаязагрузка отсутствует.
• src — содержит абсолютный или относительный путь к аудио файлу.

Форматы аудио файлов:

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

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

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

Альтернативные аудио-ресурсы

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

Атрибуты тега <source>

• media — определяет тип медиа устройства;
• src — содержит путь к файлу (относительный или абсолютный);
• type — определяет MME тип файла.

Субтитры и заголовки

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

Атрибуты тега <track>

• default — воспроизведение по умолчанию. Только один элемент <track> может содержать данный атрибут.
• kind — указание типа текстовой дорожки, по умолчанию выводятся субтитры. Может принимать значения: captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео; chapters — добавляет название глав в виде списка для навигации; descriptions — добавляет звуковое описание происходящего в видео; metadata — метаданные, используемые скриптами, не отображаются для пользователей; subtitles — текстовое дублирование звуковой дорожки видео, отображаются в виде субтитров.
• label — Добавляет название дорожки, если он не задат, то применится значение по умолчанию.
• src — содержит абсолютный или относительный адрес данных текстовой дорожки.
• srclang — язык воспроизводимой дорожки.