vue实现音频audio列表循环,实现暂停播放切换

功能界面如下
循环渲染音频

功能使用如下:

  1. 首先根据后端返回的音频地址进行渲染,其中playAudioSrc字段用来控制暂停样式还是播放样式,audio进行隐藏
<ul class="virtualAvararFooterRightContentAudio">
    <li v-for="($item,$index) in virtualAvatarAudio" :key="$index" :style="{'border':(virtualAvatarFooterAudioIndex == $index) ? '1px solid #fff' :'none'}" @click.stop="selectVirtualAvatarAudio($item,$index)">
        <img @click="virtualAvatarPlayAudio($item,$index)":src="$item.playAudioSrc ? require('../assets/img/ai/audioBf.png') : require('../assets/img/ai/voice.png')" alt="">
      	<div>
             <p>{{$item.name}}</p>
          	 <!-- <span>0.26s</span> -->
         </div>
         <audio class="virtualAudio" :src="$item.path" style="display:none" :ref="'audio'+$index" controls></audio>
     </li>
 </ul>
  1. vue处理逻辑如下
   virtualAvatarPlayAudio(item,index){
            const audiosDom = document.getElementsByClassName('virtualAudio');
            let audios = [...audiosDom]
            if(item.playAudioSrc){
                //暂停该音频播放
                item.playAudioSrc = false
                // this.playAudio1.pause()
                audiosDom[index].pause()
            }else{
                //播放音频
                item.playAudioSrc = true
                audiosDom[index].play()
                audios.forEach((item_,index_)=>{
                    if(index_ != index){
                        //其他的音频
                        audiosDom[index_].pause()
                    }
                })
                //其他的音频暂停样式书写
                this.virtualAvatarAudio.forEach((item__,index__)=>{
                    if(index__ != index){
                        item__.playAudioSrc = false
                    }
                })
                //监听当前音频播放完毕后,使当前音频更改为暂停样式
                audios[index].addEventListener('ended', ()=> {
                    item.playAudioSrc = false
                }, false);
                 
            }
        },

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值