Аудио плеер на основе HTML5 и jQuery

Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.

Плеер будет поддерживать следующие функции:

• перемотка
• старт/стоп
• пауза
• индикатор оставшегося времени
• индикатор загрузки файла

В итоге Вы научитесь не только делать кросбраузерный плеер, но простой плагин на jQuery, так как плеер мы будем подключать как плагин jQuery. В чём основное отличие плагина jQuery от простого javascript кода реализующегося те же функции - плеер может создаваться неоднократно на странице. То есть написав:

/* Добавление классов для подсветки кода */ <form action="index.php" method="POST"> <div class="conteinerofplayer"> <div class="player m"> <div class="playbut_m"> </div> <div class="bar"> <div class="progress_m"> <span></span> <div class="line_m"> </div> </div> <div class="tracktime"> <span></span> </div> </div> <div class="radionoactive_m radio_m"> </div> </div> <div class="player w"> <div class="playbut_w"> </div> <div class="bar"> <div class="progress_w"> <span></span> <div class="line_w"> </div> </div> <div class="tracktime"> <span></span> </div> </div> <div class="radionoactive_w radio_w"> </div> </div> <!-- <div class="player m2"> <div class="playbut_m"> </div> <div class="bar"> <div class="progress_m"> <span></span> <div class="line_m"> </div> </div> <div class="tracktime"> <span></span> </div> </div> <div class="radionoactive_m radio_m"> </div> </div> --> </div> <input type="submit" value="submit"> </form>

С помощью функции "checknav" нужно проверять величину прокрутки окна, в зависимости от чего добавлять CSS класс или удалять его. Переменные ds_loaded.sc и ds_loaded.sback нужны для предотвращения циклического запуска кода, который может быть и не таким простым, например можно добавить функции jQuery анимации.

Структура меню может быть любой, с учетом его горизонтального расположения, для примера возьмём стандартную разметку меню из Joomla 2.5:

$('.m').audioplayer('init',{file:'audio/250_m',t:'m'}); $('.w').audioplayer('init',{file:'audio/250_w',t:'w'});

плагин правильно подключится дважды, как на изображении. В плагин jQuery мы передаём два параметра первый - наименование функции (init) содержащейся в плаигне, второй объект, содержащий опции плагина ({file:'250_m',t:'m'}). Где file имя файла, t - тип плеера, он может быть розовым (w) или синим (m). Сразу скажу, все графические элементы плеера свободны для использования и распространения, да и плеер распространяется на лицензии GNU GPL 2. То есть у Вас есть всеобъёмлющий набор прав по распоряжению исходными материалами плеера.

Для его работы ипользуется следующя hrml разметка::

<form action="index.php" method="POST"> <div class="conteinerofplayer"> <div class="player m"> <div class="playbut_m"> </div> <div class="bar"> <div class="progress_m"> <span></span> <div class="line_m"> </div> </div> <div class="tracktime"> <span></span> </div> </div> <div class="radionoactive_m radio_m"> </div> </div> <div class="player w"> <div class="playbut_w"> </div> <div class="bar"> <div class="progress_w"> <span></span> <div class="line_w"> </div> </div> <div class="tracktime"> <span></span> </div> </div> <div class="radionoactive_w radio_w"> </div> </div> <!-- <div class="player m2"> <div class="playbut_m"> </div> <div class="bar"> <div class="progress_m"> <span></span> <div class="line_m"> </div> </div> <div class="tracktime"> <span></span> </div> </div> <div class="radionoactive_m radio_m"> </div> </div> --> </div> <input type="submit" value="submit"> </form>

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

Для начала не забудьте подключить jQuery! Затем пишите плагин внутри обработчика события загрузки страницы:

;(function($) { ....... })(jQuery);

Любой плагин jQuery расширяет его, для это есть стандартная функция jQuery $.fn.extend:

$.fn.extend({ });

Содержимое $.fn.extend для нашего плагина будет следующим:

