HTML5 web应用程序中的音频文件播放列表

Playlist of audio files within HTML5 webapps?

本文关键字：音频 文件 播放列表 web 应用程序 HTML5      更新时间：2023-09-26

给定一个url数组，对应多个音频文件，例如:

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

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

我倾向于在howler.js的范围内这样做，因为它提供了各种HTML5的回退。

下面的代码可以工作，是可伸缩的，并且可能是实现上面引用的功能(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();
}

此外，我还在Github上请求将此功能添加到Howler.js中。

如果你做了一个jsfiddle，请分享你的变化

相关文章：