HTML5 Аудио
Аудио в Интернете
До появления стандарта HTML5 аудиофайлы можно было воспроизводить в веб-браузере лишь с помощью плагина (на подобие flash).
HTML5 элемент <audio>
указывает стандартный способ встраивания аудио в веб-страницу.
Поддержка браузерами
Цифры в таблице определяют первую версию браузера, которая полностью поддерживает элемент <audio>
.
Элемент | |||||
---|---|---|---|---|---|
<audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
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 Аудио - Поддержка браузерами
В HTML5 есть три поддерживаемых аудиоформата: MP3, WAV и OGG.
Поддержка браузерами разных форматов:
Браузер | MP3 | WAV | OGG |
---|---|---|---|
Edge/IE | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | YES | NO |
Opera | YES | YES | YES |
HTML Аудио - Медиа типы
Формат файла | Медиа тип |
---|---|
MP3 | audio/mpeg |
OGG | audio/ogg |
WAV | audio/wav |
HTML Аудио - Методы, свойства и события
HTML5 определяет методы, свойства и события DOM для элемента <audio>
.
Это позволяет загружать, воспроизводить и приостанавливать аудио, а также устанавливать продолжительность и громкость.
Есть также события DOM, которые могут извещать вас, когда звук начинает воспроизводиться, приостанавливаться и т.д.
Для получения полной справки на DOM перейдите к HTML5 Аудио/Видео DOM Справочника.
HTML5 Аудио теги
Тег | Описание |
---|---|
<audio> | Определяет звуковой (аудио) контент |
<source> | Определяет множество мультимедийных ресурсов для элементов медиа, таких как <video> и <audio> |