Тег <audio> в HTML используется для вставки на сайт воспроизводимого аудио. Обычно содержит вложенные элементы <source> для указания нескольких вариантов источника аудио-файла.
Текстовую дороку к файлу можно указать при помощи тега <track>.
Этот тег был введен в HTML5.
Синтаксис
<audio>вложенные теги / альтернативный текст</audio>
Альтернативный текст. Вы можете указать внутри тега <audio> альтернативный текст. Он будет выведен, если ваш браузер не поддерживает тег.
Если указан, аудио-дорожка будет воспроизведена, как только будет загружена.
controls
не указывается / controls
Если указан, будут выведены кнопки управления плеером (play, pause и т.д.).
loop
не указывается / loop
Если указан, аудио-дорожка будет циклически воспроизводиться до закрытия страницы (после завершения, воспроизведение начнется сначала).
muted
не указывается / muted
Если указан, аудио-дорожка будет воспроизводиться без звука.
preload
auto metadata none
Определяет особенности загрузки аудио элемента. auto — загружать аудио-дорожку полностью при загрузке страницы. metadata — при загрузке страницы загружается только техническая информация (метаданные, например, продолжительность аудио).
none — не загружать аудио при загрузке страницы.
Если указан атрибут autoplay, атрибут preload будет проигнорирован.
src
URL
Адрес аудио-файла.
by Lebedev
| HTML | WebReference
Элемент <audio> (от англ. audio — звук) добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задаётся через атрибут src или вложенный элемент <source>. Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим элементом.
Список поддерживаемых браузерами кодеков приведён в табл. 1.
Табл. 1. Кодеки и браузеры
Кодек
ogg/vorbis
17
3
11. 5
3.5
wav
12
3
11.5
3.1
3.5
mp3
9
12
3
15
3.1
22
AAC
9
12
3
15
3.1
22
Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через элемент <source>.
Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
Спецификация
Спецификация
Статус
WHATWG HTML Living Standard
Живой стандарт
HTML5
Рекомендация
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
9
12
5
11.5
4.1
4
2.2
4
11
5
Браузеры
В таблице браузеров применяются следующие обозначения.
— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Аудио и видео
См.
также
<bgsound>
Атрибуты элементов
Добавление медиа-контента
Практика
Автовоспроизведение аудио
Добавление аудио
Зацикливание аудио
Аудио и видео в формате HTML5
❮ Пред. Следующий ❯
Раньше собственные веб-технологии, такие как HTML, не позволяли встраивать видео и аудио в Интернет. Технологии на основе плагинов стали популярными для обработки такого контента, но у них было много проблем, в том числе плохая работа с функциями HTML/CSS, проблемы с безопасностью и доступностью. Позже спецификация HTML5 представила такие возможности с элементами
Элемент
Элемент
Как добавить аудио на веб-страницу
До появления HTML5 аудиофайлы добавлялись на страницу путем интеграции фонового звука с помощью тега . Файл воспроизводился во время просмотра страницы, и пользователь не мог отключить звук. В HTML5 мы можем встраивать аудиофайлы с помощью тега
В коде атрибут src ссылается на URL-адрес аудиофайла, а атрибут control добавляет панель управления (кнопка запуска, полоса прокрутки, регулятор громкости).
Поскольку не все браузеры поддерживают все аудиоформаты, аудиофайл кодируется/декодируется с помощью аудиокодека (цифрового электронного устройства или компьютерного программного обеспечения). который помогает в сжатии и распаковке цифровых аудиоданных). Все форматы аудиофайлов добавляются одновременно через элемент с атрибутом src.
При определении различных форматов файлов мы рекомендуем определить MIME-тип для каждого файла, чтобы позволить браузеру локализовать поддерживаемый файл. Тип MIME определяется с помощью атрибута типа.
Пример добавления различных форматов аудиофайлов:
<голова>
Название документа
<тело>
<управление звуком>
Нажмите кнопку воспроизведения
Попробуй сам »
Самые популярные аудио форматы:
MP3 – самый популярный аудио формат, который использует сжатие с потерями и позволяет уменьшить размер файла. Несмотря на популярность среди пользователей, телекомпании и радиостанции используют более современные кодеки ISO-MPEG, вроде AAC или MPEG-H.
AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним обеспечивает более высокое качество при той же или большей степени сжатия.
Ogg Vorbis — свободный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно поддерживается проигрывателями устройств.
В предыдущей версии HTML видео были встроены в сайт с помощью сторонних плагинов, таких как QuickTime, RealPlayer или Flash. В HTML5 появился новый тег
В коде это выглядит так:
Атрибут src указывает URL-адрес файла, а атрибут control используется для отображения элементов управления.
Каждый браузер поддерживает определенный кодек, поэтому, чтобы обеспечить воспроизведение видео во всех браузерах, видеофайл должен быть размещен в нескольких форматах. Как и в случае с аудиофайлами, все форматы видеофайлов включаются в элемент , начиная с наиболее предпочтительного. Каждый видеофайл должен иметь свой MIME-тип, который определяется атрибутом type.
Чтобы убедиться, что браузер может обрабатывать видеофайлы, создайте в папке, где находится веб-сайт, файл . htaccess, определяющий MIME-типы для видео.
Пример добавления различных форматов видеофайлов:
<голова>
Название документа
<стиль>
видео {
ширина: 300 пикселей;
высота: 220 пикселей;
граница: 1px сплошная #666;
}
<тело>
<управление видео>
Некоторая информация о видео
Попробуй сам »
На сегодняшний день существует 3 основных видеоформата: MP4/MPEG-4, OGG и WebM+. Для сжатия видеоданных и их воспроизведения мы используем кодеки.
Для видеофайла формата MPEG-4 используется видеокодек Н.264 и аудиокодек ААС. Если вы хотите использовать кодеки, вы должны получить лицензию.
Для видеофайла Ogg используйте видеокодек Theora и аудиокодек Vorbis с открытым кодом.
Для видеофайлов WebM + , используйте видеокодек VP8 и аудиокодек Vorbis. В этом случае лицензия не требуется.
Большинство серверов не обслуживают носители Ogg или mp4 с правильными типами MIME. Для этого может потребоваться добавить соответствующую конфигурацию.
Субтитры и заголовки добавляются к аудио- и видеофайлам с помощью элемента
Пример добавления субтитров и заголовков к аудио- и видеофайлам:
<голова>
Название документа
<стиль>
видео {
ширина: 300 пикселей;
высота: 200 пикселей;
граница: 1px сплошная #666;
}
<тело>
<управление видео отключено src="/build/videos/arcnet.io(7-sec).mp4">
io(7-sec).mp4" />
<р>
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным.
Попробуй сам »
Чтобы выровнять видеоплеер на странице, поместите элемент
ogg" type="audio/ogg">
ogg" type="audio/ogg">
5
Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
также
Файл воспроизводился во время просмотра страницы, и пользователь не мог отключить звук. В HTML5 мы можем встраивать аудиофайлы с помощью тега 
Тип MIME определяется с помощью атрибута типа.
Обеспечивает хорошее качество звука, но недостаточно поддерживается проигрывателями устройств.
htaccess, определяющий MIME-типы для видео.
io(7-sec).mp4" />
<р>
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным.