CODEWITHSUNDEEP
javascriptmp3web-audio-apiplaylisthowler.js
Hugolpz
Hugolpz

Reputation: 18248

Playlist of audio files within HTML5 webapps?

Given an array of urls corresponding to as many audio files such :

     var playlistUrls = [
        "./audio/cmn-ni3.mp3",
        "./audio/cmn-hao3.mp3",
        "./audio/cmn-lao3.mp3",
        "./audio/cmn-mao3.mp3"
        ];

How to play these files as a playlist [one at the end of an other] in the same order as the provided array of urls ?

I have a preference to do that in the scope of howler.js, since it provides various HTML5 fallbacks.

Upvotes: 0

Views: 2048

Answers (1)

Hugolpz
Hugolpz

Reputation: 18248

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

var playlist = function(e) {
    // initialisation:
      pCount = 0;
      playlistUrls = [
        "https://upload.wikimedia.org/wikipedia/commons/8/8a/Zh-Beijing.ogg",
        "https://upload.wikimedia.org/wikipedia/commons/8/8a/Zh-Beijing.ogg",
        "./audio/a.mp3",
        "./audio/b.mp3",
        "./audio/c.mp3",
        "./audio/d.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();
}

Also, I made a Github requested to add this feature into Howler.js.

Please share back your variation on jsfiddle if you do one.

Upvotes: 2

Related Questions