audio标签实现音频自动续播

html：

 <div :style="[{'height':`${height}px`},{'background':`url(${userImg}) no-repeat center`},{'background-size': 'cover'}]"
 class="audio-play"
  @click="audioPlay">
      <img v-show="audioStatus === 'pause'" ref="btn" src="../../../public/img/icons/play.png" alt="">
      <audio ref="audio" :src="audioSrc"></audio>
    </div>

v-show="audioStatus === ‘pause’"实现暂停显示暂停图标，播放不显示图标

script里的data:

 userImg: '',//背景图片
 audioSrc: '',//音频地址
 audioList: [],//一个数组，里面有具体的音频地址
 currentAudioIdx: 0, // 当前播放音频索引
 audioStatus: 'pause', // 播放状态

getAudio(){
//数据请求

if (res && res.code == 1){
 this.audioSrc = res.cardList[0].recordUrl
  this.$nextTick(function () {
     this.initAudioEvent()
        })
  this.userImg = res.cardList[0].cardPic
  this.audioList = res.cardList
}

}

逻辑

// 音频事件监听
      initAudioEvent () {
        let audio = this.$refs.audio
        audio.addEventListener('play', () => {
          // console.log('play----')
          this.audioStatus = 'play'
        }, false)

        audio.addEventListener('pause', () => {
          // console.log('pause----')
          this.audioStatus = 'pause'
        }, false)

        audio.addEventListener('ended', () => {
          // console.log('ended----')
          this.audioStatus = 'pause'
          this.handleNext()
        }, false)
      },
      // 音频播放下一首
      handleNext () {
        let audio = this.$refs.audio
        this.currentAudioIdx++
        let idx = this.currentAudioIdx
        let len = this.audioList.length
        if (idx < len) {
          let src = this.audioList[idx].recordUrl
          audio.src = src
          this.userImg=this.audioList[idx].cardPic
          audio.play()
        } else {
          this.currentAudioIdx = 0
         this.userImg=this.audioList[0].cardPic
        }
      },

      // // 音频播放操作
      audioPlay() {
        let audio = this.$refs.audio
        if (audio.paused) {
          audio.play();
        } else {
          audio.pause();
        }
      },
    },

代码是直接复制项目里的，懒得改了，看不看得懂随缘吧