Аудиоплеер с плейлистом на HTML5

в 7:49, , рубрики: .net, html, html5, javascript, php, всё равно никто не читает теги, плеер, метки: , , , , , ,

Доброго времени суток, читатели.

На днях решил проверить свои знания в 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. A:

    Лучше 1 раз увидеть, чем 100 раз услышать (тем более читать :)

  2. Алекс:

    Привет! можно исходник выложить?

  3. Артем:

    Кто нибудь устанавливал? Исходники бы прочитать..

  4. аендрей:

    Как выглядит ?

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js