腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

原生JS實現(xiàn)小小的音樂播放器

更新時間：2017年10月16日 08:59:27 作者：一個檸檬

這篇文章主要為大家詳細介紹了原生JS實現(xiàn)音樂播放器，支持循環(huán)、隨機播放，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

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

主要功能：

1、支持循環(huán)、隨機播放

　　2、在播放的同時支持圖片的旋轉(zhuǎn)

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

4、顯示音樂的播放時間

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

添加音樂有兩種方式：

①可以用一個audo標簽，這樣應(yīng)該把音樂的地址存放到一個數(shù)組中；

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

<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點擊播放、暫停

首選我們應(yīng)該清楚的是，在點擊按鈕播放的時候應(yīng)該實現(xiàn)的有：

①音樂開始播放；

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

③圖片開始隨歌曲播放旋轉(zhuǎn)；

④播放時間開始計時；

那么相對應(yīng)的，再次點擊播放按鈕的時候，我們就可以讓它實現(xiàn)暫停：

①歌曲暫停；

②讓進度條同時暫停；

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

④圖片停止旋轉(zhuǎn)；

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

理清楚我們的思路以后，就可以來一一實現(xiàn)了~

點擊播放/暫停

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

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

圖片旋轉(zhuǎn)

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

上述是圖片轉(zhuǎn)動的函數(shù)，當音樂播放的時候調(diào)用rotate（）函數(shù)，就可以實現(xiàn)圖片的旋轉(zhuǎn)！

同樣清除定時器的函數(shù)，當音樂暫停的時候調(diào)用imagePause()，圖片旋轉(zhuǎn)的定時器被清除掉：

function imagePause(){
    clearInterval(timer);
    flag=0;
 }

這樣圖片旋轉(zhuǎn)的功能我們就已經(jīng)實現(xiàn)了~

進度條

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

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

這樣，進度條就完成啦~

播放時間

音樂的播放時間也是利用currenttime來隨時改變，不過應(yīng)該注意currenttime的計時單位為秒。

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

2切歌
我做了兩種方式實現(xiàn)切歌：

①點擊上一曲、下一曲按鈕實現(xiàn)切歌；

 //上一曲
  function reduce(){
          qingkong();
          reducejindutiao();
          pauseall();
          index--;
          if(index==-1){
            index=play.length-1;
          }
          start();
        }
        //下一曲
        function add(){
          qingkong();
          reducejindutiao();
          pauseall();
          index++;
          if(index>play.length-1){
            index=0;
          }
          start();
        }

②點擊歌名，實現(xiàn)歌曲的切換；

 //點擊文字切歌
        function change(e){
          var musicName=e.target;
          //先清空所有的
          for (var i=0;i<audioall.length;i++) {
            audioall[i].style.color="white";
            if(audioall[i]==musicName){
              musicName.style.color="red";
              qingkong();
              reducejindutiao();
              pauseall();
              index=i;
              start();
            }
          }
        }

注意：在切歌時不要忘了我們的進度條！

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

//將進度條置0
 function reducejindutiao(){
     clearInterval(timer1);
      fillbar.style.width="0";
 }

同時音樂停止：

 //音樂停止
   function pauseall(){
        for (var i=0;i<play.length;i++) {
            if(play[i]){
              play[i].pause();
            }
          }
        }

清空所有定時器：

 function qingkong(){//清空所有的計時器
    imagePause();
    clearInterval(timer2);
 }

3點擊進度條調(diào)整播放進度及音量

首先應(yīng)該理清一下邏輯：當點擊進度條的時候，滾動條的寬度應(yīng)該跟鼠標的offsetX一樣長，然后根據(jù)進度條的長度來調(diào)整聽該顯示的時間。

(1) 給滾動條的div添加一個事件，當滾動條長度變化的時候歌曲的當前播放的時間調(diào)整，300是滾動條的總長度；

//調(diào)整播放進度
 function adjust(e){
   var bar=e.target;
   var x=e.offsetX;
   var lenth=play[index].duration;
   fillbar.style.width=x+"px";
   play[index].currentTime=""+parseInt(x*lenth/300)+"";
   play[index].play();
}

(2) 改變音量的滾動條，跟改變播放時間類似，利用volume屬性（值為零到一）；

 //調(diào)整音量大小
  function changeVolume(e){
    var x=e.offsetX+20;
    play[index].volume=parseFloat(x/200)*1;
    //改變按鈕的位置
     volume3.style.left=""+x+"px";
}

4隨機、循環(huán)播放

循環(huán)播放音樂的時候，直接index++當index的范圍超過歌曲的長度的時候，index=0重新開始。隨機播放的函數(shù)類似，當歌曲播放完畢的時候，隨機產(chǎn)生一個0到play.length的數(shù)字就可以了。

 //隨機播放歌曲
  function suiji(e){
          var img=e.target;
          img2.style.border="";
          img.style.border="1px solid red";
        }
        //順序播放
        function shunxu(e){
          var img=e.target;
          img1.style.border="";
          img.style.border="1px solid red";
          clearInterval(suijiplay);
          shunxuplay=setInterval(function(){
            if(play[index].ended){
              add();
            }
          },1000);
        }

這樣我們整個音樂播放器就完成了，大家可以自己寫一個好看的界面，就更完美了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: