一、設計目的：

1、隨著現在人民生活質量的提高同樣伴隨著生活壓力的增大，越來越多的人追求越來越多的娛樂，其中一種娛樂方式就是音樂，于是突發奇想，制作一個音樂播放器。

2、主要功能：

1 支持循環自動播放

2 支持圖片的旋轉

3 支持調整播放的位置，以及調整聲音的大小

4 歌詞滾動效果

5 每秒顯示音樂的播放時間

二 、設計思路：

1、向瀏覽器中添加背景音樂：

首先應該向網頁中添加幾首好聽的背景音樂。添加音樂有，兩種方式可以用一個audo標簽，這樣應該把音樂的地址存放到一個數組中，第二種方式是，有幾首歌就添加幾個audo標簽，然后獲取所有的北京音樂(先添加三首音樂，放到一個數組中）；

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

1、播放音樂的時候圖片驚醒旋轉

2、播放音樂的時候滾動條滾動

3、播放音樂的時候是事件隨著背景音樂的播放時間增加

圖片轉動的函數，當音樂播放的時候調用rotate（）函數

 functionrotate(){         vardeg=0;         flag=1;         timer=setInterval(function(){           image.style.transform="rotate("+deg+"deg)";           deg+=5;           if(deg>360){            deg=0;           }         },30);       }

清除定時器的函數，當音樂暫停的時候調用imagePause()，圖片旋轉的定時器被清除掉

  functionimagePause(){         clearInterval(timer);         flag=0;       }

2：先定義兩個寬度長度大小一樣顏色不同的兩個div，利用currenttime屬性來過去當前的播放的時間，設一個div一開始的長度為零，然后通過當前播放的事件來調整div長度大小就能實現滾動條的效果了。

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

將進度條滾動的定時器清除掉，然后div的長度還原為0；

function reducejindutiao(){         clearInterval(timer1);         fillbar.style.width="0";       }

3，背景音樂的播放時間也是利用currenttime來隨時改變，不過應該注意currenttime的計時單位為秒

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