До появления HTML5 было крайне неудобно добавлять аудио на веб-страницы. Многие годы Flash был единственным способом вставки аудио-контента — но с внедрением в HTML5, воспроизведение аудио-контента на веб-страницах теперь может быть выполнено самим браузером, что полностью соответствует веб-стандартам — вы можете легко создать кнопку любого вида с помощью CSS и HTML, а потом назначить ей соответствующую функциональность, используя Audio API языка HTML5.
В этой статье мы познакомимся с тегом <audio>, начав с основ, посмотрим, как он работает в различных браузерах, а затем создадим радио-плеер, который будет использовать аудио-поток, транслируемый сервером.
Базовый синтаксис тега audio
Элемент <audio> прост в использовании. Для того чтобы создать плеер для проигрывания файла формата Ogg Vorbis, вам достаточно написать:
После этого браузер создаст простой плеер на веб-странице. Ниже представлен элемент <audio>, созданный браузером Opera:
Элемент <audio> имеет пять атрибутов, характерных для всех медиа-элементов в HTML5:
src содержит путь к аудио-файлу, который требуется воспроизвести. Атрибут src также может быть заменен одним или несколькими тегами <source> внутри элемента audio:
1
<audiocontrols autobuffer>
2
<sourcesrc="http://yourserver/rockandroll.ogg"/>
3
</audio>
Благодаря этому вы можете использовать несколько элементов <source>, чтобы указать несколько аудио-форматов. Как вы позже убедитесь, разные браузеры поддерживают различные форматы, поэтому в идеале вам нужно указывать несколько форматов, чтобы обеспечить работу плеера во всех браузеров. Например:
1
<audiocontrols autobuffer>
2
<sourcesrc="http://yourserver/rockandroll.ogg"/>
3
<sourcesrc="http://yourserver/rockandroll.mp3"/>
4
</audio>
autoplay — атрибут, позволяющий воспроизводить аудио автоматически, сразу после загрузки страницы.
Примечание: имейте в виду, что автозапуск раздражает многих пользователей. Если же вы используете функцию автозапуска, то предоставьте пользователю возможность приостановить воспроизведение.
autobuffer — атрибут, позволяющий начать автоматическую загрузку аудио-потока сразу после загрузки страницы без автоматического воспроизведения. Этот атрибут действует, только если не указан атрибут autoplay.
loop — атрибут, позволяющий проигрывать файл несколько раз после окончания его воспроизведения.
controls — атрибут, позволяющий показать или скрыть элементы управления плеером. Если вы не укажите этот атрибут, то элементы управления будут скрыты, а если вам необходимо создать собственные элементы управления — используйте JavaScript API и CSS для тега audio.
JavaScript API для тега audio
Элемент <audio> предоставляет мощный JavaScript API. В этой статье мы рассмотрим его лишь поверхностно, так как будем использовать один из плагинов jQuery для создания плеера, однако API все равно полезно знать.
В JavaScript мы можем вызвать объект Audio, который возвратит элемент <audio>. Обратите внимание на то, что этот элемент не будет частью объектной модели документа (DOM), пока мы явно не добавим его на страницу с помощью других функций. Однако, независимо от того является он частью DOM или нет, элемент <audio> можно контролировать через его API методы и свойства. Мы можем передать URL файла, который необходимо воспроизвести, в качестве аргумента объекта:
Обращаясь к методам audio.play() и audio.pause() можно начать или приостановить воспроизведение файла. Параметр audio.volume задает громкость, а обработчик события timeupdate запускается каждый раз, когда обновляется время воспроизведения. Этих простых методов нам будет достаточно для создания радио-плеера.
Давайте посмотрим на эти возможности в действии! Следующий скрипт создаст элемент <audio> и назначит обработчики событий к нескольким HTML-кнопкам, которые мы будем использовать для управления воспроизведением:
01
// Создаем новый объект Audio
02
varaudio = newAudio('test.ogg');
03
04
// Добавляем к кнопке с идентификатором "play" обработчик события onclick, внутри которого вызывается метод play
05
varplay = document.getElementById('play');
06
play.addEventListener('click', function(){
07
audio.play();
08
}, false);
09
10
// Находим кнопку и прикрепляем метод на событие onclick
11
varpause = document.getElementById('pause');
12
pause.addEventListener('click', function(){
13
audio.pause();
14
}, false);
15
16
// Найти HTML5-элемент input типа range и добавить обработчик события onchange для настройки звука
17
varvolume = document.getElementById('volume');
18
volume.addEventListener('change', function(){
19
audio.volume = parseFloat(this.value / 10);
20
}, false);
21
22
// Добавить обработчик события timeupdate для вывода времени воспроизведения
Если вы хотите узнать больше о Audio API, я предлагаю познакомиться вам со статьей Саймона Питерса .
Поддержка кодеков в браузерах
Судьба элемента <audio> очень похожа на <video> в HTML5. Было много дебатов и разногласий по поводу того, какой видео-формат использовать (более подробно об этом с статье ), — и по аудио-формату были такие же горячие дискуссии. В настоящее время поддержка кодеков в популярных браузерах выглядит следующим образом:
Браузер
Ogg
Mp3
Wave
Opera 10.50
x
x
Firefox 3.5
x
x
Safari 4
x
x
Chrome 3
x
x
IE 8
Для поддержки нескольких браузеров нам необходимо указывать один и тот же аудио-трек в нескольких форматах. Как было упомянуто ранее, вы можете указать несколько разных форматов с помощью тегов <source>, помещенных внутри элемента <audio>:
1
<audiocontrols autobuffer>
2
<sourcesrc="http://yourserver/rockandroll.ogg"/>
3
<sourcesrc="http://yourserver/rockandroll.mp3"/>
4
<!-- Возможно следует также указать и Flash-содержимое для совместимости со старыми браузерами, типа IE :) -->
5
</audio>
Для совместимости со старыми браузерами, которые не поддерживают элемент <audio>, можно (и следует) указать код Flash-плеера между открывающим и закрывающим тегами audio.
Потоковое воспроизведение с помощью элемента <audio>
Мы сделали плеер с помощью тега audio, способный воспроизводить аудио-файлы в различных браузерах. Однако, теперь перед нами стоит вопрос — как обрабатывать потоковые аудио-данные, используя элемент <audio>. Целью остальной части этой статьи является создание радио плеера с потоковым воспроизведением на основе элемента <audio>.
Создание HTML5-плеера
Мы будем использовать аудио-поток, предоставляемый норвежским радио NRK. NRK предоставляет каждый радио канал в двух форматах: Ogg и MP3, так что у нас есть два источника для потокового аудио.
Чтобы решить проблемы кроссбраузерности и поддержки разных аудио-форматов различными браузерами, мы будем использовать jQuery-плагин . jPlayer предоставляет стандартный интерфейс с использованием встроенного в HTML 5 элемента audio, который поддерживается современными браузерами, а также использует Flash для работы в старых браузерах. Благодаря поддержки одного и того же интерфейса и для элемента <audio>, и для Flash, можно создать общий дизайн с помощью JavaScript, CSS и HTML, не беспокоясь о том, какой у пользователя браузер и какой плеер будет использоваться, HTML5 или Flash.
Данные для создания плеера
Для начала нам нужно создать набор данных JSON, содержащий информацию об аудио-потоках. Мы включаем общую информацию о радиостанции и каждом радиоканале — URL-адреса потоков, имена каналов и URL, указывающий на логотип каждого канала:
01
{
02
"station": {
03
"name": "NRK",
04
"fullname": "Norsk Rikskringkasting AS",
05
"website": "http://www.nrk.no/",
06
"defaultChannel": "P1",
07
"channels": [
08
{
09
"name": "P1",
10
"channel": "NRK P1",
11
"website": "http://www.nrk.no/p1/",
12
"schedule": "",
13
"logo": "http://yoursite/gfx/nrk_p1.png",
14
"streams": {
15
"type": "middle",
16
"ogg": "http://radio.hiof.no/nrk-p1-128.ogg",
17
"mp3": "http://radio.hiof.no/nrk-p1-128"
18
}
19
}
20
]
21
}
22
}
Настройка структуры и дизайна плеера
Нашим следующим шагом будет создание структуры HTML для плеера и его элементов управления:
Каждый элемент <a> и <div> имеет свой идентификатор id, так что можно легко обратиться к этим элементам и назначить им обработчики событий для управления плеером с помощью Audio API.
Следует также отметить, что мы задали класс .radio-default для элемента <div>, который содержит в себе весь плеер. Теперь мы можем использовать его для удобного определения стилей в CSS:
1
.radio-default#play{
2
/* some style */
3
}
Благодаря возможности установки нескольких классов у одного элемента в HTML мы можем создать стили оформления плеера (скины) и переключать их, всего лишь изменяя один из классов:
1
.radio-different #play{
2
/* some different style */
3
}
Заставим плеер работать
Наш последний шаг по использованию плагина jPlayer — создание необходимой функциональности. Для начала нужно подключить в HTML скрипты библиотеки jQuery и плагина jPlayer, а также собственный файл с кодом по настройке плеера (player.js), добавив следующий код:
Для начала создадим переменную с объектом jQuery, в который будет сгенерирован элемент <audio>:
1
varplayerElement = jQuery("#player");
Далее мы получаем данные о необходимом аудио-потоке в формате JSON с помощью AJAX:
01
jQuery.ajax({
02
url: "http://yourserver/channels.json",
03
dataType: 'json',
04
ifModified: true,
05
success: function(data, status){
06
for(vari = 0, len = data.station.channels.length; i < len; i++) {
07
08
// добавить каждый канал в список выбора каналов плеера
09
10
}
11
}
12
});
Когда AJAX-запрос вернет данные с сервера, необходимо обойти все полученные каналы в цикле и добавить их в список выбора каналов плеера. Список выбора каналов — в нашем случае это просто список изображений с логотипом каждого канала и обработчиком события onclick на каждом изображении для изменения аудио-потока в плеере, позволяющий пользователю выбрать любой из доступных каналов.
Список выбора каналов
Функция, прикрепленная в качестве события onclick к каждому изображению в списке выбора каналов, содержит вызов метода очистки текущего воспроизводимого файла и метода выбора нового потока в элемент <audio>:
Плагин jPlayer позаботиться об очистке старого потока и установки нового в элемент <audio>. jPlayer определяет, какие типы потоков поддерживает браузер и необходимо ли использование Flash вместо HTML 5 для проигрывания аудио-потока. После того как мы прочитали данные о полученном канале и изменили вид списка выбора каналов, нам нужно прикрепить настроенный функционал к HTML-разметке.
Вышеуказанный код добавляет jPlayer в элемент с идентификатором #player. В настройках вызова плагина мы задаем элемент <audio> для использования по умолчанию (nativeSupport: true;), если браузер поддерживает этот элемент HTML 5; мы также устанавливаем громкость по умолчанию (volume: 60), расположение плагина Flash для обратной совместимости со старыми браузерами (swfPath: "script/jplayer-1.1.1/"), используем формат Ogg по умолчанию, если он поддерживается (oggSupport: true) и функцию, которая будет запущена после инициализации плеера (ready: function( ... );).
В функции ready мы настраиваем радио-канал по умолчанию.
Наконец, мы указываем плагину jPlayer на идентификаторы различных кнопок управления и настраиваем обработчик события при проигрывании аудио, для того чтобы изменять время воспроизведения на панели нашего плеера.
Заключение
В этой статье мы постарались рассмотреть в деталях элемент HTML5 <audio>, использовали плагин jQuery для легкого создания кроссбраузерного радио-плеера.
Июнь 20th, 2012 
Archi 
Список выбора каналов
Опубликовано в рубрике 
Метки: