HTML Аудіо
HTML Елемент <audio> використовується для відтворення аудіофайлу на вебсторінці.
Аудіо в Інтернеті
До появи стандарту 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 |
|---|---|---|---|
| Edge/IE | 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> |
