javascript - vue.js play audio in sequence

Question

Windows, Chrome

Im trying to play multiple audio files in sequence

tried using timeupdate event, ended event, and play promise callback

but it plays 100 -> 5, not 100 -> 20 -> 5

with this error https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

how to play multiple audio files? using audio buffer?

whats the problem?

<audio ref="audio-dom" preload="none" />

...

import A from 'sounds/100.wav';
import B from 'sounds/20.wav';
import C from 'sounds/5.wav';

data () {
  return {
    SOUNDS : {
      a : A,
      b : B,
      c : C,
    },
    soundsToPlay : [],
  }
},
computed : {
  _player () {
    return this.$refs['audio-dom']
  },
},
methods : {
  execute () {
    this.soundsToPlay = [this.SOUNDS.a, this.SOUNDS.b, this.SOUNDS.c]
    this._player.pause()
    this._playSound()
  },
}

1. using timeupdate event

...
methods : {
  ...
  _playSound () {
    if (this.soundsToPlay.length < 1) { return }
    let ss = this.soundsToPlay.shift()
    this._player.src = ss

    this._player.addEventListener('timeupdate', this._playSoundRecursive)
    this._player.play()
  },
  _playSoundRecursive () {
    if (this._player.currentTime >= this._player.duration) {
      setTimeout(() => this._playSound(), 5)
    }
  },
}

2. using ended event

...
methods : {
  ...
  _playSound () {
    if (this.soundsToPlay.length < 1) { return }
    let ss = this.soundsToPlay.shift()
    this._player.src = ss

    this._player.addEventListener('ended', this._playSoundRecursive)
    this._player.play()
  },
  _playSoundRecursive () {
    if (this._player.currentTime >= this._player.duration) {
      setTimeout(() => this._playSound(), 5)
    }
  },
}

3. using play promise

...
methods : {
  ...
  _playSound () {
    if (this.soundsToPlay.length < 1) { return }
    let ss = this.soundsToPlay.shift()
    this._player.src = ss

    let pm = this._player.play()
    pm.then(() => { this._playSound() })
  },
}

question from:https://stackoverflow.com/questions/66058733/vue-js-play-audio-in-sequence

Answer 1

Waitting for answers