Вставка аудіо: <audio>

3.1 Основи тега <audio>

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

Найпростіший приклад

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

    
      <audio src="audiofile.mp3" controls></audio>
    
  

Приклад з декількома джерелами

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

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        Your browser does not support the audio element.
      </audio>
    
  

Атрибути тега <audio>

• src: вказує шлях до аудіофайлу.
• controls: відображає елементи керування відтворенням
• autoplay: автоматично відтворює аудіо при завантаженні сторінки
• loop: повторює відтворення аудіо після завершення
• muted: вимикає звук при завантаженні
• preload: вказує, як браузер повинен завантажувати аудіо. Можливі значення: none, metadata, auto

3.2 Приклади використання атрибутів

Атрибут controls

Атрибут controls додає стандартні елементи керування відтворенням аудіо, такі як кнопки "Play", "Pause" і регулятор гучності. Цей атрибут робить аудіо-елемент більш інтерактивним і зручним для користувачів.

Приклад:

    
      <audio src="audiofile.mp3" controls></audio>
    
  

Атрибут autoplay

Атрибут autoplay змушує аудіофайл автоматично починати відтворення одразу після завантаження сторінки. Використовувати цей атрибут потрібно обережно, оскільки несподіване відтворення аудіо може дратувати користувачів.

Приклад:

    
      <audio src="audiofile.mp3" autoplay></audio>
    
  

Атрибут loop

Атрибут loop вказує, що аудіофайл повинен відтворюватися в безкінечному циклі. Це корисно для фонової музики або звукових ефектів, які повинні повторюватися.

Приклад:

    
      <audio src="audiofile.mp3" autoplay loop></audio>
    
  

Атрибут muted

Атрибут muted вимикає звук аудіофайлу при завантаженні. Це може бути корисно, якщо ви хочете, щоб аудіо відтворювалося без звуку за замовчуванням, і користувач міг увімкнути звук за необхідністю.

    
      <audio src="audiofile.mp3" muted></audio>
    
  

Атрибут preload

Атрибут preload вказує браузеру, як він повинен завантажувати аудіофайл при завантаженні сторінки. Він може приймати одне із трьох значень:

• none: браузер не повинен попередньо завантажувати аудіо
• metadata: браузер повинен завантажувати тільки метадані (тривалість, розміри тощо)
• auto: браузер повинен повністю завантажувати аудіо, коли сторінка завантажується

    
      <audio src="audiofile.mp3" preload="auto"></audio>
    
  

3.3 Підтримувані формати аудіо

Для забезпечення кросбраузерної сумісності рекомендується використовувати кілька форматів аудіо. Найбільш поширені формати включають MP3, OGG і WAV. Розглянемо їх детальніше.

Формат MP3

MP3 (MPEG-1 Audio Layer III) — один із найпопулярніших форматів аудіо. Він підтримується більшістю браузерів і пристроїв. MP3 використовує стиснення з втратами, що дозволяє зменшити розмір файлу зберігаючи досить високу якість звуку.

Приклад:

    
      <audio src="audiofile.mp3" type="audio/mpeg"></audio>
    
  

Формат OGG

OGG (Ogg Vorbis) — відкритий формат стиснення аудіо з втратами, який підтримується більшістю сучасних браузерів. Цей формат забезпечує хорошу якість звуку і часто використовується як альтернатива MP3.

Приклад:

    
      <audio src="audiofile.ogg" type="audio/ogg"></audio>
    
  

Формат WAV

WAV (Waveform Audio File Format) — формат аудіо без стиснення, який забезпечує високу якість звуку. Проте файли WAV мають більший розмір порівняно з MP3 і OGG, тому вони менш поширені для використання в вебі.

Приклад:

    
      <audio src="audiofile.wav" type="audio/wav"></audio>
    
  

3.4 Сумісність форматів

Не всі браузери підтримують однакові формати аудіо. Для забезпечення кросбраузерної сумісності рекомендується використовувати кілька форматів аудіо, таких як MP3, OGG і WAV.

Приклад із підтримкою кількох форматів:

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Your browser does not support the audio element.
      </audio>
    
  

Доступність

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

Приклад забезпечення доступності:

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Your browser does not support the audio element.
        You can download the audio file <a href="audiofile.mp3">here</a>.
      </audio>
    
  

Розуміння можливостей тега <audio> і його API допомагає створювати більш інтерактивні та доступні вебсторінки.