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()
                    }
                }
            }
        }