Характеристики тега
В каких браузерах работает?
| 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 |
Для чего используется?
Данный тег позволяет вставлять аудио-файлы на веб-страничку, а таrже воспроизводить и корректировать некоторые настройки.
URL-адрес к записи указывается с помощью специального атрибута src. Также возможен вариант использования тега source внутри <audio> для указания пути к аудиозаписи. Еще есть возможность указания комментария внутри тега на случай не восприятия оператора некоторыми браузерами.
Также для воспроизведения нужно соответствие кодеков, поддерживаемых браузерами с указанными в теге. Ниже представлена таблица соответствий кодеков и браузеров:
| Наименование кодека | |||||
| ogg/vorbis | - | + | + | - | + |
| wav | - | + | + | + | + |
| mp3 | + | + | - | + | - |
| AAC | + | + | - | + | - |
Для того, чтобы в каждом браузере выбранная запись воспроизвелась, подбирают комбинацию кодеков, которые устроят все браузеры. Но для каждого кодека нужен отдельный тег <source> с путем к аудио записи.
Как правильно задавать?
<audio src="URL-адрес записи"></audio> <!--или--> <audio> <source src="URL-адрес записи"> </audio>
Какие атрибуты поддерживаются?
- autoplay - запись начинает воспроизводится автоматически после загрузки веб-страницы.
- controls - подключает инструменты управления записью.
- loop - зацыкливает воспроизведение файла (после завершения запись воспроизводится заново).
- muted - отключает звук записи.
- 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> </body> </html>