首頁  >  文章  >  web前端  >  原生JS做出一個音樂播放器

原生JS做出一個音樂播放器

php中世界最好的语言
php中世界最好的语言原創
2018-04-17 14:26:275326瀏覽

這次帶給大家原生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中文网其它相关文章!

推荐阅读:

Vue中computed属性的使用方法

ajax与跨域jsonp

用requireJS添加返回顶部功能

以上是原生JS做出一個音樂播放器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn