<audio> – елемент вбудованого аудіо
Елемент <audio>
HTML використовується для вбудовування звукового контенту в документи. Він може містити одне або кілька аудіо джерел, представлених за допомогою атрибута src
або елемента <source>
: браузер вибере найбільш підхожий. Він також може приймати потокове медіа, використовуючи MediaStream
.
Спробуйте його в дії
Приклад вище демонструє просте використання елемента <audio>
. Подібно до елемента <img>
, шлях до медіа для вбудування включається в атрибут src
; можна включити й інші атрибути, щоб задати інформацію штибу того, чи потрібно, щоб звук автоматично відтворювався і повторювався, чи потрібно показати типові елементи керування аудіо від браузера тощо.
Вміст між початковим та кінцевим тегами <audio></audio>
виводиться як запасний варіант у тих браузерах, що не підтримують цей елемент.
Атрибут
Серед атрибутів цього елемента – глобальні атрибути.
autoplay
Булів атрибут: коли він заданий, то аудіо буде автоматично починати відтворення, як тільки це можливо, не чекаючи завершення завантаження всього аудіофайлу.
[!NOTE] Сайти, що автоматично відтворюють аудіо (або відео з доріжкою аудіо), можуть бути неприємними для користувачів, тому цього слід уникати, якщо можливо. Якщо ви все ж хочете надати функціональність автоматичного відтворення, то повинні зробити це лише доступним варіантом (вимагаючи від користувача спеціально ввімкнути це). Проте така можливість може бути корисною при створенні елементів медіа, джерело яких буде задано пізніше, під контролем користувача. Дивіться додаткову інформацію про те, як правильно використовувати автоматичне відтворення, у нашому посібнику з автоматичного відтворення.
controls
Якщо цей атрибут присутній, то браузер надасть елементи керування, що дозволять користувачу керувати відтворенням аудіо, включно з гучністю, перемотуванням та паузою й продовженням відтворення.
controlslist
Атрибут
controlslist
, коли заданий, допомагає браузерові обрати, які елементи керування показувати для елементаaudio
, коли браузер показує свій власний набір елементів керування (тобто коли заданий атрибутcontrols
).Дозволені значення –
nodownload
,nofullscreen
іnoremoteplayback
.crossorigin
Цей перелічений атрибут позначає те, чи потрібно використовувати CORS для отримання пов'язаного аудіофайлу. Ресурси, що підтримують CORS, можуть бути використані повторно в елементі
<canvas>
, не ставши ославленими. Дозволені значення:anonymous
Надсилає запит до іншого походження без відповідних облікових даних. Іншими словами, він надсилає HTTP-заголовок
Origin:
без реп'яшка, сертифіката X.509 і HTTP-автентифікації. Якщо сервер не надає облікові дані для сайту походження (не задаючи заголовок HTTPAccess-Control-Allow-Origin:
), то ресурс буде ославленим, і його використання буде обмеженим.use-credentials
Надсилає запит до іншого походження з обліковими даними. Іншими словами, він надсилає HTTP-заголовок
Origin:
з реп'яшком, сертифікатом X.509 або HTTP-автентифікацією. Якщо сервер не надає облікові дані для сайту походження (не задаючи заголовок HTTPAccess-Control-Allow-Credentials:
), то ресурс буде ославленим, і його використання буде обмеженим.
Коли цього атрибута немає, то ресурс отримується без CORS-запиту (тобто без надсилання заголовка HTTP
Origin:
), що запобігає його неославленому використанню в елементах<canvas>
. Якщо значення недійсне, то воно обробляється так, ніби було використано перелічене ключове слово anonymous. Більше про це – в Атрибутах налаштування CORS.disableremoteplayback
Булів атрибут, що використовується для відключення можливості віддаленого відтворення на пристроях, що підключені за допомогою дротових (HDMI, DVI тощо) і бездротових технологій (Miracast, Chromecast, DLNA, AirPlay тощо). Більше інформації – у цій запропонованій специфікації.
У Safari можна використовувати запасний варіант
x-webkit-airplay="deny"
.loop
Булів атрибут: коли він заданий, то аудіопрогравач автоматично перейде на початок, коли досягне кінця аудіофайлу.
muted
Булів атрибут, що вказує на те, чи буде аудіо спочатку заглушено. Усталене значення –
false
.preload
Цей перелічений атрибут призначений для надання браузерові підказки про те, що автор вважає найкращим для користувача. Він може мати одне з наступних значень:
none
– вказує на те, що аудіо не повинно бути завантажене наперед.metadata
– вказує на те, що потрібно завантажити лише метадані аудіо (наприклад, довжину).auto
– вказує на те, що весь аудіофайл може бути завантажений, навіть якщо не очікується, що користувач буде його використовувати.- порожній рядок – синонім значення
auto
.
Усталене значення – різне в різних браузерах. Специфікація радить, щоб це було значення
metadata
.Примітка:
– Атрибут
autoplay
має пріоритет надpreload
. Якщо заданоautoplay
, то браузер очевидно повинен почати завантажувати аудіо для відтворення. – Специфікація не зобов'язує браузер дотримуватися значення цього атрибута; це лише підказка.src
URL аудіо до вбудування. Це значення підлягає контролю доступу HTTP. Цей атрибут необов'язковий: замість нього для задання аудіо до вбудування можна використовувати елемент
<source>
всередині блоку audio.
Події
Назва події | Коли спрацьовує |
---|---|
audioprocess |
Буфер введення ScriptProcessorNode готовий до обробки.
|
canplay
|
Браузер може відтворити медіа, але вважає, що завантажено недостатньо даних для того, щоб відтворити медіа до кінця без зупинки для подальшої буферизації вмісту. |
canplaythrough
|
Браузер вважає, що може відтворити медіа до кінця без зупинки для подальшої буферизації вмісту. |
complete |
Візуалізація OfflineAudioContext зупинилася.
|
durationchange
|
Атрибут duration було оновлено. |
emptied
|
Медіа стало порожнім; наприклад, ця подія надсилається, коли медіа вже було завантажено (або частково завантажено), і викликано метод HTMLMediaElement.load для його перезавантаження.
|
ended
|
Відтворення зупинилося, тому що був досягнутий кінець медіа. |
loadeddata
|
Завершив завантаження перший кадр медіа. |
loadedmetadata
|
Метадані були завантажені. |
loadstart
|
Спрацьовує, коли браузер почав завантажувати ресурс. |
pause
|
Відтворення було призупинено. |
play
|
Відтворення розпочалося. |
playing
|
Відтворення готове розпочатися після призупинення або відкладення у зв'язку з відсутністю даних. |
ratechange
|
Змінився темп відтворення. |
seeked
|
Завершилася операція seek (перемотування). |
seeking
|
Розпочалася операція seek (перемотування). |
stalled
|
Користувацький агент намагається отримати дані медіа, але вони не надходять, що неочікувано. |
suspend
|
Завантаження даних медіа було призупинено. |
timeupdate
|
Час, заданий атрибутом currentTime , було оновлено.
|
volumechange
|
Гучність змінилася. |
waiting
|
Відтворення зупинилося у зв'язку з тимчасовою відсутністю даних |
Примітки щодо застосування
Не всі браузери підтримують одній й ті самі типи файлів та кодеки аудіо; можна надати декілька джерел у вкладених елементах <source>
, і браузер використає перше, яке зрозуміє:
<audio controls>
<source src="myAudio.mp3" type="audio/mpeg" />
<source src="myAudio.ogg" type="audio/ogg" />
<p>
Стягнути аудіо в форматі
<a href="myAudio.mp3" download="myAudio.mp3">MP3</a> або
<a href="myAudio.ogg" download="myAudio.ogg">OGG</a>.
</p>
</audio>
У нас є великий і детальний посібник щодо типів медіафайлів та кодеків аудіо, які можна використовувати в цих типах. Також доступний посібник щодо кодеків, які підтримуються для відео.
Інші примітки щодо застосування:
- Якщо не задати атрибут
controls
, плеєр аудіо не буде містити типові елементи керування браузера. Однак, можна створити власні елементи керування, за допомогою JavaScript та APIHTMLMediaElement
. - Щоб дозволити точне керування вмістом-аудіо, об'єкти
HTMLMediaElement
запускають чимало різних подій. Це також надає спосіб відстежувати процес завантаження аудіо, щоб можна було виявити помилки або визначити, коли вже достатньо даних для початку відтворення або обробки. - Також можна використати API Web Audio – для безпосереднього створення та обробки потоків аудіо з коду JavaScript, а не потокового відтворення наявних файлів аудіо.
- Елементи
<audio>
не можуть мати субтитрів або підписів, пов'язаних з ними, як це можуть елементи<video>
. Корисна інформація про це та обхідні шляхи – в статті Яна Девліна WebVTT та аудіо. - Щоб перевірити запасний вміст у браузерах, що підтримують цей елемент, можна замінити
<audio>
на відсутній елемент, наприклад,<notanaudio>
.
Добре загальне джерело інформації щодо використання <audio>
HTML – це підручник для початківців Відео та аудіо вміст.
Оформлення засобами CSS
Елемент <audio>
не має власного візуального виводу, якщо не задати атрибут controls
, – в такому випадку будуть показані типові елементи керування від браузера.
Усталені контрольні елементи усталено мають значення display
inline
, і нерідко доброю ідеєю є задати значення block
, щоб поліпшити керування позиціонуванням та оформленням, якщо немає потреби, щоб ці елементи знаходилися всередині текстового блоку або чогось подібного.
Усталені контрольні елементи можна стилізувати за допомогою властивостей, що впливають на блок як на єдине ціле, тож, наприклад, їм можна задати border
і border-radius
, padding
, margin
тощо. Проте не можна стилізувати окремі компоненти всередині плеєра аудіо (наприклад, змінити розмір або піктограми кнопок, шрифт тощо), а крім того, ці елементи відрізняються в різних браузерах.
Щоб отримати сталі вигляд і відчуття в різних браузерах, необхідно створити власні елементи керування; їх можна розмітити та оформити будь-яким зручним способом, а потім за допомогою JavaScript та API HTMLMediaElement
підключити їхню функціональність.
Посібник Основи стилізації плеєра відео надає деякі корисні способи стилізації – він написаний у контексті <video>
, але більшість способів так само застосовні до <audio>
.
Відстеження додавання та видалення доріжок
За допомогою подій addtrack
і removetrack
можна відстежувати, коли в елементі <audio>
додаються та видаляються доріжки. Проте ці події не надсилаються безпосередньо елементові <audio>
. Замість цього вони надсилаються об'єктові списку доріжок всередині HTMLMediaElement
елемента <audio>
, який відповідає типу доріжки, що додається до елемента:
HTMLMediaElement.audioTracks
Об'єкт
AudioTrackList
, що містить всі доріжки аудіо елемента медіа. Можна додати до цього об'єкта слухачaddtrack
, щоб отримати звістку про додавання до елемента нових доріжок аудіо.HTMLMediaElement.videoTracks
Додайте до об'єкта
VideoTrackList
слухачaddtrack
, щоб отримати звістку про додавання до елемента доріжок відео.HTMLMediaElement.textTracks
Додайте до об'єкта
TextTrackList
слухач подійaddtrack
, щоб отримати звістку про додавання до елемента нових текстових доріжок.
[!NOTE] Навіть попри те, що це елемент
<audio>
, він все одно має списки відео та текстових доріжок, і насправді може використовуватися для відтворення відео, хоч наслідки для користувацького інтерфейсу можуть бути дивними.
Наприклад, щоб відстежити, коли до елемента <audio>
додаються або видаляються доріжки аудіо, можна використовувати такий код:
const elem = document.querySelector("audio");
elem.audioTrackList.onaddtrack = (event) => {
trackEditor.addTrack(event.track);
};
elem.audioTrackList.onremovetrack = (event) => {
trackEditor.removeTrack(event.track);
};
Цей код стежить за доріжками аудіо щодо їх додавання та видалення з елемента, і запускає гіпотетичну функцію редактора доріжок, щоб зареєструвати та видалити доріжку зі списку доступних у редакторі доріжок.
Щоб відстежувати події addtrack
і removetrack
, можна також використовувати addEventListener()
.
Доступність
Аудіо з усним діалогом повинно супроводжуватися і субтитрами, і стенограмами, які точно описують його вміст. Субтитри, які задаються за допомогою WebVTT, дають людям з втратою слуху змогу розуміти вміст аудіозапису під час його відтворення, а стенограми дають людям, які потребують додаткового часу, змогу ознайомитися з вмістом запису у темпі та форматі, які зручні для них.
Якщо використовуються автоматичні сервіси субтитрування, важливо переглянути згенерований вміст, аби переконатися, що він точно відображає вихідний аудіофайл.
Безпосередньо елемент <audio>
не підтримує WebVTT. Доведеться знайти бібліотеку або фреймворк, що надає таку можливість, або написати код для відображення субтитрів самостійно. Одним з варіантів є відтворення аудіо за допомогою елемента <video>
, який підтримує WebVTT.
Крім усних діалогів, субтитри та стенограми також повинні описувати музику та звукові ефекти, які передають важливу інформацію. В тому числі – емоції та інтонації. Наприклад, у WebVTT нижче зверніть увагу на використання квадратних дужок для повідомлення глядачеві інтонації та емоційних відчуттів; це може допомогти задати настрій, який зазвичай передається за допомогою музики, невербальних звуків та важливих звукових ефектів, і т.д..
1
00:00:00 --> 00:00:45
[Енергійна музика техно]
2
00:00:46 --> 00:00:51
Ласкаво просимо до подкасту Time Keeper! У цьому випуску ми обговорюємо, який швейцарський годинник є наручним швейцарським годинником?
16
00:00:52 --> 00:01:02
[Сміх] Вибачте! Я маю на увазі, який наручний годинник є швейцарським годинником.
Крім цього, доброю практикою є надання певного вмісту (наприклад, пряме посилання на завантаження) як запасного варіанта для глядачів, які використовують браузер, в якому елемент <audio>
не підтримується:
<audio controls>
<source src="myAudio.mp3" type="audio/mpeg" />
<source src="myAudio.ogg" type="audio/ogg" />
<p>
Стягнути аудіо у форматах <a href="myAudio.mp3">MP3</a> або
<a href="myAudio.ogg" download="myAudio.ogg">OGG</a>.
</p>
</audio>
- Формат текстових доріжок вебвідео (WebVTT)
- WebAIM – Субтитри, стенограми та описи аудіо
- MDN Розуміння WCAG, пояснення Настанови 1.2
- Розуміння критерію успіху 1.2.1 | W3C Розуміння WCAG 2.0
- Розуміння критерію успіху 1.2.2 | W3C Розуміння WCAG 2.0
Приклади
Базове застосування
Наступний приклад демонструє просте застосування елемента <audio>
для відтворення файлу OGG. Він автоматично починає відтворення завдяки атрибуту autoplay
– якщо сторінка має дозвіл на це – а також містить запасний вміст.
<!-- Просте відтворення аудіо -->
<audio src="AudioTest.ogg" autoplay>
<a href="AudioTest.ogg" download="AudioTest.ogg"
>Стягнути аудіо у форматі OGG</a
>.
</audio>
Деталі про те, як працює автовідтворення, як отримати дозвіл на його використання, а також про те, коли і як його варто використовувати, див. в нашому посібнику з автовідтворення.
Елемент <audio> з елементом <source>
Цей приклад задає те, яку аудіодоріжку вбудувати, використовуючи атрибут src
вкладеного елемента <source>
, а не безпосередньо на елементі <audio>
. Завжди корисно включати MIME-тип файлу в атрибут type
, оскільки так браузер може миттєво визначити, чи здатен він відтворити цей файл, і не витрачати на нього час, якщо ні.
<audio controls>
<source src="foo.wav" type="audio/wav" />
<a href="foo.wav" download="foo.wav">Стягнути аудіо у форматі WAV</a>.
</audio>
<audio> з кількома елементами <source>
Цей приклад містить кілька елементів <source>
. Браузер намагається завантажити перший елемент <source>
(Opus), якщо здатен його відтворити; якщо ні, то переходить до другого (Vorbis), а в кінці – до MP3:
<audio controls>
<source src="foo.opus" type="audio/ogg; codecs=opus" />
<source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
<source src="foo.mp3" type="audio/mpeg" />
</audio>
Технічний підсумок
Категорії вмісту |
Потоковий вміст, оповідальний вміст, вбудований вміст. Якщо елемент має атрибут
controls – інтерактивний вміст та відчутний вміст.
|
---|---|
Дозволений вміст |
Якщо елемент має атрибут src : нуль або більше елементів <track> , після яких – прозорий вміст, що не містить елементів медіа <audio> і <video> .Інакше – нуль або більше елементів <source> , після яких – нуль або більше елементів <track> , після яких – прозорий вміст, що не містить елементів медіа <audio> і <video> .
|
Пропуск тега | Немає; і початковий, і кінцевий теги – обов'язкові. |
Дозволені батьківські елементи | Всі елементи, що приймають вбудований вміст. |
Неявна роль ARIA | Немає відповідної ролі |
Дозволені ролі ARIA | application |
Інтерфейс DOM | HTMLAudioElement |
Специфікації
Специфікація |
---|
HTML Standard (HTML) # the-audio-element |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
audio
|
Chrome Full support 3 | Edge Full support 12 | Firefox Full support 3.5 | Internet Explorer Full support 9 | Opera Full support 10.5 | Safari Full support 3.1 | WebView Android Full support 3 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support 3 | Samsung Internet Full support 1.0 |
autoplay
|
Chrome Full support 3 | Edge Full support 12 | Firefox Full support 3.5 | Internet Explorer Full support 9 | Opera Full support 10.5 | Safari Full support 3.1 | WebView Android Full support 3 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support 3 | Samsung Internet Full support 1.0 |
buffered
|
Chrome Сумісність невідома; будь ласка, оновіть. ? | Edge Full support 18 | Firefox Full support 4 | Internet Explorer Сумісність невідома; будь ласка, оновіть. ? | Opera Сумісність невідома; будь ласка, оновіть. ? | Safari Сумісність невідома; будь ласка, оновіть. ? | WebView Android Сумісність невідома; будь ласка, оновіть. ? | Chrome Android Сумісність невідома; будь ласка, оновіть. ? | Firefox for Android Full support 4 | Opera Android Сумісність невідома; будь ласка, оновіть. ? | Safari on iOS Сумісність невідома; будь ласка, оновіть. ? | Samsung Internet Сумісність невідома; будь ласка, оновіть. ? |
controls
|
Chrome Full support 3 | Edge Full support 12 | Firefox Full support 3.5 | Internet Explorer Full support 9 | Opera Full support 10.5 | Safari Full support 3.1 | WebView Android Full support 3 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support 3 | Samsung Internet Full support 1.0 |
loop
|
Chrome Full support 3 | Edge Full support 12 | Firefox Full support 11 | Internet Explorer Full support 9 | Opera Full support 10.5 | Safari Full support 3.1 | WebView Android Full support 3 | Chrome Android Full support 18 | Firefox for Android Full support 14 | Opera Android Full support Так | Safari on iOS Full support 3 | Samsung Internet Full support 1.0 |
mozcurrentsampleoffset
|
Chrome No support Ні | Edge No support Ні | Firefox Full support 3.5 | Internet Explorer No support Ні | Opera No support Ні | Safari No support Ні | WebView Android No support Ні | Chrome Android No support Ні | Firefox for Android Full support 4 | Opera Android No support Ні | Safari on iOS No support Ні | Samsung Internet No support Ні |
muted
|
Chrome Сумісність невідома; будь ласка, оновіть. ? | Edge Full support 18 | Firefox Full support 11 | Internet Explorer Сумісність невідома; будь ласка, оновіть. ? | Opera Сумісність невідома; будь ласка, оновіть. ? | Safari Сумісність невідома; будь ласка, оновіть. ? | WebView Android Сумісність невідома; будь ласка, оновіть. ? | Chrome Android Сумісність невідома; будь ласка, оновіть. ? | Firefox for Android Full support 14 | Opera Android Сумісність невідома; будь ласка, оновіть. ? | Safari on iOS Сумісність невідома; будь ласка, оновіть. ? | Samsung Internet Сумісність невідома; будь ласка, оновіть. ? |
played
|
Chrome Full support 49 | Edge Full support 14 | Firefox Full support 15 | Internet Explorer Full support 11 | Opera Full support 46 | Safari Full support 9.1 | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox for Android Full support 15 | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Full support 5.0 |
preload
|
Chrome Full support 3 | Edge Full support 12 | Firefox Full support 4 | Internet Explorer Full support 9 | Opera Full support 15 | Safari Full support 3.1 | WebView Android Full support 3 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 14 | Safari on iOS Full support 3 | Samsung Internet Full support 1.0 |
src
|
Chrome Full support 3 | Edge Full support 12 | Firefox Full support 3.5 | Internet Explorer Full support 9 | Opera Full support 10.5 | Safari Full support 3.1 | WebView Android Full support 3 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support Так | Safari on iOS Full support 3 | Samsung Internet Full support 1.0 |
volume
|
Chrome Сумісність невідома; будь ласка, оновіть. ? | Edge Full support 18 | Firefox Сумісність невідома; будь ласка, оновіть. ? | Internet Explorer Сумісність невідома; будь ласка, оновіть. ? | Opera Сумісність невідома; будь ласка, оновіть. ? | Safari Сумісність невідома; будь ласка, оновіть. ? | WebView Android Сумісність невідома; будь ласка, оновіть. ? | Chrome Android Сумісність невідома; будь ласка, оновіть. ? | Firefox for Android Сумісність невідома; будь ласка, оновіть. ? | Opera Android Full support Так | Safari on iOS Full support Так | Samsung Internet Сумісність невідома; будь ласка, оновіть. ? |