Тема:

<audio> - HTML елемент для аудіо

Тег <audio> використовується для вбудовування звукового контенту в документи, він може містити одне або декілька аудіоджерел

Елемент <audio> дозволяє вбудовувати аудіо в веб-сторінку, для цього можна використовувати атрибут src або дочірній елемент <source>, що дозволяє вказати декілька форматів файлів

Браузери не показують однаковий інтерфейс для елемента <audio>, тому для узгодженого вигляду створюють власні елементи керування за допомогою JavaScript.

тег audio приклад використання в HTML

Синтаксис

HTML
<audio src="audio.mp3" controls>
  Ваш браузер не підтримує елемент audio
</audio>

Атрибути

Цей тег може мати глобальні атрибути.

src

URL-адреса аудіофайлу, який потрібно вбудувати

autoplay

Булевий атрибут, який вказує, що відтворення почнеться автоматично, щойно це стане можливим, більшість браузерів блокують цю функцію

controls

Якщо цей атрибут присутній, браузер відобразить стандартні елементи керування відтворенням

loop

Булевий атрибут, який вказує, що аудіо буде відтворюватися по колу

muted

Булевий атрибут, який вказує, що звук буде вимкнено за замовчуванням

preload

Атрибут, який підказує браузеру, як краще завантажувати аудіофайл, можливі значення: none, metadata, auto

Технічне резюме

Категорія контенту

Потоковий контент, фразовий контент, вбудований контент, якщо має атрибут controls, то також інтерактивний контент

Дозволений вміст

Якщо є атрибут src, то нуль або більше елементів <track>, інакше один або більше елементів <source>, за якими слідує нуль або більше елементів <track>

Пропуск тегів

Жоден, початковий і закриваючий теги є обов’язковими

Дозволений батьківський елемент

Будь-який елемент, що приймає вбудований контент

Роль ARIA за замовчуванням

Немає відповідної ролі

Дозволені ARIA ролі

application

DOM інтерфейсHTMLAudioElement

Приклади використання

Результат
<audio controls src="https://upload.wikimedia.org/wikipedia/commons/1/12/%22No_Hard_Feelings_Buddy%22.flac"></audio>

Підтримка браузерів

<audio>
controls
controlslist
crossorigin
disableremoteplayback
loop
muted
preload
src

Останнє оновлення: