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

Події

Примітки щодо застосування

Не всі браузери підтримують одній й ті самі типи файлів та кодеки аудіо; можна надати декілька джерел у вкладених елементах <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>

Джерелом аудіо може бути заданий будь-який валідний URL, наприклад, URL HTTP(S) і URL даних. Використовуючи URL HTTP(S), слід пам'ятати, що логіка кешування в браузері впливатиме на те, наскільки часто файл буде запитаний із сервера. URL даних вбудовують дані аудіо безпосередньо в HTML, що може бути корисно для невеликих аудіофайлів, але не рекомендується для більших файлів, адже це збільшує розмір файлу HTML. Також можна використати API Web Audio – для безпосереднього створення та обробки потоків аудіо з коду JavaScript, а не потокового відтворення наявних файлів аудіо. У JavaScript можна присвоїти srcObject об'єкт MediaStream. Це широко застосовується для живих аудіопотоків та обробки звуку в реальному часі.

const audioElement = document.querySelector("audio");
navigator.mediaDevices
  .getUserMedia({ audio: true })
  .then((stream) => {
    audioElement.srcObject = stream;
  })
  .catch((error) => {
    console.error("Error accessing the microphone", error);
  });

Зверніть увагу на те, що джерела MediaStream мають обмеження: їх не можна перемотувати, а також вони підтримують обмежений набір кодеків.

У нас є великий і детальний посібник щодо типів медіафайлів та кодеків аудіо, які можна використовувати в цих типах. Також доступний посібник щодо кодеків, які підтримуються для відео.

Інші примітки щодо застосування:

• Якщо не задати атрибут controls, плеєр аудіо не буде містити типові елементи керування браузера. Однак, можна створити власні елементи керування, за допомогою JavaScript та API HTMLMediaElement.
• Щоб дозволити точне керування вмістом-аудіо, об'єкти HTMLMediaElement запускають чимало різних подій. Це також надає спосіб відстежувати процес завантаження аудіо, щоб можна було виявити помилки або визначити, коли вже достатньо даних для початку відтворення або обробки.
• Елементи <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>

Технічний підсумок

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

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

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

• Технології медіа Вебу

  • Формати контейнерів медіа (типи файлів)
  • Посібник з кодеків аудіо, що вживаються у Вебі

• API вебаудіо

• HTMLAudioElement

• <source>

• <video>

• Зона навчання – Аудіо та відео вміст

• Кросбраузерні основи аудіо