为什么 AudioBufferSourceNode 在播放时会堆叠？答案

【问题标题】：Why AudioBufferSourceNodes stacks on play?为什么 AudioBufferSourceNode 在播放时会堆叠？
【发布时间】：2020-11-04 15:14:38
【问题描述】：

基本上，我正在尝试从来自 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

【问题讨论】：

标签： javascript audio streaming audio-streaming web-audio-api

【解决方案1】：

您需要启动与AudioContext 的currentTime 相关的每个AudioBufferSourceNode。

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

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

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

【讨论】：