На днях решил проверить свои знания в JavaScript и написать аудиоплеер. Как по мне, результат получился хорошим, и я решил поделиться им с вами. Скажу сразу что это было сложновато с моими начальными знаниями js и jQuery. Перейдём сразу к делу.
Для начала создадим страницу, где будет сам плеер.
1. Добавим в массив названия всех файлов, которые лежат в папке music
<?php $files = glob('music/*'); ?> 2. Подключим к нашей странице jQuery и jQuery UI (для слайдера), а так же я подключил bootstrap иконки, чтобы не мучиться и не искать подходящие иконки по всему интернету.
3. Разберём названия файлов в массиве по кусочкам и добавим цикл for для создания списка воспроизведения
<?php for($i=0;$i<count($files);$i++){ $name=explode("/",$files[$i]); $name=$name[count($name)-1]; $ogg=explode(".og",$name); $name=explode(".mp3",$name); $name=$name[0]; $oggname=explode(".mp3",$files[$i]); $oggname=$oggname[0].".ogg"; if($ogg[1]=="g"){ $files[$i]=null; } if($files[$i]!=null){ ?> ...Тут будет наш плеер... <?php }?> Как вы видите я добавил переменную $ogg для добавления в плейлист помимо файла формата .mp3 ещё и формата .ogg.
4. Добавляем тег с нашими элементами управления
<div style="width:440px;"><?=$name;?> <audio id="audio_<?=$i;?>" tabindex="0"> <source src="<?=$files[$i];?>"> <?php if($files[$i-1]==null){?> <source src="<?=$oggname;?>"> <?php }?> <p>Ваш браузер не поддерживает HTML5 для прослушивания данной аудиозаписи</p> </audio> <table style="width:440px;"> <tr> <td style="width:40px;"> <i class="icon-play" onclick="play(<?=$i;?>);" id="play_<?=$i;?>"></i> <i class="icon-stop" onclick="stop(<?=$i;?>);" id="stop_<?=$i;?>"></i> </td> <td style="width:300px"> <div id="slider_<?=$i;?>" style="margin-left:5px;"></div> </td> <td style="width:40px;"> <div class="muted" style="font-size:9px;"> <span id="currentTime_<?=$i;?>"></span> <span id="totalTime_<?=$i;?>"></span> </div > </td> <td style="width:80px"> <div id="slider-vol_<?=$i;?>" style="margin-left:5px;"></div> </td> <td style="width:20px;"> <div class="muted" style="font-size:9px;"> <span id="vol_<?=$i;?>"></span></div > </td> </tr> </table> <hr> </div> В этом коде определённому треку присваивается id `audio_<?=$i;?>` и трек воспроизводится функцией onclick=«play(<?=$i;?>);». Так же для слайдера воспроизведения присваивается id slider_<?=$i;?>, и для слайдера громкости присваивается id vol_<?=$i;?>.
5. И вот наконец код самого плеера
var id; var p=0; var curT=0; var vol=70; function play(id){ $('audio').get(0).pause(); $('#audio_'+id).get(0).volume=vol/100; $(".icon-pause").addClass("icon-play").removeClass("icon-pause"); if(p==0){ $("#play_"+id).removeClass("icon-play").addClass("icon-pause"); $('#currentTime_'+id).html($('#audio_'+id).get(0).play()); p=1; }else{ $("#play_"+id).removeClass("icon-pause").addClass("icon-play"); $('#currentTime_'+id).html($('#audio_'+id).get(0).pause()); p=0; } var interval = setInterval(function(){ if(!isNaN(Math.round($('#audio_'+id).get(0).currentTime))){ var s=Math.round($('#audio_'+id).get(0).currentTime); var d = (s-(s%86400))/86400; var h = ((s-d*86400)-(s-d*86400)%3600)/3600; if(h<=9){h="0"+h;} var m = ((s-(s%60))-(d*86400+h*3600))/60; if(m<=9){m="0"+m;} var s = (s-(d*86400+h*3600+m*60)); if(s<=9){s="0"+s;} } $('#currentTime_'+id).html(m+":"+s+"/"); if(!isNaN(Math.round($('#audio_'+id).get(0).duration))){ var s=Math.round($('#audio_'+id).get(0).duration); var d = (s-(s%86400))/86400; var h = ((s-d*86400)-(s-d*86400)%3600)/3600; if(h<=9){h="0"+h;} var m = ((s-(s%60))-(d*86400+h*3600))/60; if(m<=9){m="0"+m;} var s = (s-(d*86400+h*3600+m*60)); if(s<=9){s="0"+s;} } $('#totalTime_'+id).html(m+":"+s); $( "#slider_"+id ).slider({ range: "min", min: 0, max: $('#audio_'+id).get(0).duration, value: 0, slide: function( event, ui ) { $('#audio_'+id).get(0).currentTime=ui.value; } }); $( "#slider-vol_"+id ).slider({ range: "min", min: 0, max: 100, value: $('#audio_'+id).get(0).volume*100, slide: function( event, ui ) { $( "#vol_"+id ).html( ui.value+"%" ); $('#audio_'+id).get(0).volume=(ui.value/100); } }); vol=Math.round($('#audio_'+id).get(0).volume*100); $( "#vol_"+id ).html( vol+"%" ); var width=eval($('#audio_'+id).get(0).currentTime/$('#audio_'+id).get(0).duration*100); $("#slider_"+id).find(".ui-slider-range").css("width",width+"%"); $("#slider_"+id).find(".ui-slider-handle").css("left",width+"%"); curT=Math.round($('#audio_'+id).get(0).currentTime); if(width==100){ $("#play_"+id).removeClass("icon-pause").addClass("icon-play"); p=0; play(id+1); clearInterval( interval ); width=0; } },400); } function stop(idd){ $('#currentTime_'+idd).html("0/"); $('#audio_'+idd).get(0).currentTime=0; $("#play_"+idd).removeClass("icon-pause").removeClass("icon-play").addClass("icon-play"); p=0; } Давайте подробнее разберём этот код
function play(id) — функция воспроизведения трека с определённым id
$('audio').get(0).pause(); $('#audio_'+id).get(0).volume=vol/100; $(".icon-pause").addClass("icon-play").removeClass("icon-pause"); if(p==0){ $("#play_"+id).removeClass("icon-play").addClass("icon-pause"); $('#currentTime_'+id).html($('#audio_'+id).get(0).play()); p=1; }else{ $("#play_"+id).removeClass("icon-pause").addClass("icon-play"); $('#currentTime_'+id).html($('#audio_'+id).get(0).pause()); p=0; } В этом коде мы ставим все другие воспроизводившиеся треки на паузу, задаём громкость этому треку ту же, что была до этого трека (если не было то берём из переменной vol = 70;), меняем иконку при воспроизведении и воспроизводим/ставим на паузу данный трек.
Далее мы задаём интервал var interval = setInterval(function(){ и преобразуем длительность и текущее время трека из секунд в минуты, часы… (код повторяем дважды)
if(!isNaN(Math.round($('#audio_'+id).get(0).currentTime))){ var s=Math.round($('#audio_'+id).get(0).currentTime); var d = (s-(s%86400))/86400; var h = ((s-d*86400)-(s-d*86400)%3600)/3600; if(h<=9){h="0"+h;} var m = ((s-(s%60))-(d*86400+h*3600))/60; if(m<=9){m="0"+m;} var s = (s-(d*86400+h*3600+m*60)); if(s<=9){s="0"+s;} } и задаём нашим div’ам данное время $('#currentTime_'+id).html(m+":"+s+"/"); и общее время $('#totalTime_'+id).html(m+":"+s); воспроизведения
Далее инициализируем наши слайдеры
$( "#slider_"+id ).slider({ range: "min", min: 0, max: $('#audio_'+id).get(0).duration, value: 0, slide: function( event, ui ) { $('#audio_'+id).get(0).currentTime=ui.value; } }); $( "#slider-vol_"+id ).slider({ range: "min", min: 0, max: 100, value: $('#audio_'+id).get(0).volume*100, slide: function( event, ui ) { $( "#vol_"+id ).html( ui.value+"%" ); $('#audio_'+id).get(0).volume=(ui.value/100); } }); vol=Math.round($('#audio_'+id).get(0).volume*100); $( "#vol_"+id ).html( vol+"%" ); Узнаём сколько процентов трека воспроизведено и передаём эти данные слайдеру
var width=eval($('#audio_'+id).get(0).currentTime/$('#audio_'+id).get(0).duration*100); $("#slider_"+id).find(".ui-slider-range").css("width",width+"%"); $("#slider_"+id).find(".ui-slider-handle").css("left",width+"%"); Когда у нас трек проигран полностью, то мы ставим его на паузу, меняем иконку, останавливаем интервал (чтобы не нагружать наш браузер лишними командами) и воспроизводим следующий трек
if(width==100){ $("#play_"+id).removeClass("icon-pause").addClass("icon-play"); p=0; play(id+1); clearInterval( interval ); width=0; } И последняя на сегодня функция function stop(idd) которая полностью останавливает трек и переводит его в начальную позицию
function stop(idd){ $('#currentTime_'+idd).html("0/"); $('#audio_'+idd).get(0).currentTime=0; $("#play_"+idd).removeClass("icon-pause").removeClass("icon-play").addClass("icon-play"); p=0; } Данный плеер был проверен в браузерах Chrome, Mozilla Firefox, IE 9, Opera
Всем спасибо за внимание. Если вы хотите что-то предложить новое, или исправить мой код, то пишите в комментариях.
ссылка на оригинал статьи http://habrahabr.ru/post/178847/
Добавить комментарий