Радіо-плеєр за допомогою HTML5 <audio>

Базовий синтаксис тега audio
JavaScript API для тега audio
Підтримка кодеків в браузерах
Як відтворювати за допомогою елемента <audio>
Створення HTML5-плеєра
Дані для створення плеєра
Налаштування структури і дизайну плеєра
Змусимо плеєр працювати
висновок

Версія для друку

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

У цій статті ми познайомимося з тегом <audio>, почавши з основ, подивимося, як він працює в різних браузерах, а потім створимо радіо-плеєр, який буде використовувати аудіо-потік, що транслюється сервером.

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

Елемент <audio> простий у використанні. Для того щоб створити плеєр для програвання файлу формату Ogg Vorbis, вам достатньо написати:

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

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 відео ), - і по аудіо-формату були такі ж гарячі дискусії. В даний час підтримка кодеків в популярних браузерах виглядає наступним чином:

Браузер 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, який вказує на логотип кожного каналу:

{ "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), додавши наступний код:

Для початку створимо змінну з об'єктом 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 для легкого створення кросбраузерності радіо-плеєра.

Стаття заснована на публікації "An HTML5 <audio> radio player" .

Статьи

Радіо-плеєр за допомогою HTML5