howler.js
howler.js copied to clipboard
play audios sequentially and stop the sequence
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:
- Is there an event to detect this stop method has been launched? How can I detect all audios have been stopped?
- 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
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.
@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 (@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!