HTML-элемент<audio> используется для встраивания звукового контента в документ. Он может содержать один или более источников аудио, представленных с помощью атрибутаsrc или элемента<source> – браузер выберет один наиболее подходящий. Он так же может предназначаться для потокового мультимедиа, используя интерфейсMediaStream.

Интерактивный пример

<figure>  <figcaption>Listen to the T-Rex:</figcaption>  <audio controls src="/shared-assets/audio/t-rex-roar.mp3"></audio>  <a href="/shared-assets/audio/t-rex-roar.mp3"> Download audio </a></figure>

figure {  margin: 0;}

Приведённый выше пример показывает простое использование элемента<audio>. По аналогии с элементом<img> мы добавляем путь к мультимедиа, которое мы хотим встроить, в атрибутsrc. Мы можем добавить другие атрибуты, чтобы указать сведения, такие как автовоспроизведение и повтор, хотим ли мы отображать стандартные элементы управления звуком браузера и т.д.

Контент между открывающим и закрывающим тегами элемента<audio> (см. выше) отображается в браузерах, которые не поддерживают этот элемент.

Не все браузеры поддерживают одинаковыеформаты аудио. Вы можете предоставить множество источников внутри вложенных элементов<source>, и тогда браузер будет использовать первый, который он понимает:

<audio controls>  <source src="myAudio.mp3" type="audio/mpeg" />  <source src="myAudio.ogg" type="audio/ogg" />  <p>    Ваш браузер не поддерживает HTML5 аудио. Вот взамен    <a href="myAudio.mp4">ссылка на аудио</a>  </p></audio>

Другие примечания по использованию:

• если вы не укажете атрибутcontrols, тогда аудиоплеер не будет добавлять стандартные элементы управления звуком браузера. Вы можете создать ваши собственные элементы управления в помощьюJavaScript иHTMLMediaElementAPI;
• чтобы обеспечить точный контроль над вашим аудиоконтентом,HTMLMediaElement инициирует (вызывает) множество различныхсобытий;
• вы так же можете использоватьWeb Audio API для непосредственной генерации и управления потоками аудио из кодаJavaScript;
• элементы<audio> не могут иметь субтитры, в отличие от элементов<video>. Смотрите "WebVTT и аудио" для более подробной информации.

Хороший источник информации по использованию HTML-элемента<audio> – это руководство для начинающих "Видео- и аудиоконтент".

Атрибуты

К этому элементу применимыглобальные атрибуты.

autoplay

Атрибут логического типа. Если он указан, аудио начнёт автоматически воспроизводиться, как только сможет это сделать, не дожидаясь завершения загрузки всего файла.

Примечание:Сайты, которые автоматически проигрывают аудио (или видео с аудиодорожкой) могут быть неприятными для пользователей, поэтому этого следует по возможности избегать. Если вам необходимо предлагать функцию автовоспроизведения, то вы должны сделать её Opt-in (вид подписки), то есть когда пользователь специально (сам) включил её. Тем не менее, это может быть полезно, при создании элементов мультимедиа, чей источник будет установлен позднее под контролем пользователя.

controls

Если этот атрибут присутствует, браузер предложит элементы управления, позволяющие пользователю управлять воспроизведением аудио, в том числе громкостью, перемоткой и паузой.

crossorigin

Этот атрибут указывает, следует ли использоватьCORS при загрузке мультимедиа или нет. Допустимые значения:

• anonymous: Запрос cross-origin (т.е. с HTTP-заголовкомOrigin) выполняется, но параметры доступа не передаются (т.е. нетcookie, не используетсястандарт X.509 или базовая HTTP-аутентификация);
• use-credentials: Запрос cross-origin (т.е. с HTTP-заголовкомOrigin) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация).Если этот атрибут не задан, то CORS при загрузке мультимедиа не используется (т.е. без отправки HTTP-заголовкаOrigin). Если задан неправильно, то он обрабатывается так, как если бы использовалось значениеanonymous. Для получения дополнительной информации смотрите "Настройки атрибутов CORS".

loop

Атрибут логического типа. Если он указан, проигрыватель будет автоматически возвращаться в начало при достижении конца аудио.

muted

Атрибут логического типа, который указывает, будет ли звук изначально отключён. Значением по умолчанию являетсяfalse.

preload

Этот атрибут предназначен для того, чтобы указать браузеру, что, по мнению автора, приведёт к лучшему взаимодействию с пользователем. Он может иметь одно из следующих значений:

• none: указывает, что аудио не должно предварительно загружаться;

