Тег <audio> используется для добавления на веб-страницу аудиофайла. Так как не все браузеры поддерживают все аудиоформаты, то аудифайл кодируют с помощью специальных кодеков и добавляют файлы одновременно через тег <source>. Для указания вариаций одного и того же аудио файла может также использоваться атрибут src. Путь к аудиофайлу может содержать как абсолютный URL, так и относительный.
Синтаксис
Содержимое тега пишется между открывающим (<audio>) и закрывающим (</audio>) тегами.
<audio>
<source src="URL" >
<source src="URL" >
</audio>Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<audio controls>
<source src="/build/audios/jingle_bells.ogg" type="audio/ogg">
<source src="/build/audios/audio.mp3" type="audio/mpeg">
</audio>
<p>Нажмите кнопку воспроизведения</p>
</body>
</html>Атрибуты
Тег <audio> может быть дополнен атрибутами, которые указывают путь к аудифайлу, указывают, как должен проигрываться аудифайл и т.д.
Когда используются атрибуты controls, autoplay, loop и muted, их значения могут быть опущены. Если атрибут указан, то по умолчанию данная функция считается включенной.
| Атрибут | Значение | Описание |
|---|---|---|
| autoplay | autoplay | Проигрывает аудифайл автоматически после загрузки страницы. |
| controls | controls | Отображает панель управления (кнопка запуска, прокрутка, регулятор громкости). Eсли атрибут controls отсутствует, то аудиофайл не будет отображаться на странице. |
| loop | loop | Воспроизводит аудифайла с начала после его завершения. |
| muted | muted | Отключает звук при воспроизведении музыки |
| preload | auto metadata none |
Воспроизведение начнется после загрузки страницы указывает браузеру загрузить небольшую часть файла, чтобы определить его основные характеристики: (например, размер файла). Воспроизведение начнется только после щелчка мыши по соответствующей кнопке. |
| src | URL | Указывает путь к аудифайлу. |
Тег <audio> также поддерживает глобальные атрибуты и атрибуты событий.
Поддержка браузера
|
|
|
|
|---|---|---|---|
| 4+ | 3.5+ | 4+ | 10.5+ |
Практикуйте свои знания
