javascript - 为什么AudioBufferSourceNode会在播放中堆叠？

Question

基本上，我正在尝试从字节(来自WS套接字)构建和播放音频数据。
详细:

我有一个用Django-Channels编写的简单WS服务器，该服务器在连接时返回了我在blob对象中分割的音频文件，每个块有6144个字节。接下来，我要解码此Blob数据并将其转换为声音:

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source;
var play = document.querySelector('#play');
var audioQueue = []

const chatSocket = new WebSocket(
    'ws://'
    + window.location.host
    + 'audio-stream-test'
    + '/'
);

chatSocket.onmessage = function(e) {
    e.data.arrayBuffer().then(buffer => {
        audioCtx.decodeAudioData(buffer, (x)=>{
            source = audioCtx.createBufferSource();
            source.buffer = x;
            source.connect(audioCtx.destination);
            source.loop = false;
            audioQueue.push(source)
        })
    })
}

WS发送完所有数据后，它将在服务器端关闭。最后一件事是从 audioQueue数组播放排队的缓冲区:

play.onclick = function() {
    var playOffset;
    for (let [bufferCount, buffer] of audioQueue.entries()) {
        if (bufferCount == 0) {
            playOffset = 0
        } else {
            playOffset = audioQueue[bufferCount-1].buffer.duration
        }
        buffer.start(when=playOffset)
    }
}

要澄清这一行: playOffset = audioQueue[bufferCount-1].buffer.duration。我想，我写对了，因为我想在旧的(已经播放过的)结尾处播放新的缓冲区。
对我来说，作为服务器端开发人员，似乎应该可以正常工作。

但是，主要问题是: audioQueue数组中的所有缓冲区都在一次播放。 IDK我在做什么错。希望能为您提供帮助:)

The song

Answer 1

您需要启动与AudioBufferSourceNode的currentTime相关的每个o​​jit_code。

play.onclick = function() {
    audioQueue.reduce((startTime, audioBufferSourceNode) => {
        audioBufferSourceNode.start(startTime);

        return startTime + audioBufferSourceNode.buffer.duration;
    }, audioContext.currentTime);
};

上面的代码将循环遍历 AudioContext中的所有节点。它通过基于 audioQueue的 startTime累积先前节点的持续时间来计算每个 AudioBufferSourceNode的 currentTime。