vue 多個audio播放 一個audio播放其他audio禁止播放

頁面：

　　　　　　　　

<div class="right">
      <audio  :ref="'audio' + index"  :src="item.audioUrl"  @ended="haveEnded"/>
      <div :class="{ active: playIndex == index}"   class="audio-component"   @click="toReadAudio(index)" />
</div>

 

 js代碼

toReadAudio (index) {
            let length = this.weekDetail.wordsRepeats.length || 0  // this.weekDetail.wordsRepeats是總共有幾條音頻數據
            if (length) {
                for (let i = 0; i < length; i++) {
                    let audioOne = 'audio' + i
                    audioOne = this.$refs[audioOne][0]
                    if (i === index) {
                        if (audioOne.paused) {
                        // 切換播放中的css樣式
                            this.playIndex = index
                            audioOne.load()//音頻重新加載，重新播放
                            audioOne.play()
                        } else {
                            audioOne.pause()
                            this.playIndex = null
                        }
                    } else {
                        audioOne.pause()
                    }
                }
            }
        }