前  言         

最近在復習JS，覺得音樂播放器是個挺有意思的東西，今天就來用我們最原生的JS寫一個小小的音樂播放器~

主要功能：

       1、支持循環、隨機播放

　　2、在播放的同時支持圖片的旋轉

       3、支持點擊進度條調整播放的位置，以及調整音量

       4、顯示音樂的播放時間

       5、支持切歌：上一首、下一首、點擊歌名切歌；暫停播放等~

添加音樂有兩種方式：

①可以用一個audo標簽，這樣應該把音樂的地址存放到一個數組中；

②第二種方式是，有幾首歌就添加幾個audo標簽，然后獲取所有的背景音樂(示例中我們先添加三首音樂，放到一個數組中，當然，大家可以挑選自己喜歡的任何歌曲）。

<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];

1點擊播放、暫停

首選我們應該清楚的是，在點擊按鈕播放的時候應該實現的有：

①音樂開始播放；

②進度條開始隨歌曲的播放往前走；

③圖片開始隨歌曲播放旋轉；

④播放時間開始計時；

那么相對應的，再次點擊播放按鈕的時候，我們就可以讓它實現暫停：

①歌曲暫停；

②讓進度條同時暫停；

③讓播放時間計時同時暫停；

④圖片停止旋轉；

注意：上述開始暫停操作一定要同步！

理清楚我們的思路以后，就可以來一 一實現了~

點擊播放/暫停

 //點擊播放、暫停  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";     } }

因為播放和暫停在同一個按鈕上，所以都會調用上述方法，我們來詳細看一下各個函數都實現了怎樣的功能：

圖片旋轉

//圖片旋轉，每30毫米旋轉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); }