Тег <audio> HTML аудио, музыка

Рейтинг: 5 из 5, голосов 4
+++++

Тег <audio> в HTML используется для вставки на сайт воспроизводимого аудио. Обычно содержит вложенные элементы <source> для указания нескольких вариантов источника аудио-файла.

Этот тег был введен в HTML5.

Синтаксис

<audio>вложенные теги / альтернативный текст</audio>

Вложенные теги. Вы можете указывать источник аудио с помощью тегов <source>.

Альтернативный текст. Вы можете указать внутри тега <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>

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<audio> Да 9+ Да Да Да
Поддержка форматов
MP3 Да Да Да Да Да
WAV Да Нет Да Да Да
Ogg Да Нет Да Нет Да

Атрибуты тега audio

Атрибут Значения Описание
autoplay не указывается / autoplay

Если указан, аудио-дорожка будет воспроизведена, как только будет загружена.

controls не указывается / controls

Если указан, будут выведены кнопки управления плеером (play, pause и т.д.).

loop не указывается / loop

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

muted не указывается / muted

Если указан, аудио-дорожка будет воспроизводиться без звука.

preload

auto
metadata
none

Определяет особенности загрузки аудио элемента.
auto - загружать аудио-дорожку полностью при загрузке страницы.
metadata - при загрузке страницы загружается только техническая информация (метаданные, например, продолжительность аудио).
none - не загружать аудио при загрузке страницы.

Если указан атрибут autoplay, атрибут preload будет проигнорирован.

src URL

Адрес аудио-файла.

Оцените, насколько полезна эта статья
+++++
Эти материалы могут быть вам полезны
Тег <source> HTML источник ресурсаТег <video> HTML видео на сайт
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.