Радио-плеер с помощью HTML5 <audio>

Версия для печати

До появления HTML5 было крайне неудобно добавлять аудио на веб-страницы. Многие годы Flash был единственным способом вставки аудио-контента — но с внедрением тега <audio> в HTML5, воспроизведение аудио-контента на веб-страницах теперь может быть выполнено самим браузером, что полностью соответствует веб-стандартам — вы можете легко создать кнопку любого вида с помощью CSS и HTML, а потом назначить ей соответствующую функциональность, используя Audio API языка HTML5.

В этой статье мы познакомимся с тегом <audio>, начав с основ, посмотрим, как он работает в различных браузерах, а затем создадим радио-плеер, который будет использовать аудио-поток, транслируемый сервером.

Базовый синтаксис тега audio

Элемент <audio> прост в использовании. Для того чтобы создать плеер для проигрывания файла формата Ogg Vorbis, вам достаточно написать:

<audio src="http://yourserver/rockandroll.ogg" controls autobuffer> </audio>

После этого браузер создаст простой плеер на веб-странице. Ниже представлен элемент <audio>, созданный браузером Opera:

Элемент <audio> имеет пять атрибутов, характерных для всех медиа-элементов в HTML5:

• src содержит путь к аудио-файлу, который требуется воспроизвести. Атрибут src также может быть заменен одним или несколькими тегами <source> внутри элемента audio:

  <audio controls autobuffer>
       <source src="http://yourserver/rockandroll.ogg" />
   </audio>

  Благодаря этому вы можете использовать несколько элементов <source>, чтобы указать несколько аудио-форматов. Как вы позже убедитесь, разные браузеры поддерживают различные форматы, поэтому в идеале вам нужно указывать несколько форматов, чтобы обеспечить работу плеера во всех браузеров. Например:

  <audio controls autobuffer>
       <source src="http://yourserver/rockandroll.ogg" />
       <source src="http://yourserver/rockandroll.mp3" />
   </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 файла, который необходимо воспроизвести, в качестве аргумента объекта:

var audio = new Audio("http://yourserver/rockandroll.ogg");

Мы также можем изменить атрибут src:

audio.setAttribute("src", "http://yourserver/morerock.ogg");

Обращаясь к методам audio.play() и audio.pause() можно начать или приостановить воспроизведение файла. Параметр audio.volume задает громкость, а обработчик события timeupdate запускается каждый раз, когда обновляется время воспроизведения. Этих простых методов нам будет достаточно для создания радио-плеера.

Давайте посмотрим на эти возможности в действии! Следующий скрипт создаст элемент <audio> и назначит обработчики событий к нескольким HTML-кнопкам, которые мы будем использовать для управления воспроизведением:

 // Создаем новый объект Audio
 var audio = new Audio('test.ogg');
 
 // Добавляем к кнопке с идентификатором "play" обработчик события onclick, внутри которого вызывается метод play
var play = document.getElementById('play');
 play.addEventListener('click', function(){
     audio.play();
 }, false);
 
 // Находим кнопку и прикрепляем метод на событие onclick
 var pause = document.getElementById('pause');
 pause.addEventListener('click', function(){
     audio.pause();
 }, false);
 
 // Найти HTML5-элемент input типа range и добавить обработчик события onchange для настройки звука
 var volume = document.getElementById('volume');
 volume.addEventListener('change', function(){
     audio.volume = parseFloat(this.value / 10);
 }, false);
 
 // Добавить обработчик события timeupdate для вывода времени воспроизведения
 audio.addEventListener("timeupdate", function() {
     var duration = document.getElementById('duration');
     var s = parseInt(audio.currentTime % 60);
     var m = parseInt((audio.currentTime / 60) % 60);
     duration.innerHTML = m + '.' + s + 'sec';
 }, false);

Скрипт, приведенный выше, применяется к такому HTML-коду:

<div>
     <input id="play" type="button" value="Play" />
     <input id="pause" type="button" value="Pause" />
     <span id="duration"> </span>
 </div>
 <div>
     Громкость:
     <input id="volume" type="range" min="0" max="10" value="5" />
 </div>

Просмотреть пример

Если вы хотите узнать больше о Audio API, я предлагаю познакомиться вам со статьей Саймона Питерса "everything you need to know about HTML5 video and audio".

Поддержка кодеков в браузерах

