首页 > 其他分享 >vue实现音频列表,播放互斥

vue实现音频列表,播放互斥

时间:2022-11-10 16:04:51浏览次数:39  
标签:status index vue item 音频 audioSrcList 互斥 播放

用了最暴力的方法,直接遍历。先判断是否是需要播放的音频,不是的话再判断它是否正在播放,是的话就关掉这条音频。
没什么逻辑可言,但是不知道怎么控制这条音频关闭,花了点时间写。
关键就在于:
let name = this.audioSrcList[i].index;
this.$refs[name][0].pause();


具体如下:
audioSrcList里面放音频链接audioSrc,序号index,以及状态status。
状态都先默认为‘pause’
 1           <div v-for="(item, index) in audioSrcList" :key="index" @click="onClick(item)">
 2             <span class="audioTime">{{item.fileStartTime}}</span>
 3             <audio :ref="item.index"
 4                    @play="onPlay(item)"
 5                    @pause="onPause(item)"
 6                    @timeupdate="onTimeupdate"
 7                    @loadedmetadata="onLoadedmetadata"
 8                    :src="item.audioSrc"
 9                    controls="controls"
10                    style="width:100%;">
11             </audio>
12           </div>
13     
 audio: {           //该字段是音频是否处于播放状态的属性           playing: false,           //音频当前播放时长           currentTime: 0,           //音频最大播放时长           maxTime: 0,         },
 1       onPlay(item) {
 2         item.status = 'play';
 3         for (let i = 0; i < this.audioSrcList.length; i++) {
 4           if (item.index != this.audioSrcList[i].index) {
 5             // 不是当前需播放的音频
 6             if (this.audioSrcList[i].status === 'play') {
 7               // 但是在播放中,需暂停掉
 8               let name = this.audioSrcList[i].index;
 9               this.$refs[name][0].pause();
10             }
11           } else {
12             // 是当前需要播放的音频
16 } 17 } 18 }, 19 20 /** 21 * 当音频暂停 22 * */ 23 onPause(item) { 24 item.status = 'pause'; 25 },

 

标签:status,index,vue,item,音频,audioSrcList,互斥,播放
From: https://www.cnblogs.com/silvia-earl/p/16877313.html

相关文章

  • vuecli之dodo底部统计功能
    footer<template><divclass="todo-footer"><label><inputtype="checkbox"/></label><span>......
  • vue修改node_modules包代码部署提交
    1、安装patch-packagepatch-package包可以通过npm进行安装。npmipatch-package--save-dev或者也可以通过yarn进行安装。yarnadd--devpatch-packagepostinsta......
  • 【转】音频功放调试
    转自https://blog.csdn.net/u010783226/article/details/109095075一个手机的音乐效果的好坏,取决于喇叭(包括喇叭单体、音腔结构、出音孔、防尘网等),音频功放,音效算法调试(......
  • vuecli练习之添加一个todo操作
    涉及到三个组件 header<template><divclass="todo-header"><inputtype="text"placeholder="请输入你的任务名称,按回车键确认"@keyup.enter="add......
  • vue入门知识总结
    1.插值表达式{{}}  2.指令    2.1v-if、v-else、v-show、v-else-if      v-if:在切换过程中条件块内的事件监听器和子组件适当地被销毁和重......
  • vue v-for 使用
    html<divv-for="(item,index)informData.liuchengs":key="index"><el-form-itemlabel="流程:":prop="'liuchengs.'+index+'.no'":rules="{requ......
  • AR空间音频能力,打造沉浸式声音体验
    随着元宇宙的兴起,3D虚拟现实广泛引用,让数字化信息和现实世界融合,目前大家的目光主要聚焦于视觉交互层面,为了在虚拟环境中更好的再现真实世界的三维空间体验,引入听觉层面必......
  • ant design vue table报错h is not defined
    报错原因使用table时由于columns数据太多,所以将columns中的数据拆分到一个单独的常量js文件中,又因为需要使用customRender,里面有<a-tag>之类的标签,需要使用jsx进行渲染,因......
  • VUE WEB怎么实现大文件上传
    ​ javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用ajax向后端发请求    1.通过form表单向后端发送请求     ......
  • 《安富莱嵌入式周报》第290期:开源静电便携测试仪,开源音频功放,CAN高波特率设计,超级铁电
    往期周报汇总地址:http://www.armbbs.cn/forum.php?mod=forumdisplay&fid=12&filter=typeid&typeid=104 上周更新了一期视频教程:USB应用实战视频教程第4期:手把手玩转基......