Що робить елемент <audio>?
Елемент <audio> використовується для відтворення звуку на веб-сторінці: музики, подкастів, ефектів, дикторських записів тощо.
Він працює аналогічно до <video>, але без відеопотоку: браузер створює аудіоплеєр із кнопками «відтворення / пауза», гучністю і таймером.
1. Найпростіший приклад
<audio src="music.mp3" controls></audio>Що тут:
src="music.mp3": шлях до аудіофайлу;controls: відображає стандартну панель керування (плей, пауза, гучність).
Результат: браузер вбудує аудіоплеєр, і користувач зможе слухати звук прямо на сторінці.
2. Рекомендований спосіб: через <source>
Щоб підтримувати різні формати (MP3, OGG, WAV), можна вказати кілька <source>: браузер вибере підхожий:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<p>Ваш браузер не підтримує елемент audio.</p>
</audio>Якщо браузер не підтримує жодного формату, він покаже текст з <p>.
3. Основні атрибути <audio>
| Атрибут | Призначення | Приклад |
|---|---|---|
src | Шлях до аудіофайлу (якщо не використовуються <source>) | src="sound.mp3" |
controls | Показує панель керування | controls |
autoplay | Запускає аудіо автоматично під час завантаження сторінки (зазвичай потребує muted) | autoplay |
loop | Повторює відтворення по колу | loop |
muted | Вимикає звук типово | muted |
preload | Керує попереднім завантаженням (none, metadata, auto) | preload="metadata" |
4. Як працює preload
| Значення | Поведінка |
|---|---|
none | Аудіо не завантажується, поки користувач не натисне play |
metadata | Завантажується лише інформація (тривалість, назва, теги) |
auto | Аудіо може повністю завантажитися заздалегідь |
Приклад:
<audio src="podcast.mp3" preload="metadata" controls></audio>5. Приклад з кількома атрибутами
<audio controls autoplay loop muted preload="auto">
<source src="track.mp3" type="audio/mpeg">
<source src="track.ogg" type="audio/ogg">
Ваш браузер не підтримує відтворення аудіо.
</audio>Поведінка:
- почне грати автоматично,
- без звуку (інакше браузери блокують автоплей),
- повторюється по колу,
- завантажується заздалегідь.
6. Підтримувані формати
| Формат | MIME-тип | Підтримка |
|---|---|---|
.mp3 | audio/mpeg | Усі браузери |
.ogg | audio/ogg | Firefox, Chrome, Opera |
.wav | audio/wav | Усі сучасні браузери (великий розмір) |
Підсумок:
| Елемент | <audio> |
|---|---|
| Призначення | Відтворення звуку прямо в браузері |
| Джерело | Через src або кілька <source> |
| Основні атрибути | controls, autoplay, loop, muted, preload |
| Переваги | Без плагінів, працює нативно в усіх браузерах |
| Підтримувані формати | MP3, OGG, WAV |
Простими словами:
<audio> - це вбудований плеєр для звуку.
Ти вказуєш файл через src або <source>,
а браузер сам надає кнопки відтворення:
без плагінів, без зовнішніх сервісів.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.