Элемент <audio> (от англ. audio — звук) добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задаётся через атрибут src или вложенный элемент <source>. Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим элементом.
Список поддерживаемых браузерами кодеков приведён в табл. 1.
Табл. 1. Кодеки и браузеры
| Кодек |
|
|
|
|
|
|
| ogg/vorbis |
|
17 |
3 |
11.5 |
|
3.5 |
| wav |
|
12 |
3 |
11.5 |
3.1 |
3.5 |
| mp3 |
9 |
12 |
3 |
15 |
3.1 |
22 |
| AAC |
9 |
12 |
3 |
15 |
3.1 |
22 |
Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через элемент <source>.
Синтаксис
<audio src="<адрес>"></audio>
<audio>
<source src="<адрес>">
</audio>
Атрибуты
- autoplay
- Звук начинает играть сразу после загрузки страницы.
- controls
- Добавляет панель управления к аудиофайлу.
- crossorigin
- Является частью технологии CORS и применяется при загрузке аудио со стороннего сайта для использования в элементе <canvas>.
- loop
- Повторяет воспроизведение звука с начала после его завершения.
- muted
- Отключает звук при воспроизведении музыки.
- preload
- Используется для предварительной загрузки аудиофайла или его данных вместе с загрузкой веб-страницы.
- src
- Указывает путь к воспроизводимому файлу.
Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>audio</title>
</head>
<body>
<p>Александр Клименков - Четырнадцать</p>
<audio controls>
<source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">
<source src="audio/music.mp3" type="audio/mpeg">
Тег audio не поддерживается вашим браузером.
<a href="audio/music.mp3">Скачайте музыку</a>.
</audio>
</body>
</html>
Результат примера в браузере Safari показан на рис. 1.
Рис. 1. Воспроизведение аудиофайла
Примечание
Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
Спецификация
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.