溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、設計目的：
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);
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
