Тег | HTML справочник
Поддержка браузерами
| 12.0+ | 9.0+ | 3.5+ | 4.0+ | 10.5+ | 4.0+ |
Описание
HTML тег <audio> позволяет добавить на страницу аудиофайл. Некоторые браузеры не поддерживают аудиофайлы некоторых форматов, поэтому необходимо предоставить аудиофайл в нескольких форматах одновременно, для этого используются теги <source>, которые должны располагаться внутри элемента <audio>.
Любой текст внутри элемента <audio> будет отображен браузером в том случае, когда сам элемент или формат используемого аудиофайла не поддерживается браузером.
Примечание: при использовании атрибутов controls, autoplay и loop, можно не присваивать им значения.
Эти атрибуты являются атрибутами булева типа, то есть если атрибут указан, то данная функция считается включенной, если не указан — выключенной.
Атрибуты
- autoplay:
- Указывает, что воспроизведение аудиофайла должно начинаться автоматически, как только файл будет полностью загружен.
Значения для логического атрибута autoplay можно задавать следующими способами:
<audio autoplay> <audio autoplay="autoplay"> <audio autoplay="">
Пример » - controls:
- Отображает элементы управления воспроизведением, включающим в себя: запуск, паузу, полосу прокрутки и громкость звука. По умолчанию, при отсутствии атрибута, панель управления аудиофайлом отображена не будет.
<audio controls> <audio controls="controls"> <audio controls="">
Примечание: если у элемента <audio> отсутствует атрибут controls, то подключенный аудиофайл не будет отображаться на странице.
Пример »
- loop:
- Указывает, что воспроизведение будет начинаться сначала, каждый раз, после завершения (повтор воспроизведения).
<audio loop> <audio loop="loop"> <audio loop="">
Пример » - preload:
- Указывает, какие действия должен выполнять браузер, если для проигрывателя не указан атрибут autoplay. Он может принимать одно из следующих трех значений:
- auto — загрузка аудиофайла начнется после загрузки страницы
- metadata — сбор информации о аудиофайле: размер, первый кадр, список воспроизведения, длительность
- none — загрузка аудиофайла начнется только после щелчка мыши по кнопке воспроизведение
Примечание: при совместном использовании с атрибутом autoplay атрибут preload будет проигнорирован.
Пример » - src:
- Определяет путь к нужному аудиофайлу (путь может быть либо абсолютным либо относительным). Пример »
Тег <audio> так же поддерживает Глобальные атрибуты и События
Стиль по умолчанию
Нет.
Пример
<audio controls="controls"> <source src="song.mp3" type="audio/mp3"> Ваш браузер не поддерживает тег audio </audio>
Результат данного примера в окне браузера:
Тег HTML аудио и музыка на сайт
Рейтинг: 5 из 5, голосов 9
23 декабря 2017 г.
Тег <audio> в HTML используется для вставки на сайт воспроизводимого аудио. Обычно содержит вложенные элементы <source> для указания нескольких вариантов источника аудио-файла.
Текстовую дороку к файлу можно указать при помощи тега <track>.
Этот тег был введен в HTML5.
Синтаксис
<audio>вложенные теги / альтернативный текст</audio>
Альтернативный текст.
Вы можете указать внутри тега <audio> альтернативный текст. Он будет выведен, если ваш браузер не поддерживает тег.
Примеры использования <audio> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Вставка аудио на сайт</title>
</head>
<body>
<audio autoplay controls>
<source src="/music/track.mp3" type="audio/mpeg">
<source src="/music/track.ogg" type="audio/ogg">
Воспроизведение аудио-файла не поддерживается браузером
</audio>
</body>
</html>
Поддержка браузерами
| Тег | |||||
| <audio> | 9+ | Да | Да | Да | |
| Поддержка форматов | |||||
| MP3 | Да | Да | Да | Да | Да |
| WAV | Да | Нет | Да | Да | Да |
| Ogg | Да | Нет | Да | Нет | Да |
Атрибуты тега audio
| Атрибут | Значения | Описание |
|---|---|---|
| autoplay | не указывается / autoplay |
Если указан, аудио-дорожка будет воспроизведена, как только будет загружена. |
| controls | не указывается / controls |
Если указан, будут выведены кнопки управления плеером (play, pause и т.д.). |
| loop | не указывается |
Если указан, аудио-дорожка будет циклически воспроизводиться до закрытия страницы (после завершения, воспроизведение начнется сначала). |
| muted | не указывается / muted |
Если указан, аудио-дорожка будет воспроизводиться без звука. |
| preload |
auto |
Определяет особенности загрузки аудио элемента. metadata — при загрузке страницы загружается только техническая информация (метаданные, например, продолжительность аудио). none — не загружать аудио при загрузке страницы. Если указан атрибут autoplay, атрибут preload будет проигнорирован. |
| src | URL |
Адрес аудио-файла. |
by Lebedev
HTML-тегов | SamanthaMing.com
Очень просто добавлять и воспроизводить аудиофайлы на вашем сайте. Больше не нужно возиться со встраиванием Flash-файла или чем-то еще, что было раньше 😂 Упростите и двигайтесь вперед с тегом HTML5 , да 🎉
Attributes
controls
Этот атрибут указывает, является ли он логическим атрибутом или не отображать элементы управления звуком (например, кнопку запуска/паузы, прокрутку, громкость).
Примечание : Если он отсутствует, аудиофайл не будет отображаться. Как правило, вы всегда должны включать это. Если вы не хотите создать свою собственную панель управления с помощью JavaScript
autoplay
Это логический атрибут, который автоматически воспроизводит аудиофайл после загрузки страницы.
Примечание : эта функция может не работать из-за изменения политики автозапуска Chrome. По умолчанию false или отключен звук.
петля
Это логический атрибут, который указывает, будет ли аудиофайл непрерывно повторяться с самого начала после завершения воспроизведения.
preload
Этот атрибут используется для указания того, как должен загружаться звук при загрузке страницы. Это ваш способ сообщить браузеру, должен ли он загружать и кэшировать аудиофайл или нет.
Браузер не должен загружать звук при загрузке страницы.
Полезно, если вы хотите свести к минимуму ненужный трафик и когда не ожидается, что пользователь сразу же будет использовать медиа-ресурс.
Браузер должен загружать метаданные только при загрузке страницы. Опять же, это используется, когда пользователю не нужен медиа-ресурс сразу. Метаданные, которые вы можете получить, могут включать длину аудио, список дорожек, размеры и т. д.
Браузер должен загружать аудио целиком при загрузке страницы.
Примечание иногда этот атрибут может игнорироваться в определенных случаях (например, когда присутствует preload ).
Вы можете установить <аудио> с одним источником, используя атрибут src :
Вы также можете сделать это с помощью тега :
Несколько источников звука до
mp3 файлов. К сожалению, он поддерживается не всеми браузерами. К счастью, мы можем передавать несколько источников в теге audio . Поэтому делаем это так: Он идет сверху вниз.
Поэтому мы перечислили ogg и добавляем текст по умолчанию, если браузер не поддерживает тег audio .
Вы можете просмотреть дополнительную поддержку аудио на веб-сайте w3schools
CSS-стилизация аудиоэлементов
Вы не можете стилизовать отдельные компоненты аудиоплеера, такие как размер кнопки или значки, или стиль шрифта. Он примет значение по умолчанию для конкретного браузера. Но вы можете стилизовать внешний блок игрока.
Аудиособытия JavaScript
В аудиофайле можно прослушать множество событий. Например:
| Event | Fired when |
|---|---|
play | When the audio starts to play |
pause | When the audio is paused |
ended | Когда аудио будет завершено |
Полный список событий можно найти на MDN
Основное использование
Вы можете добавить прослушиватель событий следующим образом:
Кроме того, вы также можете добавить событие, используя атрибуты события, например:
По существу, синтаксис атрибутов события выглядит следующим образом:
Поддержка браузера
Поддержка отлично подходит для всех современных браузеров, включая Internet Explorer 9 и вверх 👍
MDN Браузерная совместимость
@iamjaydeep1: Что такое автозапуск и какие с ним были проблемы? Браузеры исторически плохо помогали пользователю управлять звуком.
Когда пользователи открывают веб-страницу и получают звук, которого они не ожидали или не хотели, у них плохой пользовательский интерфейс. Этот плохой пользовательский опыт — проблема, которую мы пытаемся решить. Нежелательный шум является основной причиной того, что пользователи не хотят, чтобы их браузер автоматически воспроизводил контент. Чтобы преодолеть проблемы с автозапуском, в Chrome были внесены некоторые изменения в политику. перейдите по ссылке для более подробной информации. Что такое решение? Простое аудио не будет воспроизводиться автоматически. вам необходимо взаимодействие с пользователем для воспроизведения звука, например, нажатие кнопки для воспроизведения или паузы.
@MrBenJ5: Я сделал библиотеку, которая позволяет вам визуализировать звук из вашего тега audio. Это тоже с открытым исходным кодом: проверьте это! audica.surge.sh
Resources
- MDN Web Docs: HTML audio
- w3schools: HTML audio
- w3docs: HTML audio
- TutorialRepublic: HTML audio
- FlaviocopesL HTML audio tag
- Audio — The preload attribute
- w3schools: аудиоатрибут HTML
- HTML | аудио предварительная загрузка Атрибут
- Smashing Magazine: предварительная загрузка: для чего она нужна?
- Стандарт HTML
Аудиотег HTML | Узнайте, как аудиотег работает в HTML?
Аудиотег HTML, представленный в HTML 5.
Браузеры и разрешенные форматы:
| Браузеры | | ||
| MP3 | WAV | ОГГ | |
| Edge/IE | ДА | № | № |
| Хром | ДА | ДА | ДА |
| Firefox | ДА | ДА | ДА |
| Сафари | ДА | ДА | № |
| Опера | ДА | ДА | ДА |
Как тег audio работает в HTML?
HTML-аудио работает в зависимости от типа предоставленного нами аудиофайла и атрибутов, которые мы использовали в нем.
Аудиоформаты и типы носителей:
| Формат файла | Тип носителя |
| MP3 | аудио/mpeg |
| ОГГ | аудио/ogg |
| WAV | аудио/wav |
Атрибуты
Это разные атрибуты аудиотега. Каждый атрибут имеет свою функциональность для выполнения. Допустимые атрибуты в теге
- autoplay: Этот атрибут autoplay запускает звук, когда он готов.
- элементы управления: Этот атрибут управления определяет такие элементы управления, как воспроизведение, пауза, громкость и т. д.
- цикл: Этот цикл определяет воспроизведение всякий раз, когда он заканчивается, пока мы явно не остановим звук.
- приглушенный: Это приглушенное воспроизведение звука без звука.
- preload: Эта предварительная загрузка заставляет аудио загружаться перед запуском приложения, поскольку автор думает об аудио.
- src: Этот src будет указывать URL-адрес существующего аудиофайла в нужном формате.
Примеры тега HTML Audio
Вот следующие примеры, упомянутые ниже:
Пример №1 – аудиофайл MP3
Код:
<голова> <метакодировка="ISO-8859-1">Аудиотег <тип стиля="текст/CSS"> h2 { красный цвет; выравнивание текста: по центру; } п { цвет: зеленый; размер шрифта: 20px; граница: 2px пунктирная коричневая; } <тело>Введение в аудиотег
Тег HTML audio появился в HTML 5. Этот тег используется для добавления всех аудиофайлы на HTML-страницу. Этот аудиотег также добавляет элементы управления звуком например воспроизведение, громкость, пауза и т.
Аудиодемонстрация MP3 из онлайн-источника
<управление звуком> <источник src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" тип="аудио/мпег">
д. В теге audio элемент source используется для
выбрать альтернативные аудиофайлы, которые выбирает браузер, браузер
всегда выбирайте первый распознанный формат. Мы также можем добавить текст между
audio и /audio тег, но он не выполняет звуковую функцию, он
просто действует как обычный текст.Вывод:
Пример #2 – Аудиофайл WAV
Код:
<голова> <метакодировка="ISO-8859-1">Аудиотег <тип стиля="текст/CSS"> h2 { цвет: зеленый; выравнивание текста: по центру; } п { цвет синий; размер шрифта: 20px; граница: 2 пикселя сплошного оранжевого цвета; } <тело>Введение в аудиотег
Тег HTML audio появился в HTML 5.
Аудиодемонстрация WAV из онлайн-источника
<управление звуком> <источник src="https://file-examples.com/wp-content/uploads/2017/11/file_example_WAV_1MG.wav" тип = "аудио/wav">
Этот тег используется для добавления всех
аудиофайлы на HTML-страницу. Этот аудиотег также добавляет элементы управления звуком
например воспроизведение, громкость, пауза и т. д. В теге audio элемент source используется для
выбрать альтернативные аудиофайлы, которые выбирает браузер, браузер
всегда выбирайте первый распознанный формат. Мы также можем добавить текст между
audio и /audio тег, но он не выполняет звуковую функцию, он
просто действует как обычный текст.Вывод:
Пример №3 — аудиофайл OGG
Код:
<голова> <метакодировка="ISO-8859-1">Аудиотег <тип стиля="текст/CSS"> h2 { цвет синий; выравнивание текста: по центру; } п { цвет: фуксия; размер шрифта: 20px; граница: 2 пикселя пунктирная красная; } <тело>Введение в аудиотег
Тег HTML audio появился в HTML 5.
Демо-версия OGG Audio из онлайн-источника
<аудиоуправление автозапуском> <источник src="https://file-examples.com/wp-content/uploads/2017/11/file_example_OOG_5MG.ogg" тип = "аудио/огг">
Этот тег используется для добавления всех
аудиофайлы на HTML-страницу. Этот аудиотег также добавляет элементы управления звуком
например воспроизведение, громкость, пауза и т. д. В теге audio элемент source используется для
выбрать альтернативные аудиофайлы, которые выбирает браузер, браузер
всегда выбирайте первый распознанный формат. Мы также можем добавить текст между
audio и /audio тег, но он не выполняет звуковую функцию, он
просто действует как обычный текст.Вывод:
Заключение
Используется для добавления аудиофайлов в документы HTML. Он имеет различные элементы управления для управления аудиофайлами, такими как воспроизведение, громкость, пауза и т. Д. Большинство браузеров поддерживают форматы файлов mp3, wav и ogg.