HTML-элемент <audio> используется для встраивания звукового контента в документ. Он может содержать один или более источников аудио, представленных с помощью атрибута src или элемента {{HTMLElement("source")}} – браузер выберет один наиболее подходящий. Он так же может предназначаться для потокового мультимедиа, используя интерфейс {{domxref("MediaStream")}}.
<audio>
src
Приведенный выше пример показывает простое использование элемента <audio>. По аналогии с элементом {{htmlelement("img")}} мы добавляем путь к мультимедиа, которое мы хотим встроить, в атрибут src. Мы можем добавить другие атрибуты, чтобы указать сведения, такие как автовоспроизведение и повтор, хотим ли мы отображать стандартные элементы управления звуком браузера и т.д.
Контент между открывающим и закрывающим тегами элемента <audio> (в примере выше) отображается в браузерах, которые не поддерживают этот элемент.
Не все браузеры поддерживают одинаковые форматы аудио. Вы можете предоставить множество источников внутри вложенных элементов {{htmlelement("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
Хороший источник информации по использованию HTML-элемента <audio> – это руководство для начинающих "Видео- и аудиоконтент".
К этому элементу применимы глобальные атрибуты.
Этот атрибут указывает, следует ли использовать {{glossary("CORS")}} при загрузке мультимедиа или нет. Допустимые значения:
anonymous
use-credentials
Origin
Если этот атрибут не задан, то CORS при загрузке мультимедиа не используется (т.е. без отправки HTTP-заголовка {{httpheader("Origin")}}). Если задан неправильно, то он обрабатывается так, как если бы использовалось значение anonymous. Для получения дополнительной информации смотрите "Настройки атрибутов CORS".
false
Этот атрибут предназначен для того, чтобы указать браузеру, что, по мнению автора, приведет к лучшему взаимодействию с пользователем. Он может иметь одно из следующих значений:
none
metadata
auto
Значение по умолчанию отличается для каждого браузера. Спецификация рекомендует установить значение metadata.
autoplay
preload
<audio></audio>
Этот элемент может инициировать (вызывать) различные события.
Элемент <audio> не имеет собственного визуального вывода, если только не указан атрибут controls, в этом случае отображаются стандартные элементы управления браузера.
Стандартные элементы управления имеют значение свойства {{cssxref("display")}}, равное inline, и зачастую хорошей идеей является установка этого свойства в значение block, чтобы улучшить контроль над позиционированием и разметкой, если вы не хотите, чтобы он находился внутри текстового блока или чего-то подобного.
inline
block
Вы можете стилизовать стандартные элементы управления CSS-свойствами, которые влияют на блок как единое целое, например, вы можете задать {{cssxref("border")}} и {{cssxref("border-radius")}}, {{cssxref("padding")}}, {{cssxref("margin")}} и т.д. Тем не менее вы не можете стилизовать отдельные компоненты внутри аудиоплеера (например, изменить размер кнопок, иконок, размер шрифта и т.д.), и элементы управления в разных браузерах отличаются.
Чтобы получить внешний вид совместимый с разными браузерами, вам необходимо создать собственные элементы управления. Они могут быть размечены и стилизованы любым удобным для вас способом и затем может быть использован {{glossary("JavaScript")}} вместе с {{glossary("API")}} {{domxref("HTMLMediaElement")}} для объединения функций, которые они выполняют.
"Основы стилизации видеопроигрывателя" предоставляют некоторые полезные методы стилизации – они написаны в контексте {{HTMLElement("video")}}, но в значительной степени применимы и к <audio>.
Следующий пример показывает простое использования элемента <audio> для воспроизведения файла в формате OGG. Он будет автоматически воспроизводиться из-за атрибута autoplay. Также он содержит резервный контент, на случай отсутствия поддержи браузером элемента <audio>.
<!-- Простое воспроизведение аудио --> <audio src="AudioTest.ogg" autoplay> Ваш браузер не поддерживает элемент <code>audio</code>. </audio>
В этом примере указывается, какой аудиотрек будет добавлен с помощью атрибута src во вложенный элемент {{HTMLElement("source")}}, а не в непосредственно элемент <audio>. Всегда полезно включать {{glossary("MIME type", "MIME-тип")}} файла в атрибут type, так как браузер может немедленно определить, может ли он воспроизвести этот файл, и не тратить на него время, если не может.
type
<audio controls="controls"> <source src="foo.wav" type="audio/wav"> Ваш браузер не поддерживает элемент <code>audio</code>. </audio>
Этот пример включает множество элементов <source>. Браузер попытается загрузить источник из первого элемента <source> (Opus), если он не в состоянии воспроизвести его, тогда он перейдет ко второму (Vorbis) и, наконец, к третьему (MP3), если все предыдущие по каким-либо причинам не могут быть воспроизведены браузером:
<source>
<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?
{{Compat("html.elements.audio")}}
nsIDOMHTMLMediaElement