Тег <audio>
|
Internet Explorer |
Chrome |
Opera |
Safari |
Firefox |
Android |
iOS |
|
9.0+ |
3.0+ |
10.5+ |
3.1+ |
3.5+ |
2.2+ |
3.0+ |
Спецификация
|
HTML: |
3.2 |
4.01 |
5.0 |
XHTML: |
1.0 |
1.1 |
Описание
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.
Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.
|
Табл. 1. Кодеки и браузеры |
|||||
|
Кодек |
Internet Explorer |
Chrome |
Opera |
Safari |
Firefox |
|
ogg/vorbis |
|
|
|
|
|
|
wav |
|
|
|
|
|
|
mp3 |
|
|
|
|
|
|
AAC |
|
|
|
|
|
Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через тег <source>.
Синтаксис
<audio src="URL"></audio>
<audio>
<source src="URL">
</audio>
Атрибуты
autoplay
Звук начинает играть сразу после загрузки страницы.
controls
Добавляет панель управления к аудиофайлу.
loop
Повторяет воспроизведение звука с начала после его завершения.
preload
Используется для загрузки файла вместе с загрузкой веб-страницы.
src
Указывает путь к воспроизводимому файлу.
Закрывающий тег
Обязателен.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>audio</title>
</head>
<body>
<p>Александр Клименков - Четырнадцать</p>
<audio controls>
<source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">
<source src="audio/music.mp3" type="audio/mpeg">
Тег audio не поддерживается вашим браузером.
<a href="audio/music.mp3">Скачайте музыку</a>.
</audio>
</body>
</html>
Результат примера в браузере Opera показан на рис. 1.
Рис. 1. Воспроизведение аудиофайла
Браузеры
Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
HTML5
Звук