Доброго времени суток, читатели.
На днях решил проверить свои знания в 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
Всем спасибо за внимание. Если вы хотите что-то предложить новое, или исправить мой код, то пишите в комментариях.
Автор: Dinir102
Лучше 1 раз увидеть, чем 100 раз услышать (тем более читать :)
Привет! можно исходник выложить?
Кто нибудь устанавливал? Исходники бы прочитать..
Как выглядит ?