<audio>¶

Тег <audio> (от англ. audio - звук, аудио) добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задаётся через атрибут src или вложенный элемент <source>.

Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим элементом.

Для универсального воспроизведения в браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через элемент <source>.

Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.

Поддержка браузерами¶

Can I Use audio? Data on support for the audio feature across the major browsers from caniuse.com.

Поддержка MP3 аудио-кодека:

Can I Use mp3? Data on support for the mp3 feature across the major browsers from caniuse.com.

Поддержка WAV аудио-кодека:

Can I Use wav? Data on support for the wav feature across the major browsers from caniuse.com.

Поддержка FLAC аудио-кодека:

Can I Use flac? Data on support for the flac feature across the major browsers from caniuse.com.

Поддержка AAC аудио-кодека:

Can I Use aac? Data on support for the aac feature across the major browsers from caniuse.com.

Поддержка Ogg Vorbis аудио-кодека:

Can I Use ogg-vorbis? Data on support for the ogg-vorbis feature across the major browsers from caniuse.com.

Синтаксис¶

<audio src="URL"></audio>
<audio>
  <source src="URL" />
</audio>

Закрывающий тег обязателен.

Атрибуты¶

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>

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Спецификации¶

• WHATWG HTML Living Standard
• HTML5

Описание и примеры¶

<!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>

Ссылки¶

• <audio> на MDN