Перейти к содержанию

<audio>

Тег <audio> (от англ. audio - звук, аудио) добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задаётся через атрибут src или вложенный элемент <source>.

Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим элементом.

Для универсального воспроизведения в браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через элемент <source>.

Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.

Демо

Изображения и мультимедиа

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

Can I Use audio? Data on support for the audio feature across the major browsers from caniuse.com.

Поддержка MP3 аудио-кодека:

Can I Use mp3? Data on support for the mp3 feature across the major browsers from caniuse.com.

Поддержка WAV аудио-кодека:

Can I Use wav? Data on support for the wav feature across the major browsers from caniuse.com.

Поддержка FLAC аудио-кодека:

Can I Use flac? Data on support for the flac feature across the major browsers from caniuse.com.

Поддержка AAC аудио-кодека:

Can I Use aac? Data on support for the aac feature across the major browsers from caniuse.com.

Поддержка Ogg Vorbis аудио-кодека:

Can I Use ogg-vorbis? Data on support for the ogg-vorbis feature across the major browsers from caniuse.com.

Синтаксис

1
2
3
4
<audio src="URL"></audio>
<audio>
    <source src="URL" />
</audio>

Закрывающий тег обязателен.

Атрибуты

autoplay

Звук начинает играть сразу после загрузки страницы.

controls

Добавляет панель управления к аудиофайлу.

loop

Повторяет воспроизведение звука с начала после его завершения.

muted

Отключает звук при воспроизведении музыки.

preload

Управляет предварительной загрузкой аудио данных.

src

Указывает путь к воспроизводимому файлу.

volume

Громкость воспроизведения, в диапазоне от 0.0 (самая тихая) до 1.0 (самая громкая).

autoplay

При наличии этого атрибута аудио начинает воспроизводиться автоматически после загрузки страницы. Атрибут autoplay отменяет действие атрибута preload.

Синтаксис

1
<audio autoplay="autoplay"></audio>

Значения

В качестве значения указывается autoplay, также допустимо вообще не указывать никакое значение.

Значение по умолчанию

По умолчанию этот атрибут выключен.

controls

Добавляет панель управления к аудиотреку. Вид панели и её содержимое зависит от браузера и может в себя включать: кнопку воспроизведения, паузы, перемотки, ползунок для изменения уровня громкости и др.

Синтаксис

1
<audio controls="controls"></audio>

Значения

В качестве значения указывается controls, также допустимо писать атрибут без значения.

Значение по умолчанию

По умолчанию этот атрибут выключен.

loop

Зацикливает воспроизведение аудио, чтобы оно бесконечно повторялось после завершения.

Синтаксис

1
<audio loop="loop"></audio>

Значения

В качестве значения указывается loop, также допустимо писать атрибут без значения.

Значение по умолчанию

По умолчанию этот атрибут выключен.

muted

Отключает звук при воспроизведении музыки.

Синтаксис

1
<audio muted="muted"></audio>

Значения

В качестве значения указывается muted, также допустимо вообще не указывать никакое значение.

Значение по умолчанию

По умолчанию этот атрибут выключен.

preload

Этот перечисляемый аттрибут предназначен для предоставления подсказки браузеру о том, что автор считает лучшим для сайта. Тег может иметь следующие значения

Синтаксис

1
<audio preload="auto"></audio>

Значения

none

указывает, что аудио не должно предварительно загружаться

metadata

указывает, что загрузить нужно только метаданные;

auto

указывает на то, что весь звуковой файл может быть загружен, даже если пользователь не будет использовать его;

Значение по умолчанию

Если он не указан, это будет определенное браузером значение. Спецификация советует использование аттрибута metadata.

Примечания

  • Аттрибут autoplay имеет приоритет над preload. Если autoplay указан, браузер, должен начать загрузку для воспроизведения.
  • Браузер не принуждается спецификацией следовать значению этого аттрибута; это просто подсказка.

src

Указывает путь к воспроизводимому аудиофайлу. Для этой же цели также можно использовать элемент <source>.

Синтаксис

1
<audio src="<адрес>"></audio>

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>audio</title>
    </head>

    <body>
        <p>Александр Клименков - Четырнадцать</p>
        <audio controls>
            <source
                src="audio/music.ogg"
                type="audio/ogg; codecs=vorbis"
            />
            <source
                src="audio/music.mp3"
                type="audio/mpeg"
            />
            Тег audio не поддерживается вашим браузером.
            <a href="audio/music.mp3">Скачайте музыку</a>.
        </audio>
    </body>
</html>

Базовое использование:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- Simple audio playback -->
<audio
    src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
    autoplay
>
    Ваш браузер не поддерживает <code>audio</code> элемент.
</audio>

<!-- Audio playback with captions -->
<audio src="foo.ogg">
    <track
        kind="captions"
        src="foo.en.vtt"
        srclang="en"
        label="English"
    />
    <track
        kind="captions"
        src="foo.sv.vtt"
        srclang="sv"
        label="Svenska"
    />
</audio>

Аудио элемент с элементом источника:

1
2
3
4
<audio controls="controls">
    Ваш браузер не поддерживает <code>audio</code> элемент.
    <source src="foo.wav" type="audio/wav" />
</audio>

Ссылки

Комментарии