Аудиотег HTML 5 - httpdoc.ru

HTML-тег аудио

<audio> Тег HTML5 используется для встраивания аудио на веб-страницу. Его атрибуты работают очень похоже на тег видео . Не все браузеры поддерживают все аудиоформаты, поэтому аудиофайл кодируется с использованием специальных кодеков. Рекомендуется использовать .mp3 формат файла, так как это самый популярный аудиоформат во всем мире.

Пример воспроизведения mp3-файла с использованием аудио-тега в HTML:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> HTML Audio Tag </title>
</head>
<body>

<audio controls>
  <source src="/media/pages/images/ogg">
  <source src="/media/pages/images/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

Выход

HTML Audio Tag

Как это работает ?

controls Атрибут аудио добавляет элементы управления, как воспроизведение, пауза, и объем. <source> Элемент позволяет указать альтернативные звуковые файлы , которые браузер может выбрать. Браузер будет использовать первый распознанный формат. Текст между <audio> и </audio> тегами будет отображаться только в браузерах , если <audio> элемент не поддержка.

Аудиоформаты HTML

Формат аудиофайла Тип носителя
.mp3 аудио / mp3
.ogg audio / ogg
.wav аудио / wav

Связать аудиофайлы

Пример
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Linking Audio Files </title>
</head>
<body>
    <p><a href="html-audio.mp3" width="200px" height="50px"> Audio 1 </a></p>
    <p><a href="html-audio.ogg" width="200px" height="50px"> Audio 2 </a></p>
</body>
</html>

Выход

Linking Audio Files

Аудио 1

Аудио 2


Атрибуты аудио HTML5

Теги Описание
controls Он определяет элементы управления звуком с помощью кнопок воспроизведения / паузы.
autoplay Он указывает, что звук начнет воспроизводиться, как только он будет готов.
loop Он указывает, что аудиофайл будет начинаться заново каждый раз, когда он будет завершен.
muted Он используется для отключения звука на выходе.
preload Он определяет вид автора для загрузки аудиофайла при загрузке страницы. Игнорируется, если autoplay используется.
src Он указывает адрес аудиофайла.

Поддержка браузера

Элемент
Microsoft Edge browser.png Край
Chrome browser.png Хром
Firefox browser.png Fire Fox
Opera browser.png Опера
safari browser.png Сафари
.mp3
да
да
да
да
да
.ogg
да
да
да
да
Нет
.WebM
да
да
да
да
Нет