CSS властивості
ГлавнаяТеги HTMLТег <audio> в HTML

Тег <audio> в HTML

885

Елемент <audio> (від англ. audio — звук) додає, відтворює та керує налаштуваннями аудіозапису на веб-сторінці. Шлях до файлу задається через атрибут src або вкладений елемент <source>. Всередині контейнера <audio> можна написати текст, який буде виводитися в браузерах, що не працюють з цим елементом.

Список кодеків, що підтримуються браузерами, наведено в табл. 1.

Табл. 1. Кодеки та браузери
Кодок
ogg/vorbis 17 3 11.5 3.5
wav 12 3 11.5 3.1 3.5
mp3 9 12 3 15 3.1 22
AAC 9 12 3 15 3.1 22

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

Синтаксис

<code data-language="html"><audio src="<адреса>"></audio> <audio> <source src="<адреса>">
</audio>

Закриваючий тег

Обов'язковий.

Атрибути

autoplay
Звук починає грати відразу після завантаження сторінки.
controls
Додає панель керування до аудіофайлу.
loop
Повторює відтворення звуку спочатку після його завершення.
muted
Вимкнення звуку під час відтворення музики.
preload
Використовується для попереднього завантаження аудіофайлу або його даних разом із завантаженням веб-сторінки.
src
Вказує шлях до файлу, що відтворюється.

Приклад

 <!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>

Результат прикладу в браузері IE показаний на мал. 1.

Відтворення аудіофайлу

Мал. 1. Відтворення аудіофайлу

Примітка

Управління відтворенням аудіо відрізняється між браузерами за своїм виглядом але основні елементи збігаються. Це кнопка відтворення/паузи, довжина треку, минулий та сумарний час звучання, а також рівень гучності.

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

Специфікація Статус
WHATWG HTML Living Standard Живий стандарт
HTML5 Рекомендація

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

Кожна специфікація проходить кілька стадій схвалення.

  • Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
  • Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Особняком стоїть живий стандарт HTML (Living) — він не дотримується традиційної нумерації версій, оскільки перебуває в постійній розробці та оновлюється регулярно.

Браузери

9 12 5 11.5 4.1 4
2.2 4 11 5

Браузери

У таблиці браузерів застосовуються такі позначення.

  •  — елемент повністю підтримується браузером;
  •  — елемент браузером не сприймається та ігнорується;
  •  — при роботі можлива поява різних помилок, або елемент підтримується з застереженнями.

Число вказує версію браузреа, з якої елемент підтримується.

Автор та редактори

Автор: Влад Мержевич
Останнє змінення: 25.10.2018
Редактори: Влад Мержевич