Звуки audio

Аудиосопровождение веб-страниц имеет довольно давнюю, но совсем не примечательную историю. Изначально звуковой контекст мог загружаться в браузер с помощью тега <BGSOUND>, позволяющего сопроводить просмотр ресурса. Например, фоновой музыкой. Этим приемом довольно быстро наигрались — эффект получался очень навязчивым, и создатели веб-ресурсов, за редким исключением, данную возможность просто игнорировали.

Звуки вернулись на веб-страницы с технологией flash, естественно, со всеми ей свойственными способностями и ограничениями. Сам же HTML долгое время оставался безмолвным. Пока в рамках HTML5 не появился специальный тег <audio>.

В самом простом виде этот тег выглядит следующим образом:

<audio src="sound. mp3" controls >

И этого уже вполне хватает для того, чтобы на странице появился аудиоплеер, проигрывающий указанный src-файл (рис. 89). Атрибут

Рис. 89. Аудиоплеер одним тегом

Controls тут отвечает за появление элементов управления плеером. Лучше, конечно, добавлять медиаплеер следующим образом:

<audio src="sound. mp3" Fontrols >

<p>Your browser does not support the audio element.</p> </audio>

Для того чтобы пользователи старых браузеров не очень удивлялись. Браузер с поддержкой HTML5 просто проигнорирует альтернативное содержимое.

Остальные атрибуты, применяемые с этим тегом, перечислены ниже:

— autoplay — автоматическое воспроизведение аудиофайла при загрузке страницы;

— F oop — циклическое воспроизведение аудиофайла;

— freload — атрибут, отвечающий за загрузку аудиоконтента. Принимает следующие значения:

• auto — происходит автоматическая предварительная загрузка;

• metadata — предварительно загружаются только метаданные (например, продолжительность аудиотрека);

• none — предварительной загрузки не происходит;

— autobuffer — атрибут, позволяющий начать автоматическую загрузку аудиопотока сразу после загрузки страницы без автоматического воспроизведения (атрибут действует, только если не указан атрибут autoplay).

Атрибут autobuffer признан устаревшим и не присутствует в текущей версии спецификации, правда, некоторыми браузерами до сих пор поддерживается именно он, а не более современный preload. А вот следующие атрибуты присутствуют в спецификации, но пока нигде не задействованы:

— f ediagroup — группировка аудио и/или видео для совместного проигрывания;

— muted — медиафайл проигрывается в режиме отключения звука. Наверное, очень полезный атрибут для аудиоконтента.

Одна особенность, связанная с использованием тега audio, связана с войной форматов, вылившейся в необходимость раздавать разные форматы медиафайлов для разных браузеров. Подробно останавливаться на ней я не хочу, но выход из положения предложен следующий:

<audio controls="controls" preload="none" id="player"> <source src="sound. ogg" type="audio/ogg" />

<source src="sound. mp3" type="audio/mpeg" />

Ваш браузер не поддерживает данный формат воспроизведения <a href="sound. mp3">Download </a >

</audio>

В данном случае будет показан либо первый подходящий формат, либо разочаровывающая надпись со ссылкой на загрузку контента. Следует учесть, что если источник будет указан в самом теге <audio>, будет использован именно он, все значения в <source> будут проигнорированы. Контейнер <source> имеет еще необязательный атрибут TYPE, определяющий MIME-тип файла-источника. В случае его отсутствия браузер определяет тип файла по его содержанию.

Медиаконтент допустимо также указывать в формате data-url:

<audio src="data:audio/mpeg, ID3%02%00%00%00%00%…" >

Важно то, что элемент <audio> имеет собственный JavaScript API, с помощью которого можно управлять плеером. Его возможности можно продемонстрировать, быстро набросав такую реализацию панели управления:

<script>

Function playerMagager(cmd){

Player = document. getElementById(‘player’); if(cmd == ‘play’) player. play(); if(cmd == ‘pause’) player. pause(); if(cmd == ‘plus’) player. volume+=0.1; if(cmd == ‘minus’) player. volume-=0.1;

}

</script>