ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML5. Уроки для начинающих

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>