js——封裝音頻播放 暫停

此技術分享是在項目過程當中處理音頻、播放、暫停並添加動效時開發出來的，還有待代碼精簡，技術提升。不過基本功能完善具有實際項目的套用具體演示以下:

html部分(這裏咱們模擬是三大框架的vue)

<div class="box">
            <ul ref="ul"  class="ul">
                <span class="a" ref="span" @click="key(v,i)" v-for="(v,i) in obj">{{v.name}}</span>
            </ul>
        </div>
        <audio  controls="controls" ></audio>

css部分

*{
            margin:0;
            padding: 0;
            list-style: none;
        }
        body{
            height: 80vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            width: 300px;
            height: 600px;
            border: 1px solid red;
            box-sizing: border-box;
            overflow: auto;
        }
        span{
            display: block;
            width: 100%;
            text-align: center;
            line-height: 50px;
            background: cadetblue;
        }
        .red{
            background: red;
        }

js部分：

在建立vue實例以前建立一個audio實例Au構造函數是本次的關鍵

var au_do = new Au(document.querySelectorAll('audio')[0],'red');//建立au_io實例傳入audio標籤和想要音頻播放時要加入的class
methods : {
            key(v,i){//點擊播放或者暫停
                this.$nextTick(()=>{
                    var skr = this.$refs['span'];
                    this.ar = i;
                    au_do.plays(skr,i,v);//這裏面是原型的方法此方法調用一次便可完成暫停、切換、播放的功能(這串代碼是關鍵)。
　　　　　　　　　　　　　其中skr爲真實dom上全部的span元素節點，i是索引，v是值
                    });
            },
}

Au構造函數 :

function Au(data,clas) {
    this.auido = data;
    this.clas = clas
}
Au.prototype = {
    constructor : Au,
    plays :function (el,index,value,) {
        this.el = el;
        if(this.index==index){//同樣的
            this.lis(index,el);
            return
        }
        this.auido.src = value.src;
        this.lis(index,el,this.index);//進行播放
        this.index = index;
        this.addlisn_end();//進行監聽是否暫停或者結束
    },
    lis : function (i,arr,v) {//播放or暫停
        if(v!=undefined){
            this.ous(v,arr);
        }
      if(this.auido.paused){
          this.auido.play();//播放
          arr[i].classList.add(this.clas);
          return
      }
          this.auido.pause();
    },
    addlisn_end : function () {//監聽到播放結束後，在此處可調用本身的接口
        var that = this;
        this.auido.addEventListener('pause', function () {//暫停
            that.ous(that.index,that.el);
        }, false);
    },
    ous : function (i,arr) {
        arr[i].classList.remove(this.clas);
    }
};

其實內容到這裏就結束了，可是爲了能更好的直觀的看此功能本博主錄了一段視頻。

 

 如發現有漏洞或者可編輯的代碼請評論留言。爲代碼世界貢獻多一份力量