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

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

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

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

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

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

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

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

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

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 файла, который необходимо воспроизвести, в качестве аргумента объекта:

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

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

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

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

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

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

Судьба элемента <audio> очень похожа на <video> в HTML5. Было много дебатов и разногласий по поводу того, какой видео-формат использовать (более подробно об этом с статье Введение в 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> :

Для совместимости со старыми браузерами, которые не поддерживают элемент <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, указывающий на логотип каждого канала:

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

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

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

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

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

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

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

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

Когда 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 для легкого создания кроссбраузерного радио-плеера.