<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>, но некоторые старые браузеры могут не поддерживать некоторые атрибуты или форматы файлов.