Судьба элемента <audio> очень похожа на  <video> в HTML5. Было много дебатов и разногласий по поводу того, какой видео-формат использовать (более подробно об этом с статье Введение в HTML5 видео), — и по аудио-формату были такие же горячие дискуссии. В настоящее время поддержка кодеков в популярных браузерах выглядит следующим образом:

Для поддержки нескольких браузеров нам необходимо указывать один и тот же аудио-трек в нескольких форматах. Как было упомянуто ранее, вы можете указать несколько разных форматов с помощью тегов <source>, помещенных внутри элемента <audio>:

<audio controls autobuffer>
     <source src="http://yourserver/rockandroll.ogg" />
     <source src="http://yourserver/rockandroll.mp3" />
     <!-- Возможно следует также указать и Flash-содержимое для совместимости со старыми браузерами, типа IE :) -->
 </audio>

Для совместимости со старыми браузерами, которые не поддерживают элемент <audio>, можно (и следует) указать код Flash-плеера между открывающим и закрывающим тегами audio.

Потоковое воспроизведение с помощью элемента <audio>

Мы сделали плеер с помощью тега audio, способный воспроизводить аудио-файлы в различных браузерах. Однако, теперь перед нами стоит вопрос — как обрабатывать потоковые аудио-данные, используя элемент <audio>. Целью остальной части этой статьи является создание радио плеера с потоковым воспроизведением на основе элемента <audio>.

Создание HTML5-плеера

Мы будем использовать аудио-поток, предоставляемый норвежским радио NRK. NRK предоставляет каждый радио канал в двух форматах: Ogg и MP3, так что у нас есть два источника для потокового аудио.

Чтобы решить проблемы кроссбраузерности и поддержки разных аудио-форматов различными браузерами, мы будем использовать jQuery-плагин jPlayer. jPlayer предоставляет стандартный интерфейс с использованием встроенного в HTML 5 элемента audio, который поддерживается современными браузерами, а также использует Flash для работы в старых браузерах. Благодаря поддержки одного и того же интерфейса и для элемента <audio>, и для Flash, можно создать общий дизайн с помощью JavaScript, CSS и HTML, не беспокоясь о том, какой у пользователя браузер и какой плеер будет использоваться, HTML5 или Flash.

Данные для создания плеера

Для начала нам нужно создать набор данных JSON, содержащий информацию об аудио-потоках. Мы включаем общую информацию о радиостанции и каждом радиоканале — URL-адреса потоков, имена каналов и URL, указывающий на логотип каждого канала:

{
  "station" : {
    "name" : "NRK",
    "fullname" : "Norsk Rikskringkasting AS",
    "website" : "http://www.nrk.no/",
    "defaultChannel" : "P1",
    "channels" : [
    {
      "name" : "P1",
      "channel" : "NRK P1",
      "website" : "http://www.nrk.no/p1/",
      "schedule" : "",
      "logo" : "http://yoursite/gfx/nrk_p1.png",
      "streams" : {
        "type" : "middle",
        "ogg" : "http://radio.hiof.no/nrk-p1-128.ogg",
        "mp3" : "http://radio.hiof.no/nrk-p1-128"
      }
    }
    ]
  }
}

Настройка структуры и дизайна плеера

Нашим следующим шагом будет создание структуры HTML для плеера и его элементов управления:

<div id="radio-player" class="radio-default">
 
  <!-- Audio placeholder used by jPlayer -->
  <div id="player"> </div>
 
  <!-- Container for channel picker -->
  <div id="channelPicker">
    <a tabindex="8" accesskey="l" id="paginationLeft" class="inactive"><span>Left</span></a>
    <div id="channels"> </div>
    <a tabindex="9" accesskey="r" id="paginationRight" class="active"><span>Right</span></a>
  </div>
 
  <!-- Container for display -->
  <div id="display">
    <a id="currentChannel"><img src="gfx/default/default-station.png" /></a>
    <span id="duration"> </span>
    <span id="quality"> </span>
  </div>
 
  <!-- Containers for admin functions -->
  <a tabindex="7" accesskey="c" id="displayChannelPicker" title="Channels"><span>Channels</span></a>
  <a id="config">Config</a>
 
  <!-- Containers for jPlayer actions -->
  <a tabindex="3" accesskey="d" id="volumeMin" title="Mute"><span>Mute Volume</span></a>
  <a id="volume"><span>Adjust Volume</span></a>
  <a tabindex="4" accesskey="u" id="volumeMax" title="Max"><span>Max Volume</span></a>
  <a tabindex="1" accesskey="p" id="play" title="Play"><span>Play</span></a>
  <a id="pause" title="Pause"><span>Pause</span></a>
  <a tabindex="2" accesskey="s" id="stop" title="Stop"><span>Stop</span></a>
 
  <!-- Container for error messages -->
  <div id="error">
    <h2>Error</h2>
    <p> </p>
  </div>
 
 </div>

