HTML5. Аудіо

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Аудіо в Інтернеті

До появи HTML5 аудіофайли можна було відтворювати лише у веб-браузері за допомогою плагіна (на зразок flash).

HTML5 елемент <audio> вказує стандартний спосіб вбудовування аудіо в веб-сторінку.


Підтримка браузерами

Цифри в таблиці визначають першу версію браузера, яка повністю підтримує елемент <audio>.

Елемент
<audio> 4.0 9.0 3.5 4.0 10.5

HTML елемент <audio>

Щоб відтворити аудіофайл у HTML, використовуйте елемент <audio>:

Приклад:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Ваш веб-браузер не підтримує елемент audio.
</audio>
Спробуйте самі »

Результат:


HTML Аудіо - Як це працює

Атрибут controls додає елементи керування звуком, такі як відтворення, пауза та гучність.

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

Текст між <audio> і </audio> тегами відображатиметься лише в браузерах, які не підтримують елемент <audio>.


HTML Аудіо - Підтримка браузерами

В HTML5 є три підтримуваних аудіоформату: MP3, WAV і OGG.

Підтримка браузерами різних форматів:

Браузер MP3 WAV OGG
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

HTML Аудіо - Типи медіа

Формат файлу Тип медіа
MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav

HTML Аудіо - Методи, властивості та події

HTML5 визначає методи, властивості та події DOM для елементу <audio>.

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

Є також події DOM, які можуть сповіщати вас, коли звук починає відтворюватися, призупиняється і т.д..

Для повної довідки на DOM перейдіть до HTML5 Аудіо/Відео DOM Довідника.


HTML5 Аудіо теги

Тег Опис
<audio> Визначає звуковий контент
<source> Визначає безліч мультимедійних ресурсів для елементів медіа, наприклад <video> та <audio>


warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.