HTML-тег <audio>
Тег <audio> является одним из элементов HTML5, добавленных для встраивания аудиофайлов на веб-страницу. Поскольку не все браузеры поддерживают все аудиоформаты, аудиофайл кодируется с помощью специальных кодеков.
Тег <source> или атрибут src используется для указания вариантов одного и того же аудиофайла. Путь к аудиофайлу может содержать абсолютные или относительные URL-адреса.
Синтаксис
Тег <audio> является парным. Содержимое записывается между открывающим (<audio>) и закрывающим (</audio>) тегами.
HTML-тег <audio>
<audio>
<source src="URL">
<source src="URL">
</audio>Пример HTML-тега <audio>:
Пример HTML-тега <audio>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="https://ru.w3docs.com/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="https://ru.w3docs.com/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>Атрибут Loop
Использование атрибута loop заставит аудиофайл воспроизводиться снова и снова:
HTML-тег <audio>
<audio src="audio.mp3" autoplay loop></audio>Отображение элементов управления браузера
Вы можете позволить браузеру отображать пользователю элементы управления, такие как громкость или воспроизведение/пауза. Это делается с помощью атрибута controls.
Код отображения элементов управления браузера
<audio src="audio.mp3" controls></audio>Пример HTML-тега <audio> с атрибутом controls:
Пример HTML-тега <audio> с атрибутом controls
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls src="https://ru.w3docs.com/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>Несколько форматов файлов
С помощью тега <audio> вы можете определить несколько форматов одного и того же аудиофайла.
Пример нескольких форматов файлов
<audio controls>
<source src="audio.ogg">
<source src="audio.mp3">
</audio>Атрибуты
Тег <audio> имеет атрибуты, которые указывают путь к аудиофайлу, поведение воспроизведения и т. д. Атрибуты controls, autoplay, loop и muted являются булевыми; их значения можно опускать. Если они указаны, соответствующая функция включается по умолчанию.
| Атрибут | Значение | Описание |
|---|---|---|
| autoplay | Автоматически воспроизводит аудиофайл после загрузки страницы. | |
| controls | Отображает панель управления (воспроизведение/пауза, громкость и т. д.). Если атрибут controls отсутствует, аудио не будет видно на странице. | |
| loop | Бесконечно повторяет аудиофайл с начала после завершения воспроизведения. | |
| muted | По умолчанию отключает звук. | |
| preload | auto, metadata, none | Определяет стратегию предварительной загрузки аудиофайла. |
| src | URL | Указывает путь к аудиофайлу. |
Тег <audio> поддерживает Глобальные атрибуты и Атрибуты событий.
Практика
Какие свойства имеет тег audio в HTML?