Vue는 오디오 오디오 목록 루프를 구현하고 일시 중지 및 재생 전환을 실현합니다.

함수 인터페이스는 다음과 같습니다

이 기능은 다음과 같이 사용됩니다.

1. 백엔드에서 반환한 오디오 주소에 따라 먼저 렌더링합니다. 여기서 playAudioSrc 필드는 일시 중지 스타일 또는 재생 스타일을 제어하는 ​​데 사용되며 오디오는 숨겨집니다.

<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
                    }
                })
                //监听当前音频播放完毕后，使当前音频更改为暂停样式
                audios[index].addEventListener('ended', ()=> {
    
    
                    item.playAudioSrc = false
                }, false);
                 
            }
        },