javascriptmp3howler.js

Howler.js to play mp3 files in a loop in order?


There was a point where I got stuck in a javascript project. I want to play mp3 audio files when an event occurs. Sometimes I need to play maybe 5 mp3 files back to back instantly. In my experiments, all files play at the same time. What I want is to make them play in order. The mp3 files are listened to in a loop. When a new mp3 play request comes in, I want it to add 100s of mp3 files to a queue and play them all. I tried to do my experiments using Howler.js.

connection.on("send", (data) => {   
playSound(data.mp3Filename) // --> I'm listen the mp3 files here.
});
var sound = null;
var soundQueue = [];

function playSound(soundURL) {
  if (sound === null || !sound.playing()) {
    sound = new Howl({
      src: [soundURL],
      onend: function () {
        if (soundQueue.length > 0) {
          var nextSound = soundQueue.shift();
          playSound(nextSound);
        }
      },
    });
    sound.play();
  } else {
    soundQueue.push(soundURL);
  }
}

But still the soundQueue plays more than the number added, where is my mistake?


Solution

  • I fixed the problem, there was no error in the code above. It was looping extra where I called the function. Thanks to all of you.