Каждый элемент <a> и <div> имеет свой идентификатор id, так что можно легко обратиться к этим элементам и назначить им обработчики событий для управления плеером с помощью Audio API.

Каждая кнопка оформлена с помощью CSS:

/**
   * Play button
   */
 .radio-default #play{
     position: absolute;
     top: 75px;
     left: 255px;
     width: 40px;
     height: 40px;
     background-image: url(../gfx/default/button-play.png);
     background-position: top left;
     background-repeat: no-repeat;
     cursor: pointer;
 }

Следует также отметить, что мы задали класс .radio-default для элемента <div>, который содержит в себе весь плеер. Теперь мы можем использовать его для удобного определения стилей в CSS:

.radio-default #play{
     /* some style */
 }

Благодаря возможности установки нескольких классов у одного элемента в HTML мы можем создать стили оформления плеера (скины) и переключать их, всего лишь изменяя один из классов:

.radio-different #play{
     /* some different style */
 }

Заставим плеер работать

Наш последний шаг по использованию плагина jPlayer — создание необходимой функциональности. Для начала нужно подключить в HTML скрипты библиотеки jQuery и плагина jPlayer, а также собственный файл с кодом по настройке плеера (player.js), добавив следующий код:

<script src="script/jquery-1.4/jquery.min.js"> </script>
<script src="script/jplayer-1.1.7/jquery.jplayer.js"> </script>
<script src="script/player.js"> </script>

Для начала создадим переменную с объектом jQuery, в который будет сгенерирован элемент <audio>:

var playerElement = jQuery("#player");

Далее мы получаем данные о необходимом аудио-потоке в формате JSON с помощью AJAX:

jQuery.ajax({
     url: "http://yourserver/channels.json",
     dataType: 'json',
     ifModified: true,
     success: function(data, status){
         for (var i = 0, len = data.station.channels.length; i < len; i++) {
 
             // добавить каждый канал в список выбора каналов плеера
 
         }
     }
 });

Когда AJAX-запрос вернет данные с сервера, необходимо обойти все полученные каналы в цикле и добавить их в список выбора каналов плеера. Список выбора каналов — в нашем случае это просто список изображений с логотипом каждого канала и обработчиком события onclick на каждом изображении для изменения аудио-потока в плеере, позволяющий пользователю выбрать любой из доступных каналов.

Функция, прикрепленная в качестве события onclick к каждому изображению в списке выбора каналов, содержит вызов метода очистки текущего воспроизводимого файла и метода выбора нового потока в элемент <audio>:

changeChannel:function(){
 
     // Удалить старый поток
     playerElement.jPlayer("clearFile");
 
     // Задать новый поток
     playerElement.jPlayer("setFile", "urlToNewMP3Stream", "urlToNewOGGStream");
 }

Плагин jPlayer позаботиться об очистке старого потока и установки нового в элемент <audio>. jPlayer определяет, какие типы потоков поддерживает браузер и необходимо ли использование Flash вместо HTML 5 для проигрывания аудио-потока. После того как мы прочитали данные о полученном канале и изменили вид списка выбора каналов, нам нужно прикрепить настроенный функционал к HTML-разметке.

playerElement.jPlayer({
     ready: function(){
         this.element.jPlayer("setFile", urlToDefaultMp3Stream, urlToDefaultOggStream);
     },
     swfPath: "script/jplayer-1.1.1/",
     nativeSupport: true,
     volume: 60,
     oggSupport: true,
     customCssIds: true
 })
 .jPlayer("cssId", "play", "play")
 .jPlayer("cssId", "pause", "pause")
 .jPlayer("cssId", "stop", "stop")
 .jPlayer("cssId", "volumeMin", "volumeMin")
 .jPlayer("cssId", "volumeMax", "volumeMax")
 .jPlayer("cssId", "volumeBar", "volume")
 .jPlayer("onProgressChange", function updateDuration(lp,ppr,ppa,pt,tt) {
      jQuery("#duration").text(jQuery.jPlayer.convertTime(pt));
 });

Вышеуказанный код добавляет 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 для легкого создания кроссбраузерного радио-плеера.