HTML-тег `audio`

Откройте для себя основы работы с HTMLaudioтег

Вaudioпозволяет вставлять аудиоконтент на ваши HTML-страницы.

Этот элемент может передавать аудио, возможно, используя микрофон черезgetUserMedia(), или он может воспроизводить аудиоисточник, на который вы ссылаетесь с помощьюsrcатрибут:

<audio src="file.mp3" />

По умолчанию браузер не показывает никаких элементов управления для этого элемента. Это означает, что звук будет воспроизводиться только в том случае, если установлено автоматическое воспроизведение (подробнее об этом позже), и пользователь не может видеть, как его остановить, или контролировать громкость, или перемещаться по дорожке.

Чтобы показать встроенные элементы управления, вы можете добавитьcontrolsатрибут:

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

Элементы управления могут иметь собственный скин.

Вы можете указать MIME-тип аудиофайла, используяtypeатрибут. Если не установлен, браузер попытается определить его автоматически:

<audio src="file.mp3" controls type="audio/mpeg" />

По умолчанию аудиофайл не воспроизводится автоматически. Добавитьautoplayатрибут для автоматического воспроизведения звука:

<audio src="file.mp3" controls autoplay />

Примечание: мобильные браузеры не поддерживают автовоспроизведение.

ВloopАтрибут перезапускает воспроизведение звука в 0:00, если он установлен, в противном случае, если он не присутствует, звук останавливается в конце файла:

<audio src="file.mp3" controls autoplay loop />

Вы также можете воспроизвести аудиофайл с отключенным звуком, используяmutedатрибут (не совсем уверен, в чем польза от этого):

<audio src="file.mp3" controls autoplay loop muted />

CORS

Аудио подлежитCORSи если вы не разрешите это на стороне сервера, аудиофайл не может воспроизводиться из разных источников.

Предварительная загрузка аудио

Если вы не установитеautoplay, в спецификации говорится, что браузеры будут загружать только метаданные аудио (например, для определения длины), но не будут загружать сам звук.

Вы можете принудительно загрузить аудио, используя

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

Отображение контента, еслиaudioне поддерживается

Вaudioтегочень хорошо поддерживается, вплоть до IE9, поэтому в настоящее время не должно быть необходимости в тексте-заполнителе, но у нас есть эта опция. Вы просто добавляете закрывающий тег и вставляете текст между открывающим и закрывающим тегами:

<audio src="song.mp3">Audio tag not supported</audio>

Добавление собственных элементов управления

Вместо автовоспроизведения звука в фоновом режиме вы можете запросить отображение в браузере набора элементов управления, позволяющих пользователю воспроизводить звук, когда он хочет, иметь некоторую индикацию длины, установить громкость и позволить им перемещаться по дорожке:

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

Вот как это выглядит в Chrome:

Audio element

Вы можете стилизовать элементы управления с помощью CSS, хотя это выходит за рамки этого введения.

Добавление нескольких источников

Браузеры могут использовать один аудиокодек, но не другой. Возможно, вы хотите использовать более новый стандарт, который вдвое сокращает размер файла, но вы все равно хотите поддерживать старые браузеры.

Вы делаете это с помощьюsourceтег:

<audio controls>
 <source src="song.opus" type="audio/ogg; codecs=opus"/>
 <source src="song.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="song.mp3" type="audio/mpeg"/>
</audio>

Работа со звуковыми событиями

Мы можем слушать события по каждомуaudioэлемент с использованием JavaScript, для создания интересных проектов и интерфейсов. Есть много разных событий, с которыми можно поиграть.

Вplayсобытие запускается, когда начинается воспроизведение звука:

document.querySelector('video').addEventListener('play', () => {
  alert('Audio is playing!!!')
})

Вы также можете напрямую добавить это событие (как и другие), используяon<event>атрибут непосредственно в элементе HTML:

<audio src="song.mp3" controls onplay="playing()" />
const playing = () => {
  alert('Audio is playing!!!')
}

Вот несколько событий, которые вы можете прослушать:

  • playзвук начал играть
  • pauseзвук был приостановлен
  • endedвоспроизведение звука завершено
  • timeupdateпользователь взаимодействовал с временной шкалой воспроизведения и двигался вперед / назад
  • volumechangeпользователь изменил громкость

Есть еще много событий, связанных с загрузкой звука, ивы можете найти полный список на MDN.

Скачать мою бесплатнуюСправочник по HTML


Дополнительные руководства по HTML: