一、設計目的：
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); }二、實現通過進度條來調整歌曲的播放位置：
首先應該理清一下邏輯：當點擊進度條的時候，滾動條的寬度應該跟鼠標的offsetX一樣長，然后根據進度條的長度來調整聽該顯示的時間
(1) 給滾動條的div添加一個事件，當滾動條長度變化的時候歌曲的當前播放的時間調整，300是滾動條的總長度
function adjust(e){ var bar=e.target; var x=e.offsetX; varlenth=play[index].duration; fillbar.style.width=x+"px"; play[index].currentTime=""+parseInt(x*lenth/300)+""; play[index].play(); }(2) 改變聲音大小的滾動條，跟改變播放時間類似，利用volume屬性（值為零到一）
function changeVolume(e){ var x=e.offsetX+20; play[index].volume=parseFloat(x/200)*1; //改變按鈕的位置 volume3.style.left=""+x+"px"; }(3)隨機跟順序播放音樂
順序播放音樂的時候，直接index++當index的范圍超過歌曲的長度的時候，index=0重新開始。隨機播放的函數類似，當歌曲播放完畢的時候，隨機產生一個0到play.length的數字就可以了
functionshunxu(e){ var img=e.target; img1.style.border=""; img.style.border="1pxsolid red"; clearInterval(suijiplay); shunxuplay=setInterval(function(){ if(play[index].ended){ add(); } },1000); }以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
