Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Тег audio

Дата:10.09.15 в 13:06
Справочник: 

Характеристики тега

В каких браузерах работает?

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>

Оценка: 
Оценок: 1 (средняя 5 из 5)
Тип html тега: 
Понравилась статья? Расскажите о ней друзьям: