vue 语音播放

应用场景：

vue开发微信公众号，打卡任务（可发文字、语音、图片），任务详情页，有宝宝的打卡详情信息，存在多条语音的情况。

思路：

1、页面上只有一个audio标签，点击不同的语音，动态改变audio 的src即可
2、页面上的audio标签根据语音数量一致，点击不同的语音播放不同的audio标签（第一条正在播放，点击第二条，那么就需要根据索引或者别的条件关闭第一条，播放第二条）

实现：

我这里用的是思路1。
代码如下：

html

 <div v-if="info.audios && info.audios.length > 0" class="voice">
   <div class="voice-box">
     <p @click="play(info.audios[0])" class="progress-bar"><span class="schedule"></span></p>
     <p class="time">{{info.audios[0].duration | duration}}</p>
   </div>
 </div>
 <audio id="audio" src="/static/audios/Away.mp3"></audio>

js

export default {
  props: {
    info: Object,
    imgItemSize: {
      type: String,
      default: '2.06rem'
    }
  } ,
  data () {
    return {
      // 语音播放相关
      currentAudioId: '', // 当前语音的id
      isPlaying: false
    }
  },
  methods: {
    play (info) {
      var audio = document.querySelector('#audio')
      //用于区分点击事件是用来停止播放还是用来播放新的语音
      if (info.id === this.currentAudioId) {
        if (!this.isPlaying) {
          audio.play()
          this.isPlaying = true
        } else {
          audio.pause()
          this.isPlaying = false
        }
      } else {
        this.currentAudioId = info.id
        audio.src = info.url
        audio.play()
        this.isPlaying = true
      }
    }
  },
  filters: {
    duration (val) {
      let time = val / 1000
      let minute = parseInt(time / 60)
      let second = Math.round(time % 60)
      let str = minute > 0 ? `${minute}′${second}′′` : `${second}′′`
      return str
    }
  }
}