點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

js制作簡單的音樂播放器的示例代碼

來源：懂視網責編：小采時間：2020-11-27 22:31:36

js制作簡單的音樂播放器的示例代碼

js制作簡單的音樂播放器的示例代碼:一、設計目的： 1、隨著現在人民生活質量的提高同樣伴隨著生活壓力的增大，越來越多的人追求越來越多的娛樂，其中一種娛樂方式就是音樂，于是突發奇想，制作一個音樂播放器。 2、主要功能： 1 支持循環自動播放 2 支持圖片的旋轉 3 支持調整播放的位置，

推薦度：

點擊下載本文 文檔為doc格式

導讀js制作簡單的音樂播放器的示例代碼:一、設計目的： 1、隨著現在人民生活質量的提高同樣伴隨著生活壓力的增大，越來越多的人追求越來越多的娛樂，其中一種娛樂方式就是音樂，于是突發奇想，制作一個音樂播放器。 2、主要功能： 1 支持循環自動播放 2 支持圖片的旋轉 3 支持調整播放的位置，

一、設計目的：

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);
 }

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js制作簡單的音樂播放器的示例代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：制作播放音樂播放器

熱門焦點

js制作簡單的音樂播放器的示例代碼

js制作簡單的音樂播放器的示例代碼

js制作簡單的音樂播放器的示例代碼

最新推薦

猜你喜歡

熱門推薦