vue 多个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>
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()
}
}
}
},