Воспроизведение аудио с помощью HTML5

Воспроизведение аудио с помощью HTML5.

В Интернете аудио не так популярно, как видео. Мы можем снять на персональную камеру видео, которое наберет миллионы просмотров на вебсайтах, подобных http://www.youtube.com, но добиться того же результата, выложив в сеть звуковой файл, почти невозможно. Однако аудио все же присутствует, и у него есть свой рынок в Сети, включающий в себя радиошоу и подкасты.

В HTML5 появился новый элемент, позволяющий воспроизводить аудио в документах HTML. Разумеется, элемент носит название <audio>, а его характеристики почти идентичны характеристикам элемента <video>.

Листинг 5.11. Простейший HTML-код для встраивания аудио

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Аудиопроигрыватель</title>

</head>

<body>

<section id="player">

<audio src="http://minkbooks.com/content/beach.mp3" controls> </audio>

</section>

</body>

</html>

Элемент <audio>

Элемент <audio> работает так же, как и элемент <video>, и у них много общих атрибутов:

— src. Задает URL-адрес файла, который будет воспроизводиться на странице. Так же, как при использовании элемента <video>, этот атрибут обычно заменяют элементом <source>, для того чтобы перечислить ссылки на несколько файлов в разных аудиоформатах, из которых браузер сможет выбрать наиболее подходящий;

— controls. Активирует интерфейс, по умолчанию предоставляемый каждым браузером;

О autoplay. Если этот атрибут присутствует, браузер автоматически начинает воспроизведение аудио, как только это становится возможным;

— loop. Если этот атрибут присутствует, браузер начнет воспроизведение аудио с начала, как только оно достигнет конца;

— preload. Может принимать три значения: none, metadata и auto. Первое указывает, что аудио кэшировать не нужно (обычно используется с целью минимизации расхода трафика). Второе значение, metadata, рекомендует браузеру загрузить некоторую информацию о ресурсе (например, продолжительность). Третье значение, auto, устанавливается по умолчанию и заставляет браузер загружать файл сразу же, как только это становится возможным.

И снова нам приходится говорить о кодеках, потому что кода из листинга 5.11 должно быть более чем достаточно для встраивания аудио, однако в реальной жизни это не так. MP3 распространяется с коммерческой лицензией, следовательно, не поддерживается такими браузерами, как Firefox и Opera. Vorbis (аудиокодек из контейнера OGG) поддерживается вышеупомянутыми браузерами, но не Safari и не Internet Explorer. Поэтому нам снова приходится прибегать к помощи элемента <source> и добавлять ссылки минимум на два файла в разных форматах, из которых браузер сможет выбрать подходящий.

Листинг 5.12. Два источника одного и того же аудио

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Аудиопроигрыватель</title>

</head>

<body>

<section id="player">

<audio id="media" controls>

<source src="http://minkbooks.com/content/beach.mp3">

<source src="http://minkbooks.com/content/beach.ogg">

</audio>

</section>

</body>

</html>

Код из листинга 5.12 будет воспроизводить аудио в любом браузере, используя элементы управления по умолчанию. Если невозможно воспроизвести MP3, то браузер загрузит версию OGG, и наоборот. Не забывайте только, что использование MP3, так же как и MP4 для видео, ограничивается коммерческими лицензиями, поэтому встраивать медиафайлы в этих форматах можно только в определенных обстоятельствах, определяемых конкретной лицензией.

Поддержка бесплатных аудиокодеков (таких как Vorbis) становится все обширнее, однако для того, чтобы доселе неизвестный формат завоевал звание сетевого стандарта, необходимо довольно много времени.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *