<audio>: Элемент вставки аудио

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

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

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

Атрибуты этого элемента включают глобальные атрибуты.

autoplay

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

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

controls

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

controlslist

Атрибут controlslist, когда указан, помогает браузеру выбрать, какие элементы управления отображать для элемента audio всякий раз, когда браузер отображает свои собственные элементы управления (то есть, когда указан атрибут controls).

Допустимые значения — nodownload, nofullscreen и noremoteplayback.

crossorigin

Этот атрибут перечисления указывает, следует ли использовать CORS для получения связанного аудиофайла. Ресурсы с поддержкой CORS могут быть повторно использованы в элементе <canvas> без потери целостности. Допустимые значения:

anonymous

Отправляет междоменный запрос без учетных данных. Другими словами, он отправляет заголовок Origin: HTTP без cookie, сертификата X.509 или выполнения HTTP Basic аутентификации. Если сервер не предоставляет учетные данные для сайта происхождения (не устанавливая заголовок Access-Control-Allow-Origin: HTTP), ресурс будет повреждён и его использование будет ограничено.

use-credentials

Отправляет междоменный запрос с учетными данными. Другими словами, он отправляет заголовок Origin: HTTP с cookie, сертификатом или выполнением HTTP Basic аутентификации. Если сервер не предоставляет учетные данные для сайта происхождения (через заголовок Access-Control-Allow-Credentials: HTTP), ресурс будет поврежден и его использование будет ограничено.

При отсутствии атрибута ресурс извлекается без запроса CORS (то есть без отправки заголовка Origin: HTTP), предотвращая его использование без повреждений в элементах <canvas>. Если атрибут недействителен, он обрабатывается так, как если бы было использовано перечисление anonymous. См. атрибуты настроек CORS для дополнительной информации.

disableremoteplayback

Булевый атрибут, используемый для отключения возможности удалённого воспроизведения на устройствах, подключенных по проводным (HDMI, DVI и т. д.) и беспроводным технологиям (Miracast, Chromecast, DLNA, AirPlay и т. д.). См. этот предлагаемый стандарт для получения дополнительной информации.

В Safari вы можете использовать x-webkit-airplay="deny" в качестве резервного варианта.

loop

Булевый атрибут: если указан, проигрыватель аудио автоматически перейдёт к началу при достижении конца аудио.

muted

Булевый атрибут, указывающий, будет ли аудио первоначально выключено. Его значение по умолчанию — false.

preload

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

• none: Указывает, что аудио не должно загружаться заранее.
• metadata: Указывает, что извлекаются только метаданные аудио (например, длительность).
• auto: Указывает, что весь аудиофайл может быть загружен, даже если ожидается, что пользователь его не будет использовать.
• пустая строка: Синоним значения auto.

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

Примечание:

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

src

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

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

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3" download="myAudio.mp3">MP3</a> or
    <a href="myAudio.ogg" download="myAudio.ogg">OGG</a> audio.
  </p>
</audio>

Мы предлагаем исчерпывающее руководство по типам файлов медиа и поддерживаемым кодекам аудио. Также доступно руководство по поддержке кодеков видео.

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

• Если вы не укажете атрибут controls, плеер аудио не будет включать стандартные элементы управления браузера. Однако вы можете создать собственные пользовательские элементы управления с помощью JavaScript и API HTMLMediaElement.
• Для точного управления вашим аудио контентом, элементы HTMLMediaElement вызывают множество различных событий. Это также предоставляет способ отслеживания процесса получения аудио, чтобы вы могли следить за ошибками или определять, когда достаточно данных для начала воспроизведения или манипулирования им.
• Вы также можете использовать Web Audio API, чтобы напрямую генерировать и обрабатывать аудио потоки из кода JavaScript, а не передавать предварительно созданные аудио файлы.
• <audio> элементы не могут иметь субтитров или титров, так же как <video> элементы. См. WebVTT и Аудио Иэна Девлина для получения полезной информации и обходных путей.
• Для тестирования резервного контента в браузерах, которые поддерживают элемент, вы можете заменить <audio> на несуществующий элемент, такой как <notanaudio>.

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

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

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

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

Для получения согласованного внешнего вида во всех браузерах, вам необходимо создать пользовательские элементы управления; их можно разметить и стилизовать так, как вам нужно, а затем использовать JavaScript вместе с API HTMLMediaElement для настройки их функциональности.

Основы стилизации видео плееров предоставляют полезные приемы стилизации — они написаны в контексте <video>, но многие из них одинаково применимы к <audio>.

Вы можете определить моменты добавления и удаления треков в элементе <audio> с помощью событий addtrack и removetrack. Однако эти события не отправляются напрямую в сам элемент <audio>. Вместо этого они отправляются объекту списка треков в элементе <audio> элемента HTMLMediaElement, соответствующему типу добавленного трека:

HTMLMediaElement.audioTracks

Объект AudioTrackList, содержащий все аудиодорожки медиаэлемента. Вы можете добавить обработчик события addtrack для этого объекта, чтобы получать уведомления о добавлении новых аудиодорожек в элемент.

HTMLMediaElement.videoTracks

Добавьте обработчик события addtrack для этого объекта VideoTrackList, чтобы получать уведомления о добавлении видеодорожек в элемент.

HTMLMediaElement.textTracks

Добавьте обработчик события addtrack для этого объекта TextTrackList, чтобы получать уведомления о добавлении новых текстовых дорожек в элемент.

Например, чтобы определить моменты добавления или удаления аудиодорожек в элементе <audio> , можно использовать такой код:

const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Этот код следит за добавлением и удалением аудиодорожек в элементе и вызывает гипотетическую функцию в редакторе треков для регистрации и удаления трека из списка доступных треков редактора.

Вы также можете использовать addEventListener() для прослушивания событий addtrack и removetrack.

Аудио с озвученным диалогом должно предоставлять как субтитры, так и транскрипты, которые точно описывают его содержимое. Субтитры, которые указываются с помощью WebVTT, позволяют людям с нарушениями слуха понимать содержание аудиозаписи во время воспроизведения, а транскрипты позволяют людям, которым требуется дополнительное время, просматривать содержание записи в удобном для них темпе и формате.

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

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

В дополнение к озвученному диалогу, субтитры и транскрипты должны также идентифицировать музыку и звуковые эффекты, которые передают важную информацию. Это включает в себя эмоции и тон. Например, в WebVTT ниже обратите внимание на использование квадратных скобок для предоставления зрителям информации о тоне и эмоциях; это может помочь установить настроение, которое иначе передается с помощью музыки, невербальных звуков и важных звуковых эффектов и так далее.

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?

Также рекомендуется предоставлять некоторое содержимое (например, прямую ссылку для скачивания) в качестве резервного варианта для зрителей, использующих браузер, в котором элемент <audio> не поддерживается:

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3</a> or
    <a href="myAudio.ogg" download="myAudio.ogg">OGG</a> audio.
  </p>
</audio>

• Формат Веб-видеотекстовых треков (WebVTT)
• WebAIM: Субтитры, транскрипты и аудиоописания
• MDN Понимание WCAG, пояснения к пункту 1.2
• Понимание критерия успеха 1.2.1 | W3C Понимание WCAG 2.0
• Понимание критерия успеха 1.2.2 | W3C Понимание WCAG 2.0

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

<!-- Simple audio playback -->
<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg" download="AudioTest.ogg">Download OGG audio</a>.
</audio>

Подробные сведения о том, когда работает автоматическое воспроизведение, как получить разрешение на его использование и как и когда его использовать, см. в нашем руководстве по автоматическому воспроизведению autoplay guide.

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

<audio controls>
  <source src="foo.wav" type="audio/wav" />
  <a href="foo.wav" download="foo.wav">Download WAV audio</a>.
</audio>

В этом примере содержатся несколько элементов <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>

• Веб-технологии для медиа
  • Форматы контейнеров медиа (типы файлов)
  • Руководство по аудиокодекам, используемым в веб
• API Веб-аудио
• HTMLAudioElement
• <source>
• <video>
• Обучающий раздел: Видео и аудио контент
• Основы кроссбраузерного аудио