• metadata: указывает, что предварительно загружаются только метаданные аудио (например, продолжительность аудио);

• auto: указывает, что весь файл аудио может быть предварительно загружен, даже если пользователь не предполагает его использовать;

• пустая строка: синоним значенияauto.Значение по умолчанию отличается для каждого браузера. Спецификация рекомендует установить значениеmetadata.

  Примечание:

  • Атрибутautoplay имеет приоритет надpreload. Еслиautoplay указан, браузер, очевидно, должен будет начать загрузку аудио для воспроизведения.
  • Спецификация не обязывает браузер придерживаться значения этого атрибута – это просто совет.

src

URL аудио для встраивания. Это является темойконтроля доступа HTTP. Этот атрибут является необязательным; вы можете вместо него использовать элемент<source> внутри блока audio (<audio></audio>), чтобы указать аудио для встраивания.

События

Этот элемент может инициировать (вызывать) различныесобытия.

Взаимодействие с CSS

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

Стандартные элементы управления имеют значение свойстваdisplay, равноеinline, и зачастую хорошей идеей является установка этого свойства в значениеblock, чтобы улучшить контроль над позиционированием и разметкой, если вы не хотите, чтобы он находился внутри текстового блока или чего-то подобного.

Вы можете стилизовать стандартные элементы управления CSS-свойствами, которые влияют на блок как единое целое, например, вы можете задатьborder иborder-radius,padding,margin и т.д. Тем не менее вы не можете стилизовать отдельные компоненты внутри аудиоплеера (например, изменить размер кнопок, иконок, размер шрифта и т.д.), и элементы управления в разных браузерах отличаются.

Чтобы получить внешний вид совместимый с разными браузерами, вам необходимо создать собственные элементы управления. Они могут быть размечены и стилизованы любым удобным для вас способом и затем может быть использованJavaScript вместе сAPIHTMLMediaElement для объединения функций, которые они выполняют.

"Основы стилизации видеопроигрывателя" предоставляют некоторые полезные методы стилизации – они написаны в контексте<video>, но в значительной степени применимы и к<audio>.

Примеры

Базовое использование

Следующий пример показывает простое использования элемента<audio> для воспроизведения файла в формате OGG. Он будет автоматически воспроизводиться из-за атрибутаautoplay. Также он содержит резервный контент, на случай отсутствия поддержи браузером элемента<audio>.

<!-- Простое воспроизведение аудио --><audio src="AudioTest.ogg" autoplay>  Ваш браузер не поддерживает элемент <code>audio</code>.</audio>

Элемент <audio> с элементом <source>

В этом примере указывается, какой аудиотрек будет добавлен с помощью атрибутаsrc во вложенный элемент<source>, а не в непосредственно элемент<audio>. Всегда полезно включатьMIME-тип файла в атрибутtype, так как браузер может немедленно определить, может ли он воспроизвести этот файл, и не тратить на него время, если не может.

<audio controls="controls">  <source src="foo.wav" type="audio/wav" />  Ваш браузер не поддерживает элемент <code>audio</code>.</audio>

Элемент <audio> с множеством элементов <source>

Этот пример включает множество элементов<source>. Браузер попытается загрузить источник из первого элемента<source> (Opus), если он не в состоянии воспроизвести его, тогда он перейдёт ко второму (Vorbis) и, наконец, к третьему (MP3), если все предыдущие по каким-либо причинам не могут быть воспроизведены браузером:

<audio controls="">  <source src="foo.opus" type="audio/ogg; codecs=opus" />  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />  <source src="foo.mp3" type="audio/mpeg" /></audio>

Доступность

Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions allow people who are experiencing hearing loss to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording's content at a pace and format that is comfortable for them.

If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.

In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone:

100:00:00 --> 00:00:45[Energetic techno music]200:00:46 --> 00:00:51Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?1600:00:52 --> 00:01:02[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?

• Субтитры и скрытые субтитры.
• Формат Web Video Text Tracks (WebVTT).
• WebAIM: субтитры, стенограммы и описания аудио.
• Понимание WCAG, Руководство 1.2 объяснения.
• Понимание критерия успешного исхода 1.2.1 | W3C Понимание WCAG 2.0
• Понимание критерия успешного исхода 1.2.2 | W3C Понимание WCAG 2.0

Техническая сводка

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

Совместимость с браузерами

Смотрите также

• Медиа форматы для HTML-элементов audio и video.
• Web Audio API.
• HTMLAudioElement.
• nsIDOMHTMLMediaElement.
• <source>.
• <video>.
• Видео и аудио контент.
• Основы кросс-браузерного audio.