audio

audio - HTML елемент для вбудування аудіо контенту у веб-сторінку і його відтворення.

Синтаксис:

<audio src="URL адреса" controls  autoplay="true" loop="true" muted="true" preload="auto" crossorigin="anonymous"></audio>

<audio controls  autoplay="true" loop="true" muted="true" preload="auto" crossorigin="anonymous">
<source src="URL адреса1"></source>
<source src="URL адреса2"></source>
<track src="URL адреса VTT" kind="назва типу" label="назва VTT" srclang="мова BCP 47" default></track>
</audio>

var audio = new Audio(src);

Параметри:

src - URL-адреса аудіо файлу.

autoplay - логічний атрибут який вказає чи буде звук автоматично відтворюватися. Не обов'язково вказувати.

controls - якщо даний атрибут вказаний то браузер відображає елементи керування, щоб користувач мав змогу контролювати відтворенням аудіо. Не обов'язково вказувати.

loop - логічний атрибут який вказує чи відтворювати знову звук після досягнення кінця звуку. Не обов'язково вказувати.

muted - логічний атрибут який вказує на те чи виключити звук. Не обов'язково вказувати.

preload - вказує як повенен завантажуватися аудіо файл вказаний в атрибуті src.

none - аудіо файл не повинен попередньо завантажуватися.
metadata - завантажити лише аудіо метадані (тривалість відтворення, розмір).
auto - аудіо файл може бути завантажений, навіть якщо користувач не очікує його використання.

crossorigin - чи слід використовувати CORS при завантаженні медіа даних.

anonymous - перед завантаженням медіа даних виконується cross-origin запит (Origin в HTTP header). Але при цьому не передаються параметри доступу (ні cookie, ні сертифікат X.509, ні логін/пароль для базової аутентифікації по HTTP). У відповіді сервера повинен бути присутнім заголовок "Access-Control-Allow-Origin" інакше використання медіа даних не відбудиться.
use-credentials - перед завантаженням медіа даних виконується cross-origin запит ( Origin:HTTP header) із зазначенням параметрів доступу (у вигляді cookie, сертифіката або пари логін/пароль). У відповіді сервера повинен бути присутнім заголовок "Access-Control-Allow-Origin", інакше використання завантаження медіа даних не відбудиться.

Якщо даний атрибут не заданий тоді CORS при завантаженні медіа даних не використовується (немає заголовка Origin в HTTP header).

Опис:

audio HTML елемент для відтворення аудіо.

Також замість атрибута src можна використовувати елемент

<source>

, щоб вказати декілька типів файлів (mp3, ogg, wav).

Браузери не всі підтримують однакові формати аудіо тому рекомендовано вказати декілька джерел всередині вкладеного елемента source, а браузер потім використає який підтримує.

HTML5 підтримує такі аудіо формати: MP3, WAV, WEBM, MP4 та OGG.

У JavaScript елемент audio успадковує усі методи і властивості для роботи з медіа у об'єкта HTMLMediaElement, а також стандартні методи і властивості з об'єкта Element.

Також елемент audio використовується Web Audio як джерело отримання звуку.

Приклад:

<audio src="/dani/test.ogg" controls></audio>

Підключення файлів різного типу:

<audio controls>
<source src="/dani/test.mp3"></source>
<source src="/dani/test.ogg"></source>
</audio>

Приклад відтворення звуку в елементі audio за допомогою JavaScript:

<audio id="player" src="/dani/test.ogg"></audio>

var player=document.getElementById('player');
player.play();
alert(player);

var player=new Audio('/dani/test2.mp3');
player.play();

var player=new Audio();
player.src='/dani/test.ogg';
player.play();