先说明一下,内容是ueditor富文本,本来是只有一个音频的,后来按照产品需求,去掉一个音频的限制,结果在移动端发现,多个音频可以同时播放,这个就比较尴尬了,清理思路发现要实现这个效果就必须在渲染文本完成之后获取到所有的audio标签,在标签上面添加播放事件,当a、b、c三个audio标签中,a已经在播放,如果点击b播放之前我需要去关闭a标签的播放,这样就可以实现只有一个播放的修改。代码如下
1.在文本渲染之后获取到所有的audio标签,并且绑定了pauseAll()事件
vm.audioList = document.getElementsByTagName("audio");//获取到所有音频
if(vm.audioList.length>0){//给音频添加点击事件
// console.log(vm.audioList,"...",vm.articleInfo);
//想办法给所有的audio添加点击播放事件
// 给play事件绑定暂停函数
[].forEach.call(vm.audioList, function (i) {
i.addEventListener("play", vm.pauseAll.bind(i));
});
}
2.pauseAll()事件的具体实现,注意e.target才能获取到当前点击的audio标签就是js中的this标签
pauseAll: function(e){//多个音频点击的时候,禁止已经播放的,然后播放点击的
//
// console.log(e.target,"...",this);
var self = e.target;//获取到当前的点击的audio
[].forEach.call(this.audioList, function (i) {
// 将audios中其他的audio全部暂停
i !== self && i.pause();
})
}