<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-автентифікації. Якщо сервер не надає облікові дані для сайту походження (не задаючи заголовок HTTP Access-Control-Allow-Origin:), то ресурс буде ославленим, і його використання буде обмеженим.

use-credentials

Надсилає запит до іншого походження з обліковими даними. Іншими словами, він надсилає HTTP-заголовок Origin: з реп'яшком, сертифікатом X.509 або HTTP-автентифікацією. Якщо сервер не надає облікові дані для сайту походження (не задаючи заголовок HTTP Access-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 та API HTMLMediaElement.
  • Щоб дозволити точне керування вмістом-аудіо, об'єкти 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>

Приклади

Базове застосування

Наступний приклад демонструє просте застосування елемента <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

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
audio
Chrome Full support 3
Edge Full support 12
Firefox Full support 3.5
footnote
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
footnote
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
footnote
Edge Full support 12
Firefox Full support 4
Internet Explorer Full support 9
Opera Full support 15
footnote
Safari Full support 3.1
WebView Android Full support 3
footnote
Chrome Android Full support 18
footnote
Firefox for Android Full support 4
Opera Android Full support 14
footnote
Safari on iOS Full support 3
Samsung Internet Full support 1.0
footnote
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 Сумісність невідома; будь ласка, оновіть. ?

Дивіться також