HTML тег <audio>html5

HTML теги

Значение и применение

Раньше в браузерах не было встроенных возможностей для поддержки аудио и видео контента, но с развитием интернет, поддержка мультимедийных элементов в качестве возможностей современных браузеров стала необходимостью. В HTML5 были введены новые элементы <audio>html5 и <video>html5, которые поддерживаются во всех современных браузерах. Основная задача тега <audio>html5 заключается в добавлении аудио контента на страницу.

Формат аудио файла определяет структуру и особенности представления звуковых данных при хранении на носителе (запоминающее устройство). Для устранения избыточности аудиоданных, как правило, используются специальные аудиокодеки, благодаря которым производят сжатие аудиоданных. Современные браузеры поддерживают следующие 3 формата аудио:

Браузер MP3 Wav Ogg
ChromeДАДАДА
Firefox ДАДАДА
Opera ДАДАДА
Safari ДАДАНЕТ
IEДАНЕТНЕТ
EdgeДАДАНЕТ

MIME-типы для аудио:

Формат MIME-типы
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

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

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<audio>html54.03.510.54.09.012.0

Атрибуты

АтрибутЗначениеОписание
autoplayhtml5autoplayУказывает, что аудио запустится автоматически, как только оно будет готово.
controlshtml5controlsОтображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения/паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).
loophtml5loopЗацикливает воспроизведение файла (наша песня хороша – начинай сначала)..
mutedhtml5mutedУказывает, что аудио будет заглушено (без звука).
preloadhtml5auto
metadata
none
Указывает как аудио должно загружаться при загрузке страницы. Атрибут игнорируется, если присутствует атрибут autoplay.
srchtml5URLУказывает URL аудиофайла.

Пример использования

Элемент <audio>html5 использует те же атрибуты, что и элемент <video>html5, за исключением атрибутов width (ширина), height (высота) и poster (изображение, которое отображается до воспроизведения видео). По аналогии с использованием элемента <video>html5, вы можете предоставить несколько вариантов аудио форматов с помощью элемента <source>html5, как показано в примере ниже:

<!DOCTYPE html>
<html>
	<head>
		<title>Аудио в HTML5</title>
	</head>
	<body>
		<h1>Аудио в HTML5</h1>
		<audio controls>
			<source src = "sound.mp3" type = "audio/mp3">
			<source src = "sound.ogg" type = "audio/ogg">
			Ваш браузер не поддерживает этот аудио формат. <!--Текст будет виден только тем у кого браузер не поддерживает этот аудио формат-->
			Вы можете скачать этот файл по ссылке ниже:
			<p><a href = "sound.rar">Скачать</a></p>
		</audio>
	</body>
</html>

В этом примере мы:

Добавили на страницу аудио-контент (тег <audio>html5), атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).

Использовали тег <source>html5, который позволяет указать несколько вариантов формата аудио (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы браузера необходимо указывать в тегах <source>html5 атрибут type (MIME-типы для аудио).

Результат нашего примера:


Добавление аудио на страницу.
Добавление аудио на страницу.

Допускается добавлять аудио файлы с использование упрощенного синтаксиса (без использования тега <source>html5), но такая запись будет актуальна если все браузеры поддерживают данный формат аудио:

<audio src = "sound.mp3" type = "audio/mp3" controls>
	Ваш браузер не поддерживает этот аудио формат. <!--Текст будет виден только тем у кого браузер не поддерживает этот аудио формат-->
	Вы можете скачать этот файл по ссылке. 
</audio>

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

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги