Тег <audio>

Тег <audio> (укр. – “аудіо”) в HTML використовується для вбудовування аудіофайлів на веб-сторінку. Цей тег дозволяє користувачам відтворювати звук без необхідності завантажувати додаткові плагіни, забезпечуючи зручну підтримку аудіоконтенту у сучасних браузерах.

Атрибути

Специфічні атрибути

Тег <audio> має кілька специфічних атрибутів:

  • src — шлях до аудіофайлу. Якщо використовується елемент <source>, атрибут src можна не вказувати. Наприклад:
<audio src="audio-file.mp3" controls></audio>
  • controls — додає стандартний інтерфейс керування відтворенням аудіо (пуск, пауза, регулювання гучності). Наприклад:
<audio controls>
    <source src="audio-file.mp3" type="audio/mp3">
</audio>
  • autoplay — автоматично відтворює аудіо при завантаженні сторінки. Наприклад:
<audio src="audio-file.mp3" autoplay></audio>
  • loop — відтворює аудіофайл у циклі (повторюється автоматично після завершення). Наприклад:
<audio src="audio-file.mp3" loop controls></audio>
  • muted — вмикає беззвучний режим аудіофайлу за замовчуванням. Наприклад:
<audio src="audio-file.mp3" muted controls></audio>
  • preload — вказує, як браузер має завантажувати аудіофайл:
    • none — не завантажувати файл, поки користувач не розпочне відтворення.
    • metadata — завантажити лише метадані (тривалість, розмір).
    • auto — завантажити весь файл (за замовчуванням).

Наприклад:

<audio src="audio-file.mp3" preload="metadata" controls></audio>

Глобальні атрибути

Тег <audio> підтримує всі глобальні атрибути HTML, включаючи:

  • id — унікальний ідентифікатор для елемента. Наприклад:
<audio id="background-audio" controls>
    <source src="audio-file.mp3" type="audio/mp3">
</audio>
  • class — задає клас для застосування стилів через CSS. Наприклад:
<audio class="audio-player" controls>
    <source src="audio-file.mp3" type="audio/mp3">
</audio>
  • style — дозволяє додавати інлайн-стилі до елемента. Наприклад:
<audio style="width: 300px;" controls>
    <source src="audio-file.mp3" type="audio/mp3">
</audio>
  • title — текст підказки для елемента. Наприклад:
<audio title="Натисніть для прослуховування" controls>
    <source src="audio-file.mp3" type="audio/mp3">
</audio>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання тегу <audio></title>
</head>
<body>
    <h1>Приклад аудіофайлу на сторінці</h1>

    <p>Нижче представлено аудіофайл, який можна відтворити за допомогою стандартного плеєра:</p>
    <audio controls>
        <source src="audio-file.mp3" type="audio/mp3">
        Ваш браузер не підтримує аудіо. <a href="audio-file.mp3">Завантажте файл</a>.
    </audio>
</body>
</html>

Додаткові моменти

  • Тег <audio> може містити один або кілька елементів <source>, що дозволяє вказати кілька форматів файлів для кращої підтримки у різних браузерах. Браузер вибере перший підтримуваний формат.
  • Формати, що найчастіше використовуються для <audio>:
    • MP3 (audio/mpeg)
    • Ogg (audio/ogg)
    • WAV (audio/wav)
  • Використовуйте атрибут controls, щоб надати користувачам можливість керувати відтворенням (пауза, регулювання гучності).
  • Атрибут autoplay може бути заблокований у багатьох браузерах, якщо звук не вимкнено (muted). Це зроблено для покращення користувацького досвіду.
  • Для підвищення доступності додавайте текстовий альтернативний опис, щоб користувачі з обмеженими можливостями розуміли призначення аудіо.