Html audio: — элемент добавления аудио на страницу — HTML

⚡️ HTML и CSS с примерами кода

Тег <audio> (от англ. audio — звук, аудио) добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задаётся через атрибут src или вложенный элемент <source>.

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

Для универсального воспроизведения в браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через элемент <source>.

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

• area
• audio
• img
• figcaption
• figure
• map
• track
• video
• embed
• iframe
• object
• param
• picture
• source

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

Can I Use audio? Data on support for the audio feature across the major browsers from caniuse. com.

Поддержка MP3 аудио-кодека:

Can I Use mp3? Data on support for the mp3 feature across the major browsers from caniuse.com.

Поддержка WAV аудио-кодека:

Can I Use wav? Data on support for the wav feature across the major browsers from caniuse.com.

Поддержка FLAC аудио-кодека:

Can I Use flac? Data on support for the flac feature across the major browsers from caniuse.com.

Поддержка AAC аудио-кодека:

Поддержка Ogg Vorbis аудио-кодека:

Can I Use ogg-vorbis? Data on support for the ogg-vorbis feature across the major browsers from caniuse. com.

Синтаксис

1
2
3
4

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

Закрывающий тег обязателен.

Атрибуты

autoplay

Звук начинает играть сразу после загрузки страницы.

controls

Добавляет панель управления к аудиофайлу.

loop

Повторяет воспроизведение звука с начала после его завершения.

muted

Отключает звук при воспроизведении музыки.

preload

Управляет предварительной загрузкой аудио данных.

src

Указывает путь к воспроизводимому файлу.

volume

Громкость воспроизведения, в диапазоне от 0.0 (самая тихая) до 1.0 (самая громкая).

autoplay

При наличии этого атрибута аудио начинает воспроизводиться автоматически после загрузки страницы. Атрибут autoplay отменяет действие атрибута preload.

Синтаксис

<audio autoplay="autoplay"></audio>

Значения

В качестве значения указывается autoplay, также допустимо вообще не указывать никакое значение.

Значение по умолчанию

По умолчанию этот атрибут выключен.

controls

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

Синтаксис

<audio controls="controls"></audio>

Значения

В качестве значения указывается controls, также допустимо писать атрибут без значения.

Значение по умолчанию

По умолчанию этот атрибут выключен.

loop

Зацикливает воспроизведение аудио, чтобы оно бесконечно повторялось после завершения.

Синтаксис

<audio loop="loop"></audio>

В качестве значения указывается loop, также допустимо писать атрибут без значения.

Значение по умолчанию

По умолчанию этот атрибут выключен.

muted

Отключает звук при воспроизведении музыки.

Синтаксис

<audio muted="muted"></audio>

Значения

В качестве значения указывается muted, также допустимо вообще не указывать никакое значение.

Значение по умолчанию

По умолчанию этот атрибут выключен.

preload

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

Синтаксис

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

Значения

none

указывает, что аудио не должно предварительно загружаться

metadata

указывает, что загрузить нужно только метаданные;

auto

указывает на то, что весь звуковой файл может быть загружен, даже если пользователь не будет использовать его;

Значение по умолчанию

Если он не указан, это будет определенное браузером значение. Спецификация советует использование аттрибута metadata.

Примечания

• Аттрибут autoplay имеет приоритет над preload. Если autoplay указан, браузер, должен начать загрузку для воспроизведения.
• Браузер не принуждается спецификацией следовать значению этого аттрибута; это просто подсказка.

src

Указывает путь к воспроизводимому аудиофайлу. Для этой же цели также можно использовать элемент <source>.

Синтаксис

<audio src="<адрес>"></audio>

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Спецификации

• WHATWG HTML Living Standard
• HTML5

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>audio</title>
  </head>
  <body>
    <p>Александр Клименков - Четырнадцать</p>
    <audio controls>
      <source
        src="audio/music.ogg"
        type="audio/ogg; codecs=vorbis"
      />
      <source src="audio/music.
  mp3" type="audio/mpeg" />
      Тег audio не поддерживается вашим браузером.
      <a href="audio/music.mp3">Скачайте музыку</a>.
    </audio>
  </body>
</html>

Базовое использование:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!-- Simple audio playback -->
<audio
  src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
  autoplay
>
  Ваш браузер не поддерживает <code>audio</code> элемент.
</audio>
<!-- Audio playback with captions -->
<audio src="foo.ogg">
  <track
    kind="captions"
    src="foo.en.vtt"
    srclang="en"
    label="English"
  />
  <track
    kind="captions"
    src="foo.sv.vtt"
    srclang="sv"
    label="Svenska"
  />
</audio>

Аудио элемент с элементом источника:

1
2
3
4

<audio controls="controls">
  Ваш браузер не поддерживает <code>audio</code> элемент. 
  <source src="foo.wav" type="audio/wav" />
</audio>

Ссылки

• Тег <audio> ^{MDN (рус.)}

Освоение HTML5 тега audio / Хабр

Время на прочтение 3 мин

HTML *

Перевод

Автор оригинала: Jean-Baptiste Jung

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

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

---

Хотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт.

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

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

 поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого.  Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.
<audio controls> 
  <source src="sound.ogg"> 
  <source src="sound.mp3"> 
</audio>

<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
</audio>

? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег .
<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound. mp3" type="audio/mp3" >
  Ваш браузер не пожжерживает тег audio!
</audio>

<audio src="sound.mp3"></audio>
<div>
	<button>Воспроизведение</button>
	<button>Пауза</button>
	<button>Громкость +</button>
	<button>Громкость -</button>
</div> 

• html5
• audio
• тег audio

• HTML

Всего голосов 51: ↑30 и ↓21 +9

Комментарии 19

Максим Ткачук @makzimko

Пользователь

HTML-тегов | SamanthaMing.com

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

Атрибуты

элементы управления

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

autoplay

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

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

петля

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

preload

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Полный список событий можно найти на MDN

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

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

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

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

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

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

MDN Браузерная совместимость

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

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

Ресурсы

• Веб-документы MDN: HTML аудио
• w3schools: HTML аудио
• w3docs: HTML аудио
• TutorialRepublic: HTML аудио
• Flavioc Тег аудио HTML opesL
• Аудио — Атрибут предварительной загрузки
• w3schools: аудиоатрибут HTML
• HTML | аудио предварительная загрузка Атрибут
• Smashing Magazine: предварительная загрузка: для чего она нужна?
• Стандарт HTML

html5-audio · Темы GitHub · GitHub

Вот 193 публичных репозитория соответствует этой теме.

видеоjs / видео.js

золотой огонь / Howler.js

медиаэлемент / медиаэлемент

хлопок / хлопок

серверная часть / амплитудаjs

ИонДен / ион.звук

вода / вода

openplayerjs / openplayerjs

хвианна / audioMotion.

Биллоркатт / i_dropped_my_phone_the_screen_cracked

Воронянский / soundcloud-audio.js

Э-Кюршнер / использовать аудиоплеер

влитейс / влайт

Биллоркатт / треснувший

лгийом / музыкальная папка-плеер

арируссо / d3-аудио-спектр

Чадполсон / реагирующий кассетный плеер

майкхелланд / омг-музыка

лайкев / html5-аудио-плеер

истребители дождя / АудиоПик

Улучшить эту страницу

Добавьте описание, изображение и ссылки на html5-аудио страницу темы, чтобы разработчикам было легче узнать о ней.