原生JS實現音樂播放器！

  前  言

          

最近在複習JS，以爲音樂播放器是個挺有意思的東西，今天就來用咱們最原生的JS寫一個小小的音樂播放器~

主要功能：

       一、支持循環、隨機播放

　　二、在播放的同時支持圖片的旋轉

       三、支持點擊進度條調整播放的位置，以及調整音量

       四、顯示音樂的播放時間

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

 

添加音樂有兩種方式：

①能夠用一個audo標籤，這樣應該把音樂的地址存放到一個數組中；

②第二種方式是，有幾首歌就添加幾個audo標籤，而後獲取全部的背景音樂(示例中咱們先添加三首音樂，放到一個數組中，固然，你們能夠挑選本身喜歡的任何歌曲）。

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

 首選咱們應該清楚的是，在點擊按鈕播放的時候應該實現的有：

①音樂開始播放；

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

③圖片開始隨歌曲播放旋轉；

④播放時間開始計時；

那麼相對應的，再次點擊播放按鈕的時候，咱們就可讓它實現暫停：

①歌曲暫停；

②讓進度條同時暫停；

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

④圖片中止旋轉；

注意：上述開始暫停操做必定要同步！

理清楚咱們的思路之後，就能夠來一 一實現了~

點擊播放/暫停

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

由於播放和暫停在同一個按鈕上，因此都會調用上述方法，咱們來詳細看一下各個函數都實現了怎樣的功能：

圖片旋轉

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

上述是圖片轉動的函數，當音樂播放的時候調用rotate（）函數，就能夠實現圖片的旋轉！

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

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

這樣圖片旋轉的功能咱們就已經實現了~

進度條

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

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

這樣，進度條就完成啦~

播放時間

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

                //播放時間
                function addtime(){
                    timer2=setInterval(function(){
                        cur=parseInt(play[index].currentTime);//秒數
                        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切歌

我作了兩種方式實現切歌：

①點擊上一曲、下一曲按鈕實現切歌；

                //上一曲
                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();
                }

②點擊歌名，實現歌曲的切換；

                //點擊文字切歌
                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點擊進度條調整播放進度及音量

首先應該理清一下邏輯：當點擊進度條的時候，滾動條的寬度應該跟鼠標的offsetX同樣長，而後根據進度條的長度來調整聽該顯示的時間。

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

                //調整播放進度
                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屬性（值爲零到一）；

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

4隨機、循環播放

循環播放音樂的時候，直接index++當index的範圍超過歌曲的長度的時候，index=0從新開始。隨機播放的函數相似，當歌曲播放完畢的時候，隨機產生一個0到play.length的數字就能夠了。

 

                //隨機播放歌曲
                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);
                }
    

 

這樣咱們整個音樂播放器就完成了，你們能夠本身寫一個好看的界面，就更完美了~