html.okpython.net
Основы создания сайтов
HTML :: Тег <audio>
В HTML тег <audio> (от англ. audio – звукозапись) используется для добавления, воспроизведения и управления аудиозаписями на веб-странице. Кроме того, его можно использовать и для воспроизведения потокового мультимедиа, используя интерфейс MediaStream.
Если между открывающим и закрывающим тегами элемента <audio> содержится обычный текст, то он отображается в браузерах, которые не поддерживают этот элемент.
Синтаксис
<audio>
...
</audio>
Закрывающий тег: обязателен.
Атрибуты
- autoplay – запись начинает проигрываться сразу же после загрузки страницы, при этом атрибут отменяет действие атрибута preload. Атрибут по умолчанию выключен и значений не принимает, т.е. является логическим.
- controls – добавляет стандартную панель управления, вид которой зависит от браузера; обычно это стандартные кнопки воспроизведения, паузы, перемотки и т.д. Атрибут по умолчанию выключен и значений не принимает.
- loop – зацикливает аудиозапись, заставляя проигрываться ее снова после завершения. Атрибут по умолчанию выключен и значений не принимает.
- muted – аудиозапись после загрузки запускается с отключенным звуком, т.е. пользователь должен будет сам установить желаемый уровень громкости. Атрибут по умолчанию выключен и значений не принимает.
-
preload – служит для загрузки аудиофайла
во время загрузки страницы, принимает три значения:
- "none" – загрузка аудиофайла начнется только после щелчка мыши по кнопке воспроизведение (используется по умолчанию);
- "auto" – браузер сам может принимать решение о предварительной загрузке файла, при этом аудиофайл может быть загружен целиком во время загрузки страницы;
- "metadata" – загружать только служебную информацию, например, длительность записи.
- src – указывает путь к аудиофайлу, который нужно воспроизвести. В качестве значения атрибута могут использоваться как абсолютные, так и относительные адреса (подробнее здесь).
- Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/media.html#the-audio-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/audio
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="https://site.name/"> <title>Пример №1</title> </head> <body> <!-- Не виден на странице и не проигрывается --> <p> <audio src="html_files/video/Саймон.mp4"></audio> – первая запись не видна и не проигрывается, т.к.<br> атрибут autoplay отсутствует. </p> <!-- Контрольная панель присутствует, воспроизведет только звук --> <p> <audio src="html_files/video/Саймон.mp4" controls autoplay></audio> – вторая запись будет проигрываться сразу же после загрузки, т.к.<br> присутствует атрибут autoplay. При этом, т.к. мы используем элемент<br> «audio», то проиграется только звуковая дорожка видеофайла. Чтобы<br> воспроизвести весь видеоролик, необходимо использовать элемент «video». </p> <!-- Воспроизведет звук второго «source» --> <p> <audio controls loop> <source src="html_files/video/Саймон.ogg"> <source src="html_files/video/Саймон.mp4"> </audio> – третья запись имеет контрольную панель, но сразу проигрываться<br> не будет. Зато после запуска она будет проигрываться по кругу. </p> </body> </html>
Пример №1