标签：function el auido index 音频 js Au 播放

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

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

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

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

标签：function,el,auido,index,音频,js,Au,播放
来源： https://www.cnblogs.com/blur-king/p/13180846.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。