<audio>
- 25 января 2023
Тег <audio>
используется для вставки аудиофайлов: музыки, звуковых эффектов, аудиокниг и других аудиоматериалов. Он позволяет управлять воспроизведением файла, изменять громкость и перемотку.
Синтаксис тега <audio>
<audio src="audio_file.mp3" controls></audio>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <audio>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
В этом примере аудиофайл с названием audio_file.mp3
будет воспроизводиться на странице с помощью стандартного HTML5-плеера. Атрибут src
задаёт путь к файлу, который нужно воспроизвести. Атрибут controls
добавляет на страницу элементы управления плеером.
<audio src="audio_file.mp3" controls>
Ваш браузер не поддерживает тег audio
</audio>
Здесь мы добавляем альтернативный источник для аудиофайла. Таким образом, если браузер не поддерживает формат Ogg, то он будет использовать MP3-версию файла.
<audio src="audio_file.ogg">
<p>Ваш браузер не поддерживает тег audio</p>
<source src="audio_file.mp3" type="audio/mpeg">
<source src="audio_file.ogg" type="audio/ogg">
</audio>
В этом примере мы размещаем элементы source
внутри тега audio
вместо использования атрибута src
. Можно добавить несколько альтернативных источников в разных форматах, и браузер автоматически выберет подходящий.
<audio controls>
<source src="audio_file.mp3" type="audio/mpeg">
<source src="audio_file.ogg" type="audio/ogg">
<p>Ваш браузер не поддерживает тег audio</p>
</audio>
Для чего использовать тег <audio>
- Воспроизвести музыку или звуки на странице.
- Создать аудиокниги или подкасты для веб-сайта.
- Добавить звуковые эффекты на страницу.
- Воспроизвести речь или звуковые инструкции на сайте, созданном для людей с нарушениями зрения.
- Использовать в обучающих программах для воспроизведения аудиоматериалов.
- Использовать в играх для воспроизведения звуковых эффектов или фоновой музыки.
- Воспроизвести звук в видео на веб-страницах.
Атрибуты тега <audio>
src
— указывает путь к аудиофайлу.controls
— добавляет на страницу стандартный набор элементов управления, таких как кнопки воспроизведения, паузы и громкости.autoplay
— указывает на автоматическое воспроизведение аудиофайла при загрузке страницы.loop
— указывает на повторение воспроизведения аудиофайла.preload
— определяет, как аудиофайл будет загружаться на страницу. Возможные значения:none
,metadata
,auto
.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения тега
Тег <audio>
поддерживается большинством современных браузеров. Однако не все форматы аудиофайлов могут быть воспроизведены во всех браузерах, поэтому рекомендуется использовать несколько форматов аудиофайлов и указывать их через атрибут source
внутри тега <audio>
.
Нюансы
- При использовании атрибута
autoplay
важно не забывать о том, что автовоспроизведение может раздражать посетителей сайта и снижать удобство пользования им. - Тег
<audio>
можно использовать совместно с тегом<source>
, чтобы предоставить несколько форматов аудиофайлов и обеспечить поддержку во всех браузерах. - Браузеры могут поддерживать разные форматы аудиофайлов. Некоторые форматы, такие как MP3, не являются свободными от лицензионных ограничений и могут не поддерживаться в некоторых браузерах. Рекомендуется использовать форматы, которые поддерживаются большинством браузеров, такие как WAV, OGG или AAC.
- Большие аудиофайлы могут занимать много места на сервере и замедлять время загрузки страницы. Рекомендуется оптимизировать размер файла, используя сжатие без потерь.
- Атрибуты тега
<audio>
позволяют настроить различные параметры, такие как автоматическое воспроизведение, повторение и громкость. Важно использовать атрибуты с умом, чтобы не нарушать пользовательский опыт. - Современные браузеры хорошо поддерживают тег
<audio>
, но некоторые старые браузеры могут не поддерживать некоторые атрибуты или форматы файлов.
Поддержка браузерами
Тег поддерживается всеми современными браузерами. Актуальная информация — на caniuse.
Альтернативные теги
Альтернативные теги для <audio>
— <embed>
и <object>
. Используйте их только в случае, если <audio>
не подходит для конкретной задачи.
Актуальность
Тег <audio>
не устарел и продолжает использоваться в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023