<audio> HTML
Тег <audio>
(от англ. audio - звук, аудио) добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задаётся через атрибут src
или вложенный элемент <source>
.
Внутри контейнера <audio>
можно написать текст, который будет выводиться в браузерах, не работающих с этим элементом.
Для универсального воспроизведения в браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через элемент <source>
.
Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
Поддержка браузерами
Поддержка MP3 аудио-кодека:
Поддержка WAV аудио-кодека:
Поддержка FLAC аудио-кодека:
Поддержка AAC аудио-кодека:
Поддержка Ogg Vorbis аудио-кодека:
Синтаксис
<audio src="URL"></audio>
<audio>
<source src="URL">
</audio>
Закрывающий тег обязателен.
WAI ARIA
Нет значения role
по-умолчанию.
Допустимые значения role
:
application
Атрибуты
-
autoplay
— Звук начинает играть сразу после загрузки страницы. -
controls
— Добавляет панель управления к аудиофайлу. -
loop
— Повторяет воспроизведение звука с начала после его завершения. -
muted
— Отключает звук при воспроизведении музыки. -
preload
— Управляет предварительной загрузкой аудио данных -
src
— Указывает путь к воспроизводимому файлу. -
volume
— Громкость воспроизведения, в диапазоне от 0.0 (самая тихая) до 1.0 (самая громкая).
autoplay
При наличии этого атрибута аудио начинает воспроизводиться автоматически после загрузки страницы. Атрибут autoplay
отменяет действие атрибута preload
.
Синтаксис
<audio autoplay="autoplay"></audio>
Значения
В качестве значения указывается autoplay
, также допустимо вообще не указывать никакое значение.
Значение по умолчанию
По умолчанию этот атрибут выключен.
controls
Добавляет панель управления к аудиотреку. Вид панели и её содержимое зависит от браузера и может в себя включать: кнопку воспроизведения, паузы, перемотки, ползунок для изменения уровня громкости и др.
Синтаксис
<audio controls="controls"></audio>
Значения
В качестве значения указывается controls
, также допустимо писать атрибут без значения.
Значение по умолчанию
По умолчанию этот атрибут выключен.
loop
Зацикливает воспроизведение аудио, чтобы оно бесконечно повторялось после завершения.
Синтаксис
<audio loop="loop"></audio>
Значения
В качестве значения указывается loop
, также допустимо писать атрибут без значения.
Значение по умолчанию
По умолчанию этот атрибут выключен.
muted
Отключает звук при воспроизведении музыки.
Синтаксис
<audio muted="muted"></audio>
Значения
В качестве значения указывается muted
, также допустимо вообще не указывать никакое значение.
Значение по умолчанию
По умолчанию этот атрибут выключен.
preload
Этот перечисляемый аттрибут предназначен для предоставления подсказки браузеру о том, что автор считает лучшим для сайта. Тег может иметь следующие значения
Синтаксис
<audio preload="auto"></audio>
Значения
-
none
— указывает, что аудио не должно предварительно загружаться -
metadata
— указывает, что загрузить нужно только метаданные; -
auto
— указывает на то, что весь звуковой файл может быть загружен, даже если пользователь не будет использовать его;
Значение по умолчанию
Если он не указан, это будет определенное браузером значение. Спецификация советует использование аттрибута metadata
.
Примечания
- Аттрибут
autoplay
имеет приоритет надpreload
. Еслиautoplay
указан, браузер, должен начать загрузку для воспроизведения. - Браузер не принуждается спецификацией следовать значению этого аттрибута; это просто подсказка.
src
Указывает путь к воспроизводимому аудиофайлу. Для этой же цели также можно использовать элемент <source>
.
Синтаксис
<audio src="<адрес>"></audio>
Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Нет.
Спецификации
Примеры
<!DOCTYPE html>
<html>
<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>
Базовое использование:
<!-- Simple audio playback -->
<audio
src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
autoplay>
Ваш браузер не поддерживает <code>audio</code> элемент.
</audio>
<!-- Audio playback with captions -->
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>
Аудио элемент с элементом источника:
<audio controls="controls">
Ваш браузер не поддерживает <code>audio</code> элемент.
<source src="foo.wav" type="audio/wav">
</audio>