HTML тег <audio>

Очень просто добавлять и воспроизводить аудиофайлы на вашем сайте. Больше не нужно возиться со встраиванием Flash-файла или чем-то еще по старому 😂 Упростите и двигайтесь вперед с помощью тега HTML5 <audio>, ура 🎉

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

Атрибуты

controls

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

<audio controls></audio>
<!-- OR -->
<audio controls="true"></audio>

Примечание. Если он отсутствует, аудиофайл не будет отображаться. Как правило, вы всегда должны включать это. Если вы не хотите создать свою собственную панель управления с помощью JavaScript

autoplay

Это логический атрибут, который автоматически воспроизводит аудиофайл после загрузки страницы.

<audio autoplay></audio>
<!-- OR -->
<audio autoplay="true"></audio>

Примечание: эта функция может не работать из-за изменения политики автоматического воспроизведения Chrome.

muted

Это логический атрибут, который указывает, будет ли звук изначально отключен. По умолчанию - false или без звука.

<audio muted></audio>
<!-- OR -->
<audio muted="true"></audio>

loop

Это логический атрибут, который указывает, будет ли аудиофайл непрерывно повторяться с начала после завершения воспроизведения.

<audio loop></audio>
<!-- OR -->
<audio loop="true"></audio>

preload

Этот атрибут используется для указания способа загрузки звука при загрузке страницы. Это ваш способ сообщить браузеру, должен ли он загружать и кэшировать аудиофайл или нет.

<audio preload="none"></audio>

Браузер не должен загружать звук при загрузке страницы. Полезно, если вы хотите минимизировать ненужный трафик и когда не ожидается, что пользователь сразу же воспользуется медиаресурсом.

<audio preload="metadata"></audio>

Браузер должен загружать метаданные только при загрузке страницы. Опять же, это используется, когда пользователю не нужен медиаресурс сразу. Метаданные, которые вы можете получить, могут включать длину аудио, список дорожек, размеры и т. Д.

<audio preload="auto"></audio>

Браузер должен загружать весь звук при загрузке страницы.

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

Единый источник звука

Вы можете установить <audio> с одним источником, используя атрибут src:

<audio controls src="sound.ogg">
  Your browser does not support the audio tag.
</audio>

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

<audio controls>
  <source src="sound.ogg" type="audio/ogg" />
  Your browser does not support the audio tag.
</audio>

Несколько источников звука

ogg аудиофайлы имеют лучшее качество звука и меньший размер по сравнению с mp3 файлами. К сожалению, он поддерживается не всеми браузерами. К счастью, мы можем передать несколько источников в теге audio. Следовательно, делаю это так:

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

Он идет сверху вниз. Вот почему мы сначала указали ogg и добавляем текст по умолчанию, если браузер не поддерживает тег audio.

Вы можете просмотреть дополнительную поддержку аудио на w3schools

CSS-стили для аудиоэлементов

Вы не можете стилизовать отдельные компоненты аудиоплеера, такие как размер кнопок или значки, или стиль шрифта. Он примет значение по умолчанию для конкретного браузера. Но вы можете стилизовать внешний блок игрока.

/* Example: */
audio {
  display: /*...*/,
  border: /*...*/,
  padding: /*...*/,
  margin: /*...*/,
}

Аудио события JavaScript

Есть много событий, которые вы можете прослушать в аудиофайле. Например:

Событие Срабатывает, когдаplayКогда начинается воспроизведение звукаpauseКогда звук приостанавливаетсяendedКогда звук завершается

Вы можете найти полный список мероприятий на MDN.

Основное использование

Вы можете добавить слушателя событий следующим образом:

// 1. Select our audio tag
document.querySelector('audio')
  // 2. Attach our event listener
  .addEventListener('play', () => {
    // do something
  })

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

<audio onplay="doSomething()"></audio>
function doSomething() {
  // do something
}

По сути, синтаксис атрибутов событий выглядит следующим образом:

<element on[event name]="..."></element>

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

Поддержка превосходна для всех современных браузеров, включая Internet Explorer 9 и выше 👍

Совместимость с браузером MDN

Вклад сообщества

@ iamjaydeep1: Что такое автовоспроизведение и какие с ним были проблемы? Браузеры исторически плохо помогали пользователю управлять звуком. Когда пользователи открывают веб-страницу и слышат звук, которого они не ожидали или не хотели, у них плохой пользовательский опыт. Это неудовлетворительное взаимодействие с пользователем - проблема, которую мы пытаемся решить. Нежелательный шум - основная причина, по которой пользователи не хотят, чтобы их браузер автоматически воспроизводил контент. Чтобы преодолеть проблемы с автозапуском, в Chrome были внесены некоторые изменения в политику. перейдите по ссылке для получения более подробной информации. Какое решение? Простой звук не воспроизводится автоматически. вам необходимо взаимодействие с пользователем для воспроизведения звука, например, нажатие кнопки для воспроизведения или паузы.

@ MrBenJ5: Я создал библиотеку, которая позволяет вам делать аудиовизуализации из вашего аудиотега. Это тоже открытый исходный код: оцените! Audica.surge.sh

Ресурсы

Спасибо за прочтение ❤
Передайте привет! Instagram | Твиттер | SamanthaMing.com

HTML тег