goldfire / howler.js

Javascript audio library for the modern web.
https://howlerjs.com
MIT License
23.98k stars 2.23k forks source link

Feature request: playing multiple audios as a playlist #191

Closed hugolpz closed 8 years ago

hugolpz commented 10 years ago

Maybe I missed something, but I didn't found an easy way to play a list of audios as a playlist. A built-in way to play list of audio files would be helpful. When provided an array of urls corresponding to as many audio files, this function would play these files as a playlist [one at the end of an other] in the same order as the provided array of urls.


Current: For now, the current way I play a list of audios is a very dirty, not-scalable, hardcoded cascade of howler play() + onend: function(){ ... } such:

var sound = new Howl({
  urls: ['sound_1.mp3'],
  autoplay: true,
  onend: function() {
   ...
  }
}).play();

Such, for 3 files :

var sound = new Howl({
  urls: ['sound_1.mp3'],
  autoplay: true,
  onend: function() {
     var sound = new Howl({
     urls: ['sound_2.mp3'],
     autoplay: true,
     onend: function() {
             var sound = new Howl({
             urls: ['sound_3.mp3'],
             autoplay: true,
             onend: function() {
                   // Continue the cascade if more files ares needed.
                }
             }).play();
     }
    }).play();
  }
}).play();
hugolpz commented 10 years ago

I've been looking for some solutions online, and start testing out something.

hugolpz commented 10 years ago

Hello James, the following does work (locally), is scalable, and may be the a good start to achieve the upper cited function:

window.onload = function(e) {
    // initialisation:
    var onPlay = [false],  // this one is useless now
      pCount = 0;
      playlistUrls = [
        "./audio/cmn-ni3.mp3",
        "./audio/cmn-hao3.mp3",
        "./audio/cmn-lao3.mp3",
        "./audio/cmn-mao3.mp3"
        ], // audio list
      howlerBank = [],
      loop = true;

    // playing i+1 audio (= chaining audio files)
    var onEnd = function(e) {
      if (loop === true ) { pCount = (pCount + 1 !== howlerBank.length)? pCount + 1 : 0; }
      else { pCount = pCount + 1; }
      howlerBank[pCount].play();
    };

    // build up howlerBank:     
    playlistUrls.forEach(function(current, i) {   
      howlerBank.push(new Howl({ urls: [playlistUrls[i]], onend: onEnd, buffer: true }))
    });

    // initiate the whole :
        howlerBank[0].play();
}

The jointure / transition between audios have too much silence, and I miss a perfect control over timing. But it does its job fully to chain audios well, and would allow easy playlist creation via howlerJS, which would be a cool and beloved feature.

goldfire commented 10 years ago

This looks like a solution that could work well. Alternately you could preload all of your sounds upfront if you want to make sure there is no delay between each one. I'm going to go ahead and close this though as this type of feature is outside the scope of the library and is something that should be built around howler.js as you've done here.

jayknowstheway commented 9 years ago

Dear Goldfire, the main problem with Howler.JS is that the documentation is not comprehensive. The power and potential of Howler is lost in trying to stay as simple and clean as possible. For me, the basic starting point is precisely the music player idea, for which there are very few articles. To understand how to use holwer, it seemed like learning javascript, instead of easily being able to build a module based on your tool. Would you recommend any resources, examples, or source code that pushes Howler at a higher level, or would you consider expanding the examples of Howler in a comprehensive, real-life situation way? This post was hinting at that before it was closed.

goldfire commented 9 years ago

As part of the 2.0 release I plan on creating a wider range of examples. Beyond examples, the docs have been improved in the 2.0 branch, but I'm happy to hear suggestions for areas of the documentation that could still be made more clear.

jayknowstheway commented 9 years ago

Goldfire! By the way, thank you for such a cool tool! I see Howler docs as being more than just an API type library. When I imagine examples in the docs, I imagine seeing code for how to make a library of audio tracks, another that has sounds/tracks with dedicated buttons (like a sampler), another showing playback controls. Sounds like a job for the Howler community, as these examples sort of veer into javascript instead of Howler's basics. But maybe you might already have some in the works to further spur development? Thank you for listening!

goldfire commented 9 years ago

Thanks for the ideas, I've added this to the 2.0 milestone for docs.

goldfire commented 8 years ago

This is now being tracked in https://github.com/goldfire/howler.js/issues/444, so I'm going to go ahead and close this.

brydavis commented 5 years ago

Use recursive.

var list = [
    'https://example.com/hello.mp3',
    'https://example.com/world.mp3',
    'https://example.com/music.mp3'
]

function autoplay(i, list) {
    var sound = new Howl({
        src: [list[i]],
        preload: true,
        onend: function () {
            if ((i + 1) == list.length) {
                autoplay(0, list)
            } else {
                autoplay(i + 1, list)
            }
        }
    })
    sound.play();
}

autoplay(0, list)
hugolpz commented 5 years ago

A variation adding the number of loops wanted for the playlist : https://jsfiddle.net/2syojed6/2/