HTML Аудио
HTML элемент <audio> используется для воспроизведения аудиофайла на веб‑странице.
HTML элемент <audio>
Чтобы воспроизвести аудиофайл в HTML, используется элемент <audio>:
Пример
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Ваш браузер не поддерживает элемент audio.
</audio>Как работает HTML элемент <аудио>
Атрибут controls добавляет элементы управления аудио — такие как воспроизведение, пауза и регулировка громкости.
Элемент <source> позволяет указать альтернативные аудиофайлы, из которых браузер может выбрать один. Браузер будет использовать первый распознанный формат.
Текст между тегами <audio> и </audio> будет отображаться только в браузерах, которые не поддерживают элемент <audio>.
Автовоспроизведение аудио в HTML
Чтобы аудиофайл запускался автоматически, используйте атрибут autoplay:
Пример
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Ваш браузер не поддерживает элемент audio.
</audio>Примечание: Браузеры на базе Chromium в большинстве случаев не разрешают автовоспроизведение. Однако автовоспроизведение с отключённым звуком всегда разрешено.
Добавьте атрибут muted после autoplay, чтобы аудиофайл начинал воспроизводиться автоматически (но без звука):
Пример
<audio controls autoplay muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Ваш браузер не поддерживает элемент audio.
</audio>Поддержка браузерами
Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент <audio>:
| Элемент |  |  |  |  |  |
|---|---|---|---|---|---|
<audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Форматы аудио в HTML
Поддерживаются три формата аудио: MP3, WAV и OGG. Поддержка разных форматов в браузерах:
| Браузер | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | ДА | ДА* | ДА* |
| Chrome | ДА | ДА | ДА |
| Firefox | ДА | ДА | ДА |
| Safari | ДА | ДА | НЕТ |
| Opera | ДА | ДА | ДА |
*Начиная с Edge 79.
Типы мультимедиа для аудио в HTML
| Формат файла | Тип мультимедиа |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
Методы, свойства и события для HTML‑аудио
DOM HTML определяет методы, свойства и события для элемента <audio>.
Это позволяет:
- загружать аудио;
- воспроизводить и приостанавливать аудио;
- устанавливать продолжительность и громкость.
Также существуют DOM‑события, которые могут уведомлять вас о том, что аудио начало воспроизводиться, было приостановлено и т. д.