Vue realizes audio audio list loop, realizes pause and playback switching

The function interface is as follows

The function is used as follows:

1. First render according to the audio address returned by the backend, where the playAudioSrc field is used to control the pause style or the play style, and the audio is hidden

<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 processing logic is as follows

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