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

快捷導(dǎo)航

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

更新時(shí)間：2017年10月16日 08:59:27 作者：一個(gè)檸檬

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

前言

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

主要功能：

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

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

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

4、顯示音樂(lè)的播放時(shí)間

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

添加音樂(lè)有兩種方式：

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

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

<audio id="play1">
   <source src="auto/旅行.mp3"></source>
</audio>
<audio id="play2">
   <source src="auto/薛明媛,朱賀 - 非酋.mp3"></source>
</audio>
<audio id="play3">
   <source src="auto/楊宗緯 - 越過(guò)山丘.mp3"></source>
</audio>

play1=document.getElementById("play1");
play2=document.getElementById("play2");
play3=document.getElementById("play3");
play=[play1,play2,play3];

1點(diǎn)擊播放、暫停

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

①音樂(lè)開始播放；

②進(jìn)度條開始隨歌曲的播放往前走；

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

④播放時(shí)間開始計(jì)時(shí)；

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

①歌曲暫停；

②讓進(jìn)度條同時(shí)暫停；

③讓播放時(shí)間計(jì)時(shí)同時(shí)暫停；

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

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

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

點(diǎn)擊播放/暫停

 //點(diǎ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";
     }
 }

因?yàn)椴シ藕蜁和Ｔ谕粋€(gè)按鈕上，所以都會(huì)調(diào)用上述方法，我們來(lái)詳細(xì)看一下各個(gè)函數(shù)都實(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)動(dòng)的函數(shù)，當(dāng)音樂(lè)播放的時(shí)候調(diào)用rotate（）函數(shù)，就可以實(shí)現(xiàn)圖片的旋轉(zhuǎn)！

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

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

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

進(jìn)度條

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

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

這樣，進(jìn)度條就完成啦~

播放時(shí)間

音樂(lè)的播放時(shí)間也是利用currenttime來(lái)隨時(shí)改變，不過(guò)應(yīng)該注意currenttime的計(jì)時(shí)單位為秒。

//播放時(shí)間
   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切歌
我做了兩種方式實(shí)現(xiàn)切歌：

①點(diǎn)擊上一曲、下一曲按鈕實(shí)現(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();
        }

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

 //點(diǎ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();
            }
          }
        }

注意：在切歌時(shí)不要忘了我們的進(jìn)度條！

將進(jìn)度條滾動(dòng)的定時(shí)器清除掉，然后div的長(zhǎng)度還原為0；

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

同時(shí)音樂(lè)停止：

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

清空所有定時(shí)器：

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

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

首先應(yīng)該理清一下邏輯：當(dāng)點(diǎn)擊進(jìn)度條的時(shí)候，滾動(dòng)條的寬度應(yīng)該跟鼠標(biāo)的offsetX一樣長(zhǎng)，然后根據(jù)進(jìn)度條的長(zhǎng)度來(lái)調(diào)整聽(tīng)該顯示的時(shí)間。

(1) 給滾動(dòng)條的div添加一個(gè)事件，當(dāng)滾動(dòng)條長(zhǎng)度變化的時(shí)候歌曲的當(dāng)前播放的時(shí)間調(diào)整，300是滾動(dòng)條的總長(zhǎng)度；

//調(diào)整播放進(jìn)度
 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) 改變音量的滾動(dòng)條，跟改變播放時(shí)間類似，利用volume屬性（值為零到一）；

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

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

JavaScript事件委托技術(shù)實(shí)例分析
這篇文章主要介紹了JavaScript事件委托技術(shù),實(shí)例分析了事件委托技術(shù)的原理、適用場(chǎng)合及用法實(shí)例,需要的朋友可以參考下
2015-02-02
微信公眾號(hào)weixin-js-sdk使用方法總結(jié)
最近做了一個(gè)活動(dòng)頁(yè)面,需要自定義微信分享的標(biāo)題、詳情、縮略圖和url,使用到了jssdk,這篇文章主要給大家介紹了關(guān)于微信公眾號(hào)weixin-js-sdk使用方法的相關(guān)資料,需要的朋友可以參考下
2022-12-12
js圖片切換具體實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片切換代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
分享JavaScript獲取網(wǎng)頁(yè)關(guān)閉與取消關(guān)閉的事件
這篇文章主要介紹了JavaScript獲取網(wǎng)頁(yè)關(guān)閉與取消關(guān)閉的事件，有需要的朋友可以參考一下
2013-12-12
本篇文章給大家分享的是有關(guān)微信小程序分頁(yè)查詢的實(shí)現(xiàn)，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。
2022-08-08

JavaScript簡(jiǎn)單實(shí)現(xiàn)合并兩個(gè)Json對(duì)象的方法示例

這篇文章主要介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)合并兩個(gè)Json對(duì)象的方法,結(jié)合實(shí)例形式分析了json對(duì)象的遍歷、添加實(shí)現(xiàn)合并的相關(guān)操作技巧,需要的朋友可以參考下

2017-10-10

JS實(shí)現(xiàn)的點(diǎn)擊表頭排序功能示例

這篇文章主要介紹了JS實(shí)現(xiàn)的點(diǎn)擊表頭排序功能,可實(shí)現(xiàn)針對(duì)表格中的字母、數(shù)字、日期等格式進(jìn)行排序的功能,涉及javascript針對(duì)頁(yè)面table元素的獲取及字符串、數(shù)字等排序操作相關(guān)技巧,需要的朋友可以參考下

2017-03-03