JSFiddle - React, Tailwind, and code Playground

by easter bunny

HTML

<div style="border:1px solid black;background-color:orange;">
<input type="button" value="pause-btn" id="pause-btn">
<input type="button" value="mute" id="mute-btn">
<input type="button" value="change" id="change">
volume: <input type="range" max="1" min="0" value="50" step="0.1" id="volume" width="600px">
 <div style="width:360px;height:20px;background-color:#00FF00;"> <input type="range" max="100" min="0" value="0" step="0.1" id="seek" ></div>

time :<div id="ctime" style="width:70px;height:30px;border:1px solid black;background-color:white;">00</div>
total-time :<div id="ttime" style="width:70px;height:30px;border:1px solid black;background-color:white;"></span>

</div>

CSS

input#seek{
width:350px;

}

JavaScript

var arr=["d1.mp3","d2.mp3","d3.mp3","d4.mp3"];
function play(){
var i,Cmin,Csec,duration,tmin,tsec,audio,time,p,change,s,v,m,seekto;

  duration=document.getElementById("ttime");
 i=0;
audio=new Audio();


audio.loop=false;
audio.src=arr[i];
audio.play();
played=true;
muted=false;
 p=document.getElementById("pause-btn");
p.addEventListener('click',function(){ 

if(played){
audio.pause();
p.value="play-btn";
played=false;
}else{
audio.play();
p.value="pause-btn";
played=true;

}
},false);

 m=document.getElementById("mute-btn");
m.addEventListener("click",function(){
    if(!muted){
	audio.muted=true;
	m.value="non-mute";
	muted=true;
	}else{
	audio.muted=false;
	m.value="mute";
	muted=false;
	}
},false);
 v=document.getElementById("volume");
v.addEventListener("change",function(){
   audio.volume=v.value;
},false);
 s=document.getElementById("seek");
s.addEventListener("change",function(){
 seekto=audio.duration*s.value;
      audio.currentTime=seekto/100;
},false);


time=document.getElementById("ctime");
  audio.addEventListener("timeupdate",function(){
  Cmin=Math.floor(audio.currentTime/60);
  Csec=Math.floor(audio.currentTime-Cmin*60);
  time.innerHTML=Cmin+" : "+Csec;

  tmin=Math.floor(audio.duration/60);
  tsec=Math.floor(audio.duration-tmin*60);
  duration.innerHTML=tmin+" : "+tsec;




},false);
 change=document.getElementById("change");
change.addEventListener('click',function(){
i++;

if(i==4){i=0;}
audio.src=arr[i];
audio.play();
},false);
audio.addEventListener("timeupdate",function(){
	s.value=(audio.currentTime/audio.duration)*100;

	if(s.value==100){
	
	i++;
	if(i==4){
	i=0;
	 }

	
	
			  	audio.src=arr[i];
				alert(audio.duration);
				audio.play();
            
   
	
	 }
	
},false);
}
window.onload=play;