Тег <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.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023