h5移动端audio消息声音依次提醒

实现效果：聊天时，消息连续到来，声音依次播放。有多少消息，播放多少次。
这种播放效果并不理想，只是在程序中提示音次数是对的，但由于播放一次到下次播放会有一个时间差，
因为浏览器一次只能播放一个音频，从音频播放到不播放之间有一个杂音区间，因此这种播放效果并不利落

思路：统计需要播放的次数，如果当前音频没有处于播放状态，则播放音频，播放次数减一，
否则等音频播放完成后，再进行下一次播放，直到要播放的次数放完

以下具体代码：

<template>
  <div class="audio">
    <audio controls id="audioPlay_z" src="/file/notification.mp3" v-if="!isMobile"></audio>
    <audio controls id="audioPlay_z" src="/file/notification_m.mp3" v-else></audio>
  </div>
</template>

<script>
import { getPlatformType } from '@/utils'

export default {
  name: 'PlayNotifyVoice',
  data () {
    return {
      audioFile: '/file/notification.mp3',
      palyNum: 0,
      isPlaying: false
    }
  },
  computed: {
    isiOS () {
      return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios
    },
    isSafari () {
      const userAgent = navigator.userAgent
      return userAgent.indexOf('Safari') > -1 && userAgent.indexOf('Chrome') === -1 && userAgent.indexOf('Edge') === -1 && userAgent.indexOf('OPR') === -1 // safari
    },
    isMobile () {
      return getPlatformType() !== 'pc'
    }
  },
  beforeMount () {
    if (this.isiOS) {
      document.body.addEventListener('touchstart', this.init, false)
    }
    if (this.isSafari) {
      document.body.addEventListener('click', this.init, false)
    }
  },
  mounted () {
    var audioEle = document.getElementById('audioPlay_z')
    audioEle.addEventListener('ended', (res) => { // 暂停时会触发，当播放完一首歌曲时也会触发
      this.isPlaying = false
      if ('fastSeek' in audioEle) { // safari
        audioEle.fastSeek(1) // 改变audio.currentTime的值
        audioEle.load()
      } else {
        audioEle.currentTime = 1
      }
      this.palyNum = this.palyNum - 1
      console.log('ended', this.palyNum)
      if (this.palyNum > 0) {
        this.playVoice()
      }
    })
    audioEle.addEventListener('playing', (res) => {
      this.isPlaying = true
      console.log('isPlaying')
    })
    audioEle.addEventListener('pause', (res) => {
      console.log('pause')
    })
    audioEle.addEventListener('canplay', (res) => {
      console.log('canplay')
    })
    audioEle.addEventListener('canplaythrough', (res) => {
      console.log('canplaythrough')
    })
    audioEle.addEventListener('timeupdate', (res) => {
      console.log('timeupdate')
    })
  },
  methods: {
    // 初始化
    init () {
      var audioEle = document.getElementById('audioPlay_z')
      let playPromise = audioEle.play()
      if (playPromise !== undefined) {
        playPromise.then(() => {
          audioEle.play()
          audioEle.pause()
          if ('fastSeek' in audioEle) { // safari
            audioEle.fastSeek(1) // 改变audio.currentTime的值
          } else {
            audioEle.currentTime = 1
          }
        }).catch(() => {
          console.log('play failed init')
        })
      }
      this.palyNum = 0
      this.isPlaying = false
      document.body.removeEventListener('touchstart', this.init, false)
      document.body.removeEventListener('click', this.init, false)
    },
    // 播放消息提示音
    playNotifyVoice () {
      if (!!window.ActiveXObject || 'ActiveXObject' in window) { // IE内核浏览器
        // eslint-disable-next-line
        var OSPlayer = new ActiveXObject('WMPLayer.OCX')
        OSPlayer.url = this.audioFile
        OSPlayer.controls.play()
      } else {
        this.palyNum++
        this.playVoice()
      }
    },
    playVoice () {
      var audioEle = document.getElementById('audioPlay_z')
      console.log(this.isPlaying, audioEle)
      if (!this.isPlaying) {
        let playPromise = audioEle.play()
        if (playPromise !== undefined) {
          playPromise.then(() => {
            console.log('isPlaying', this.isPlaying, this.palyNum)
            if ('fastSeek' in audioEle) { // safari
              audioEle.fastSeek(0) // 改变audio.currentTime的值
              audioEle.load()
            } else {
              audioEle.currentTime = 0
            }
            console.log(111)
            audioEle.play()
          }).catch(() => {
            console.log('play failed')
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
#audioPlay_z {
  display: none;
}
</style>