HTML тег <audio>
Тег HTML <audio> встраивает звук: музыку или аудиопотоки. Изучите атрибуты, форматы и политику autoplay с W3docs.
Тег <audio> — один из элементов HTML5, добавленных для встраивания аудиофайлов в веб-страницу. Он воспроизводит музыку, подкасты, звуковые эффекты и любые другие аудиопотоки с помощью встроенного плеера браузера — Flash-плагины и сторонние виджеты больше не нужны.
На этой странице рассматривается: как встроить аудио, какие форматы файлов поддерживают браузеры, атрибуты управления воспроизведением (controls, autoplay, loop, muted, preload), политика autoplay, вызывающая путаницу у большинства разработчиков, и как сделать аудио доступным.
Тег <source> или атрибут src указывают путь к аудиофайлу. Путь может быть абсолютным или относительным URL. Для видео схожим образом работает тег <video>.
Синтаксис
Тег <audio> является парным. Файл можно задать напрямую через src или вложить один или несколько элементов <source> между открывающим (<audio>) и закрывающим (</audio>) тегами, чтобы браузер выбрал поддерживаемый формат.
<audio>
<source src="URL" type="MIME-type">
<source src="URL" type="MIME-type">
</audio>Пример HTML-тега <audio>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>Поддерживаемые аудиоформаты
Не каждый браузер умеет декодировать каждый кодек, поэтому на практике для HTML-аудио важны три формата. В таблице ниже указаны расширение файла, MIME-тип для атрибута type="" и общая поддержка:
| Формат | MIME-тип | Поддержка |
|---|---|---|
| MP3 | audio/mpeg | Поддерживается всеми современными браузерами. Наиболее безопасный вариант по умолчанию. |
| WAV | audio/wav | Поддерживается везде, но файлы несжатые и занимают много места. |
| OGG (Vorbis) | audio/ogg | Chrome, Firefox, Edge, Opera. Не Safari. |
| WebM | audio/webm | Chrome, Firefox, Edge, Opera. Не Safari. |
Поскольку MP3 воспроизводится везде, одного <source src="audio.mp3" type="audio/mpeg"> обычно достаточно. Дополнительные форматы нужны, только если требуется свободная от роялти альтернатива (OGG/WebM) или максимальное качество (WAV).
Как браузер выбирает <source>
Когда вложено несколько элементов <source>, браузер перебирает их сверху вниз и воспроизводит первый, который умеет декодировать — остальные игнорируются. Указывайте предпочтительный или наиболее эффективный формат первым. Атрибут type позволяет браузеру пропускать неподдерживаемые форматы без их загрузки, поэтому рекомендуется всегда его указывать.
<audio controls>
<source src="audio.webm" type="audio/webm"> <!-- tried first -->
<source src="audio.ogg" type="audio/ogg"> <!-- fallback -->
<source src="audio.mp3" type="audio/mpeg"> <!-- universal fallback -->
</audio>Атрибут controls
Без controls аудиоэлемент не отображает ничего видимого, и у пользователя нет возможности запустить воспроизведение. Атрибут controls указывает браузеру показать встроенный интерфейс плеера (воспроизведение/пауза, временная шкала, громкость):
<audio src="audio.mp3" controls></audio>Пример HTML-тега <audio> с атрибутом controls
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls src="/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>Атрибут loop
loop — boolean-атрибут. При его наличии клип перезапускается с начала каждый раз после завершения — удобно для фоновой атмосферы или зацикленного звукового эффекта:
<audio src="audio.mp3" controls loop></audio>Autoplay и атрибут muted
Это наиболее распространённый источник путаницы при работе с HTML-аудио, поэтому читайте внимательно.
Атрибут autoplay просит браузер начать воспроизведение, как только медиа будет готово, без нажатия кнопки play пользователем:
<audio src="audio.mp3" autoplay></audio>На практике современные браузеры блокируют autoplay со звуком. Chrome, Safari и Firefox отказываются автоматически воспроизводить звуковой контент до тех пор, пока пользователь не взаимодействовал со страницей (клик, касание, нажатие клавиши). Это защищает людей от веб-страниц, которые внезапно начинают воспроизводить звук. Если установить autoplay для звукового клипа, он, как правило, просто останется беззвучным и на паузе.
Единственный надёжный способ заставить autoplay работать — одновременно установить muted. Заглушённый клип не содержит звука, поэтому браузер разрешает ему стартовать самостоятельно:
<!-- Autoplays in modern browsers because it is muted -->
<audio src="audio.mp3" controls autoplay muted></audio>Атрибут muted просто запускает элемент с выключенным звуком; пользователь может снять отключение через элементы управления. Для аудио специально заглушённый автовоспроизводимый клип редко бывает полезен сам по себе, но этот паттерн стоит знать, поскольку то же правило распространяется на тег <video>, где muted autoplay используется повсеместно.
Если действительно нужно, чтобы звук начинался сразу, лучше запускать воспроизведение из пользовательского действия. HTML DOM JavaScript API позволяет управлять элементом с помощью методов вроде .play() внутри обработчика клика — браузер считает это действием, одобренным пользователем.
Атрибут preload
preload — единственный атрибут <audio>, принимающий значение, а не boolean. Он подсказывает браузеру, сколько файла нужно загрузить до того, как пользователь нажмёт play:
auto— браузер может скачать весь файл заранее. Используйте, когда ожидаете воспроизведения аудио и хотите мгновенного старта.metadata— загружать только метаданные, такие как продолжительность и первые байты, но не само аудио. Хороший компромисс, позволяющий элементам управления показывать длину трека без лишнего расхода трафика.none— ничего не предзагружать до взаимодействия пользователя. Лучший вариант, когда на странице много клипов или большинство посетителей не будут слушать аудио.
<audio src="audio.mp3" controls preload="metadata"></audio>preload — лишь подсказка: браузер может её проигнорировать ради экономии трафика, а autoplay переопределяет её, принудительно загружая файл.
Доступность
Аудио, существующее только в звуковом виде, недоступно для тех, кто его не слышит. Несколько дополнений делают встроенное аудио инклюзивным:
- Предоставляйте текстовую расшифровку. Для аудио с большим количеством речи (интервью, подкасты) публикуйте текст рядом с плеером, чтобы пользователи экранных ридеров и слабослышащие получали тот же контент.
- Добавляйте субтитры с помощью
<track>. Элемент<track kind="captions">позволяет браузерам отображать синхронизированный текст к аудио. - Помечайте плеер через
aria-label, когда нет видимого заголовка, чтобы вспомогательные технологии сообщали, что это за клип. - Используйте резервный текст между тегами как graceful degradation: браузеры, не умеющие воспроизводить элемент, покажут его вместо аудио.
<audio controls aria-label="Episode 12: Building accessible web audio">
<source src="podcast.mp3" type="audio/mpeg">
<track kind="captions" src="podcast.vtt" srclang="en" label="English">
Your browser does not support the audio element.
<a href="podcast.mp3">Download the audio</a> instead.
</audio>Атрибуты
Тег <audio> имеет атрибуты, указывающие путь к аудиофайлу, поведение при воспроизведении и т. д. Атрибуты controls, autoplay, loop и muted являются boolean; их значения можно опустить. Если указаны, соответствующая функция включается по умолчанию.
| Атрибут | Значение | Описание |
|---|---|---|
| autoplay | Автоматически воспроизводит аудиофайл после загрузки страницы. | |
| controls | Отображает панель управления (воспроизведение/пауза, громкость и т. д.). Если атрибут controls отсутствует, аудио не будет видно на странице. | |
| loop | Повторяет аудиофайл непрерывно с начала после его завершения. | |
| muted | Отключает звук по умолчанию. | |
| preload | auto, metadata, none | Определяет стратегию предзагрузки аудиофайла. |
| src | URL | Указывает путь к аудиофайлу. |
Тег <audio> поддерживает глобальные атрибуты и атрибуты событий.