Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Приведенный выше пример показывает простое использование элемента <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 и HTMLMediaElement API;
  • чтобы обеспечить точный контроль над вашим аудиоконтентом, 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 вместе с API HTMLMediaElement для объединения функций, которые они выполняют.

"Основы стилизации видеопроигрывателя" предоставляют некоторые полезные методы стилизации – они написаны в контексте <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:

1
00:00:00 --> 00:00:45
[Energetic techno music]

2 
00:00:46 --> 00:00:51
Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?

16
00:00:52 --> 00:01:02
[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?

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

Категории контента Потоковый контент, фразовый контент, встроенный контент. Если элемент имеет атрибут controls, он так же принадлежит к категориям интерактивного и явного контента.
Разрешенное содержимое Если элемент имеет атрибут src: ноль или более элементов <track>, за которыми следует прозрачный контентет, который не содержит элементов <audio> или <video>.
Иначе: ноль или более элементов <source>, за которыми следует ноль или более элементов <track>, за которыми следует прозрачный контент, который не содержит элементов <audio> или <video>.
Пропуск тега Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
Разрешенные родительские элементы Любой элемент, который разрешает встроенный контент в качестве содержимого.
Разрешённые роли ARIA application
DOM-интерфейс HTMLAudioElement

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

Спецификация Статус Комментарий
HTML Living Standard
Определение '<audio>' в этой спецификации.
Живой стандарт  
HTML5
Определение '<audio>' в этой спецификации.
Рекомендация  

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
audioChrome Полная поддержка 3Edge Полная поддержка ДаFirefox Полная поддержка 3.5
Замечания
Полная поддержка 3.5
Замечания
Замечания For Firefox to play audio, the server must serve the file using the correct MIME type.
IE Полная поддержка 9Opera Полная поддержка 10.5Safari Полная поддержка 3.1WebView Android Полная поддержка 3Chrome Android Полная поддержка 18Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания For Firefox to play audio, the server must serve the file using the correct MIME type.
Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
autoplayChrome Полная поддержка 3Edge Полная поддержка ДаFirefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка 10.5Safari Полная поддержка 3.1WebView Android Полная поддержка 3Chrome Android Полная поддержка 18Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
bufferedChrome ? Edge Полная поддержка ДаFirefox Полная поддержка 4IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android ? Safari iOS ? Samsung Internet Android ?
controlsChrome Полная поддержка 3Edge Полная поддержка ДаFirefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка 10.5Safari Полная поддержка 3.1WebView Android Полная поддержка 3Chrome Android Полная поддержка 18Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
loopChrome Полная поддержка 3Edge Полная поддержка ДаFirefox Полная поддержка 11IE Полная поддержка 9Opera Полная поддержка 10.5Safari Полная поддержка 3.1WebView Android Полная поддержка 3Chrome Android Полная поддержка 18Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 14Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
mozcurrentsampleoffset
Нестандартная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 3.5IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Полная поддержка 4Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
mutedChrome ? Edge Полная поддержка ДаFirefox Полная поддержка 11IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 14Opera Android ? Safari iOS ? Samsung Internet Android ?
playedChrome Полная поддержка 49Edge Полная поддержка 14Firefox Полная поддержка 15IE Полная поддержка 11Opera Полная поддержка 46Safari Полная поддержка 9.1WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Edge Mobile Полная поддержка 14Firefox Android Полная поддержка 15Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка 5.0
preloadChrome Полная поддержка 3
Замечания
Полная поддержка 3
Замечания
Замечания Defaults to metadata in Chrome 64.
Edge Полная поддержка ДаFirefox Полная поддержка 4
Полная поддержка 4
Нет поддержки 3.5 — 4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: autobuffer
IE Полная поддержка 9Opera Полная поддержка 15
Замечания
Полная поддержка 15
Замечания
Замечания Defaults to metadata in Opera 51.
Нет поддержки 10.5 — 15
Альтернативное имя
Альтернативное имя Использует нестандартное имя: autobuffer
Safari Полная поддержка 3.1WebView Android Полная поддержка 3
Замечания
Полная поддержка 3
Замечания
Замечания Defaults to metadata in Chrome 64.
Chrome Android Полная поддержка 18
Замечания
Полная поддержка 18
Замечания
Замечания Defaults to metadata in Chrome 64.
Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка 14
Замечания
Полная поддержка 14
Замечания
Замечания Defaults to metadata in Opera 51.
Нет поддержки ? — 14
Альтернативное имя
Альтернативное имя Использует нестандартное имя: autobuffer
Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
srcChrome Полная поддержка 3Edge Полная поддержка ДаFirefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка 10.5Safari Полная поддержка 3.1WebView Android Полная поддержка 3Chrome Android Полная поддержка 18Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
volumeChrome ? Edge Полная поддержка ДаFirefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android ? Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Смотрите замечания реализации.
Смотрите замечания реализации.
Использует нестандартное имя.
Использует нестандартное имя.

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

Метки документа и участники

Внесли вклад в эту страницу: JCodeg, mdnwebdocs-bot, pavel9609, torbasow, Neiromaster
Обновлялась последний раз: JCodeg,