howler.js icon indicating copy to clipboard operation
howler.js copied to clipboard

play audios sequentially and stop the sequence

Open rodbs opened this issue 4 years ago • 3 comments

My use case is that I need to play audios sequentially. So far my best approach has been using Promises.

let myPlayer;
function play_audio(file_names) {
  new Promise(async (resolve, reject) => {
    myPlayer = new Howl({
      src: [file_names[0]],
      html5: true,
      preload: true,
      onend: function () {
        file_names.shift();
        if (file_names.length > 0) {
          play_audio(file_names);
        } else {
          resolve;
        }
      }
    });
  });
  myPlayer.play();
}

The key point is I need to stop the sequence if another audio is clicked on the page and I need to detect the sequence has been stopped to switch the icon player.

I've seen it's possible to stop all audio with the global method Howler.stop(). But:

  1. Is there an event to detect this stop method has been launched? How can I detect all audios have been stopped?
  2. Is there a better way (and faster) to play audios sequentially? Is it better/faster to create a Howl instance per audio and preload it beforehand?

thx

rodbs avatar Jan 27 '21 11:01 rodbs

Hello @rodbs any updates on this? have you considered using one audio file with sprites? I'm working on a similar feature, curious to hear more about your case.

ahrbil avatar Sep 07 '21 13:09 ahrbil

@rodbs There are events you can listen to, and there is also one for the stop event: https://github.com/goldfire/howler.js#onstop-function

You could resolve your promise at this event (or possibly use reject()), in addition to the "normal" path when all items have been played.

Here is some code of mine where I do a promise-based fade operation. See how I handle the "fade" event there. You could use the idea for the "stop" event.

suterma avatar Dec 29 '21 10:12 suterma

@suterma (@ahrbil) Thanks for your input. Eventually I've used Promises as you indicate, but in the standard HTML audio (instead of Howler). I need to put more time into this, but I feel this the way to go!

rodbs avatar Jan 05 '22 21:01 rodbs