将随机播放与网络音频播放相结合

Question

我想随机播放一组音频文件，以便每次单击按钮时播放的文件都不同（然后是数组中剩余的音频文件，这样一次单击可能会触发[1,3,2] 和下一个可能会触发 [2,1,3]。这对于 HTML 音频来说相对简单，但是对于网络音频我无法理解它。建议将不胜感激.

这是我在 HTML 音频中使用的随机播放功能：

function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;

// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}

return array;
}

下面是我一直用来使用网络音频按 [1,2,3] 顺序播放音频数组的代码。

function BufferLoader(context, urlList, callback) {
this.context = context;
this.urlList = urlList;
this.onload = callback;
this.bufferList = new Array();
this.loadCount = 0;
}

BufferLoader.prototype.loadBuffer = function(url, index) {
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";

var loader = this;

request.onload = function() {
    loader.context.decodeAudioData(
        request.response,
        function(buffer) {
            if (!buffer) {
                alert('error decoding file data: ' + url);
                return;
            }
            loader.bufferList[index] = buffer;
            if (++loader.loadCount == loader.urlList.length)
                loader.onload(loader.bufferList);
        }    
    );
}

request.onerror = function() {
    alert('BufferLoader: XHR error');        
}

request.send();
}

BufferLoader.prototype.load = function() {
for (var i = 0; i < this.urlList.length; ++i)
    this.loadBuffer(this.urlList[i], i);
}
var context;
var bufferLoader;

function loadAndPlay() {
try {
    context = new AudioContext();
}
catch(e) {
    alert("Web Audio API is not supported in this browser");
}

bufferLoader = new BufferLoader(
    context,
    [
    "IRELAND/harp1.ogg",
    "IRELAND/harp2.ogg",
    "IRELAND/harp3.ogg",
    ],
    finishedLoading
);


bufferLoader.load();
}

function finishedLoading(bufferList) {
// Create three sources and buffers
var harp1 = context.createBufferSource();
var harp2 = context.createBufferSource();
var harp3 = context.createBufferSource();
harp1.buffer = bufferList[0];
harp2.buffer = bufferList[1];
harp3.buffer = bufferList[2];

harp1.connect(context.destination);
harp2.connect(context.destination);
harp3.connect(context.destination); 
  // Play them staggered
harp1.start(0);
harp1.onended = function() {
harp2.start();     
}
harp2.onended = function() {
harp3.start();  
}
}

那么问题来了，如何把第一个shuffle函数和数组的播放结合起来呢？谢谢！

Answer 1

您可以将 BufferSources 推入一个数组，然后将其打乱，然后从索引 0:

播放 BufferSources

var harps = [];
harps.push(harp1, harp2, harp3);
harps = shuffle(harps);

harps[0].start(0);
harps[0].onended = function() {
    harps[1].start();
}

将随机播放与网络音频播放相结合

Combining Shuffle with Web Audio Playback

javascript

audio

shuffle