HTML тег <audio>

Тег <audio> используется для добавления на веб-страницу аудиофайла. Так как не все браузеры поддерживают все аудиоформаты, то аудифайл кодируют с помощью специальных кодеков и добавляют файлы одновременно через тег <source>. Для указания вариаций одного и того же аудио файла может также использоваться атрибут src. Путь к аудиофайлу может содержать как абсолютный URL, так и относительный.

Синтаксис

Содержимое тега пишется между открывающим (<audio>) и закрывающим (</audio>) тегами.

<audio>
        <source src="URL" >
  	<source src="URL" >
</audio>

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <audio controls>
      <source src="/build/audios/jingle_bells.ogg" type="audio/ogg">
      <source src="/build/audios/audio.mp3" type="audio/mpeg">
    </audio>
    <p>Нажмите кнопку воспроизведения</p>
  </body>
</html>

Атрибуты

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

Когда используются атрибуты controls, autoplay, loop и muted, их значения могут быть опущены. Если атрибут указан, то по умолчанию данная функция считается включенной.

Атрибут Значение Описание
autoplay autoplay Проигрывает аудифайл автоматически после загрузки страницы.
controls controls Отображает панель управления (кнопка запуска, прокрутка, регулятор громкости). Eсли атрибут controls отсутствует, то аудиофайл не будет отображаться на странице.
loop loop Воспроизводит аудифайла с начала после его завершения.
muted muted Отключает звук при воспроизведении музыки
preload auto
metadata
none
Воспроизведение начнется после загрузки страницы указывает браузеру загрузить небольшую часть файла, чтобы определить его основные характеристики: (например, размер файла). Воспроизведение начнется только после щелчка мыши по соответствующей кнопке.
src URL Указывает путь к аудифайлу.

Тег <audio> также поддерживает глобальные атрибуты и атрибуты событий.

Поддержка браузера

4+ 9+ 3.5+ 4+ 10.5+




Похожие статьи