Тег <audio>

Тег <audio> отвечает за вставку аудио-файлов на сайт. Этот тег парный и имеет обязательный закрывающий тег </audio>. Вместе с тегом <audio> используют атрибуты, которые позволяют управлять и настраивать аудиозапись на сайте. Внутри тега <audio> используется тег <source> с атрибутом src, который задает путь к аудио-файлу. Выглядит это так:

  <audio>
    <source src="трек.ogg">
    <source src="трек.mp3">
  </audio>
             

В теге <source> желательно указать несколько форматов одной и той же аудиозаписи (mp3, wav и так далее), так как многие браузеры не поддерживают все форматы аудио. Тег <audio> поддерживается почти во всех браузерах, единственное, в них может отличаться внешний вид проигрывателя, который воспроизводит аудио, но большинство элементов управления одинаковы.

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

controls – добавляет проигрыватель (панель управления аудиофайлом).

autoplay – авто проигрыватель, запускает аудио-файл сразу после загрузки страницы.

src - задает путь к аудио-файлу.

loop – зацикливает воспроизведение аудиозаписи (после окончания, воспроизводит заново).

preload - служит для загрузки аудио-файла вместе с загрузкой веб-страницы.

Пример:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Тег AUDIO</title>
    <meta charset="utf-8">
  </head>
  <body>
    <p>Dj Clarion</p>
    <audio controls>
      <source src="audio/dj-clarion.ogg" type="audio/ogg; codecs=vorbis">
      <source src="audio/dj-clarion.mp3" type="audio/mpeg">
      Ваш браузер не поддерживает тег audio. 
      <a href="audio/dj-clarion.mp3">Скачайть трек</a>.
    </audio>
  </body>
</html> 
            
Смотреть пример