audioplayer: function(arg,options) { if (options && typeof(options) == 'object') { options = $.extend( {}, $.audioplayer.defaults, options ); } else { options = $.audioplayer.defaults; } // this creates a plugin for each element in // the selector or runs the function once per // selector. To have it do so for just the // first element (once), return false after // creating the plugin to stop the each iteration this.each(function() { new $.audioplayer(this, options, arg ); }); return; }

В общем здесь нет ничего сложного, мы добавляем опции плагина и запускаем для каждого объекта this отдельный плагин, название плагина я выбрал "audioplayer". Основа - готова!

Далее код плагина. Сперва я приведу его целиком, затем объясню отдельные части этого кода.

$.audioplayer = function( elem,options,arg) { if (arg && typeof(arg) == 'string') { if (arg == 'init') { init( arg ); } else if (arg == 'remove') { remove( arg ); } return; } /*...normal plugin actions...*/ function init(arg) { var isload = {}; var container = $(elem); var isIE = !!document.all && document.uniqueID; var isChrome = false; var btfound = 0; browser_detect = navigator.userAgent.toLowerCase(); if(browser_detect.indexOf("chrome") + 1) isChrome = true; if(options.t == 'w') { var tclass = 'qtip-light'; var _sclass = '_w'; } else { var tclass = 'qtip-light-men'; var _sclass = '_m'; } i = container.index('.player'); if(isIE || isChrome) { ext = 'mp3'; } else { ext = 'ogg'; } container.append('<audio preload="metadata" class="track" src="'+options.file+'.'+ext+'"><p>Your browser does not support the audio element</p></audio>'); $('.player:eq(0)').find('audio').addClass('aa'); if(i == 0) { acteviHidden(_sclass); } var audio = $(elem).find('audio')[0]; $('.track',container).bind('progress', function(e) { var ranges = []; for(var i = 0; i < audio.buffered.length; i ++) { ranges.push([ audio.buffered.start(i), audio.buffered.end(i) ]); } d = audio.duration / 100; //$('.bar .tracktime span',container).hide(); //now iterate through the ranges and convert each set of timings //to a percentage position and width for the corresponding span allbufer = 0; for(var i = 0; i < audio.buffered.length; i ++) { allbufer += ranges[i][1]-ranges[i][0]; } //console.log(allbufer); per = Math.floor(allbufer / d); if(per > 0) { per = (per > 100) ? per ==100 : per; $('.bar .progress'+_sclass+' span',container).text(per+" %"); } }); $('.track',container).bind('playing', function(e) { $('.bar .tracktime span',container).show(); }); // Is the player currently seeking? $('.track',container).bind('timeupdate', function() { if(isload.clickoffset) { $('.progress'+_sclass,container).trigger('click'); isload.clickoffset = false; return; } $('.tracktime',container).show(); var time = this.duration - this.currentTime; var m = Math.floor(time / 60); var s = Math.floor(time - (m * 60)); if(s < 10) s = '0'+s; if(m < 10) m = '0'+m; $('.tracktime span',container).text( m +':'+ s); var step = 250 / this.duration; $('.bar .progress'+_sclass+' .line'+_sclass,container).width((Math.floor(this.currentTime) * step)+'px'); if(Math.floor(this.duration) == Math.floor(this.currentTime)) { $('.playbut'+_sclass,container).removeClass('stop'+_sclass).addClass('play'+_sclass); $('.progress'+_sclass+' .line'+_sclass,container).width(0); $('.progress'+_sclass+' .tracktime',container).hide(); } }); $('.playbut'+_sclass,container).bind('click', function() { acteviHidden(_sclass); $('audio').removeClass('aa'); $('audio',container).addClass('aa'); if($(this).hasClass('stop'+_sclass)) { $(this).removeClass('stop'+_sclass).addClass('play'+_sclass); $('audio',container)[0].pause(); // jumps to 29th secs } else { $(this).removeClass('play'+_sclass).addClass('stop'+_sclass); $('audio:not(".aa")').each(function(index, element) { element.pause(); if(element.currentTime) { element.currentTime = 0; } $(this).siblings('.playbut_w').removeClass('stop_w').addClass('play_w'); $(this).siblings('.playbut_m').removeClass('stop_m').addClass('play_m'); }); $('.radio'+_sclass,container).addClass('radioactive'+_sclass); $('.radio_m').removeClass('radioactive_m'); $('.radio_w').removeClass('radioactive_w'); $('.radio_m').addClass('radionoactive_m'); $('.radio_w').addClass('radionoactive_w'); $('.radio'+_sclass,container).removeClass('radionoactive'+_sclass).addClass('radioactive'+_sclass); $('.bar .tracktime span').hide(); $('audio',container)[0].play(); // jumps to 29th secs $('.tracktime',container).removeClass('loadm'); } }); $('.progress'+_sclass,container).bind('click', function(event) { duration = audio.duration; //get the position of the event clientX = event.clientX; left = event.currentTarget.offsetLeft; clickoffset = clientX - left; if(isload.clickoffset) clickoffset = isload.clickoffset; percent = clickoffset/event.currentTarget.offsetWidth; duration_seek = percent*duration; if($('audio',container)[0].currentTime) { $('audio',container)[0].currentTime = duration_seek; } else { isload.clickoffset = clickoffset; $('.bar .progress'+_sclass+' .line'+_sclass,container).width(clickoffset+'px'); } //document.getElementById('track').currentTime = duration_seek; // jumps to 29th secs //document.getElementById('track').play(); // jumps to 29th secs }); $('.radio'+_sclass,container).bind('click', function() { r = $(this); acteviHidden(_sclass); $('audio').removeClass('aa'); $('audio',container).addClass('aa'); $('audio:not(".aa")').closest('.player').find('.playbut_w').removeClass('stop_w').addClass('play_w'); $('audio:not(".aa")').closest('.player').find('.playbut_m').removeClass('stop_m').addClass('play_m'); if(r.hasClass('radionoactive'+_sclass)) { $('.radio_w,.radio_m').removeClass('radioactive_w'); $('.radio_w,.radio_m').removeClass('radioactive_m'); $('.playbut'+_sclass,container).removeClass('play'+_sclass).addClass('stop'+_sclass); $('.radio_w').addClass('radionoactive_w'); $('.radio_m').addClass('radionoactive_m'); $('audio:not(".aa")').each(function(index, element) { element.pause(); element.currentTime = 0; }); $('audio',container)[0].play(); // jumps to 29th secs r.removeClass('radionoactive'+_sclass).addClass('radioactive'+_sclass); $('.bar .tracktime span').hide(); $('.tracktime').removeClass('loadm'); } }); } function acteviHidden(type) { type = type.substr(1,1); $('.conteinerofplayer input[name="voicetype"]').remove(); var hidden = $('<input>',{name:'voicetype',value:type,type:'hidden'}); $('.conteinerofplayer').append(hidden); } };

Методы плагина, запускаются следующим кодом, их два (init, remove), фактически в плигне используется один (init):

if (arg && typeof(arg) == 'string') { if (arg == 'init') { init( arg ); } else if (arg == 'remove') { remove( arg ); } return; }

Функция acteviHidden необходима для присоединения к форме скрытого элемента input, в котором будет содержаться значение типа плагина (m или w). Думаю эту функцию можно легко приспособить для создания других скрытых полей с нужной вам информацией, если Вам нужно использовать плееры как внутри тега form. Особое внимание я хотел бы уделить процессу буферизации данных, так как он отличается от обычных способов отслеживания загрузки файла. Для каждого плеера буферизация начинается с события $('.track',container).bind('progress'..... внутри которого данные о буфере помещаются в массив, который затем используется при расчётах процента загрузки аудио файла, ниже приведён код этого процесса:

$('.track',container).bind('progress', function(e) { var ranges = []; for(var i = 0; i < audio.buffered.length; i ++) { ranges.push([ audio.buffered.start(i), audio.buffered.end(i) ]); } d = audio.duration / 100; //$('.bar .tracktime span',container).hide(); //now iterate through the ranges and convert each set of timings //to a percentage position and width for the corresponding span allbufer = 0; for(var i = 0; i < audio.buffered.length; i ++) { allbufer += ranges[i][1]-ranges[i][0]; } //console.log(allbufer); per = Math.floor(allbufer / d); if(per > 0) { per = (per > 100) ? per ==100 : per; $('.bar .progress'+_sclass+' span',container).text(per+" %"); } }); Остальной код плеера связан с различными типами bind функций $('.track',container).bind('click',....., по просту говря эти функции отслеживают события нажатия графических элементов плеера, - старт, стоп, перемотка, чекбокс. Разобраться с ними Вам придётся самостоятельно, так как в них нет ничего сложно и они схожи по логике выполнения.