原生JS實(shí)現(xiàn)小小的音樂播放器

<audio id="play1">
 <source src="auto/旅行.mp3"></source>
</audio>
<audio id="play2">
 <source src="auto/薛明媛,朱賀 - 非酋.mp3"></source>
</audio>
<audio id="play3">
 <source src="auto/楊宗緯 - 越過山丘.mp3"></source>
</audio>

play1=document.getElementById("play1");
play2=document.getElementById("play2");
play3=document.getElementById("play3");
play=[play1,play2,play3];

 //點(diǎn)擊播放、暫停
 function start(){
 minute=0;
 if(flag){
 imagePause();
 play[index].pause();
 }else{
 rotate();
 play[index].play();
 reducejindutiao();
 addtime();
 jindutiao();
 for (var i=0;i<play.length;i++) {
 audioall[i].style.color="white";
  }
 audioall[index].style.color="red";
 }
 }

//圖片旋轉(zhuǎn)，每30毫米旋轉(zhuǎn)5度
 function rotate(){
 var deg=0;
 flag=1;
 timer=setInterval(function(){
 image.style.transform="rotate("+deg+"deg)";
 deg+=5;
 if(deg>360){
 deg=0;
 }
 },30);
 }

function imagePause(){
 clearInterval(timer);
 flag=0;
 }

function jindutiao(){
 //獲取當(dāng)前歌曲的歌長
 var lenth=play[index].duration;
 timer1=setInterval(function(){
 cur=play[index].currentTime;//獲取當(dāng)前的播放時(shí)間
 fillbar.style.width=""+parseFloat(cur/lenth)*300+"px";
 },50)
}

//播放時(shí)間
 function addtime(){
 timer2=setInterval(function(){
 cur=parseInt(play[index].currentTime);//秒數(shù)
 var temp=cur;
 minute=parseInt(temp/60);
 if(cur%60<10){
 time.innerHTML=""+minute+":0"+cur%60+"";
 }else{
  time.innerHTML=""+minute+":"+cur%60+"";
  }
 },1000);
}

 //上一曲
 function reduce(){
  qingkong();
  reducejindutiao();
  pauseall();
  index--;
  if(index==-1){
  index=play.length-1;
  }
  start();
 }
 //下一曲
 function add(){
  qingkong();
  reducejindutiao();
  pauseall();
  index++;
  if(index>play.length-1){
  index=0;
  }
  start();
 }

 //點(diǎn)擊文字切歌
 function change(e){
  var musicName=e.target;
  //先清空所有的
  for (var i=0;i<audioall.length;i++) {
  audioall[i].style.color="white";
  if(audioall[i]==musicName){
  musicName.style.color="red";
  qingkong();
  reducejindutiao();
  pauseall();
  index=i;
  start();
  }
  }
 }

//將進(jìn)度條置0
 function reducejindutiao(){
 clearInterval(timer1);
 fillbar.style.width="0";
 }

 //音樂停止
 function pauseall(){
 for (var i=0;i<play.length;i++) {
  if(play[i]){
  play[i].pause();
  }
  }
 }

 function qingkong(){//清空所有的計(jì)時(shí)器
 imagePause();
 clearInterval(timer2);
 }

//調(diào)整播放進(jìn)度
 function adjust(e){
 var bar=e.target;
 var x=e.offsetX;
 var lenth=play[index].duration;
 fillbar.style.width=x+"px";
 play[index].currentTime=""+parseInt(x*lenth/300)+"";
 play[index].play();
}

 //調(diào)整音量大小
 function changeVolume(e){
 var x=e.offsetX+20;
 play[index].volume=parseFloat(x/200)*1;
 //改變按鈕的位置
 volume3.style.left=""+x+"px";
}

 //隨機(jī)播放歌曲
 function suiji(e){
  var img=e.target;
  img2.style.border="";
  img.style.border="1px solid red";
 }
 //順序播放
 function shunxu(e){
  var img=e.target;
  img1.style.border="";
  img.style.border="1px solid red";
  clearInterval(suijiplay);
  shunxuplay=setInterval(function(){
  if(play[index].ended){
  add();
  }
  },1000);
 }