原生JS做出一個音樂播放器-js教程-PHP中文網

這次帶給大家原生JS做出一個音樂播放器，原生JS做出一個音樂播放器的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言

## 最近在複習JS，覺得音樂播放器是個蠻有趣的東西，今天就來用我們最原生的JS寫一個小小的音樂播放器~

# 主要功能：

1、支援循環、隨機播放

2、在播放的同時支援圖片的旋轉

# 3、支援點選進度條調整播放的位置，以及調整音量

# 4、顯示音樂的播放時間

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

# 新增音樂有兩種方式：

①可以用一個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;
 }

登入後複製

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

進度條

# 先定義兩個寬度長度大小一樣顏色不同的兩個p，利用currenttime屬性來過去目前的播放的時間，設一個p一開始的長度為零，然後透過目前播放的事件來調整p長度大小就能達到滾動條的效果了。

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

登入後複製

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

將進度條捲動的計時器清除掉，然後p的長度還原為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) 给滚动条的p添加一个事件，当滚动条长度变化的时候歌曲的当前播放的时间调整，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);
        }

登入後複製

这样我们整个音乐播放器就完成了，大家可以自己写一个好看的界面，就更完美了

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！