功能界面如下

功能使用如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-516148.html

1. 首先根據(jù)后端返回的音頻地址進(jìn)行渲染，其中playAudioSrc字段用來控制暫停樣式還是播放樣式，audio進(jìn)行隱藏

<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>

2. 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
                    }
                })
                //監(jiān)聽當(dāng)前音頻播放完畢后，使當(dāng)前音頻更改為暫停樣式
                audios[index].addEventListener('ended', ()=> {
                    item.playAudioSrc = false
                }, false);
                 
            }
        },

到了這里，關(guān)于vue實(shí)現(xiàn)音頻audio列表循環(huán)，實(shí)現(xiàn)暫停播放切換的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！