HTML5 webapps中的音频文件播放列表？

Question

给定一个与尽可能多的音频文件相对应的 url 数组：

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

如何以与提供的 url 数组相同的顺序将这些文件作为播放列表 [一个在另一个末尾] 播放？

我倾向于在 howler.js 的范围内这样做，因为 it provides various HTML5 fallbacks。

Answer 1

以下确实有效，可扩展，并且可能是实现上引用功能的良好开端（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();
}

另外，我发了a Github requested to add this feature into Howler.js。

如果您愿意，请在 jsfiddle 上分享您的变体。