此技术分享是在项目过程中处理音频、播放、暂停并添加动效时开发出来的，还有待代码精简，技术提高。不过基本功能完善具备实际项目的套用具体演示如下:

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 auido = new Au(document.querySelectorAll('audio')[0],'red');//创建audio实例传入audio标签和想要音频播放时要加入的class
methods : {
            key(v,i){//点击播放或者暂停
                this.$nextTick(()=>{
                    var skr = this.$refs['span'];
                    this.ar = i;
                    auido.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);
    }
};

其实内容到这里就结束了，但是为了能更好的直观的看此功能本博主录了一段视频。

 

 如发现有漏洞或者可编辑的代码请评论留言。为代码世界贡献多一份力量