原始音频数据流期间 webaudio 播放中的裂纹

Question

我有一个服务器通过 websocket 发送原始音频块。我们的想法是检索它们并以尽可能流畅的播放方式播放它们。

这是最重要的一段代码：

ws.onmessage = function (event) {
    var view = new Int16Array(event.data);
    var viewf = new Float32Array(view.length);

    audioBuffer = audioCtx.createBuffer(1, viewf.length, 22050);
    audioBuffer.getChannelData(0).set(viewf);
    source = audioCtx.createBufferSource();
    source.buffer = audioBuffer;
    source.connect(audioCtx.destination);
    source.start(0);
};

这工作得很好，但在播放中存在一些裂缝：网络延迟并不总是恒定的，所以最新的数据块并没有完全到达正在播放的前一个数据块的末尾，所以我可以得到任何一个两个缓冲区一起播放很短的时间或根本不播放。

我试过：

• 挂钩source.onended播放下一个，但它不是无缝的：每个块的末尾都有一个裂缝，每个接缝都在总体上累积，因此与流相比，播放越来越晚。
• 将新数据附加到当前播放的缓冲区，但这似乎是被禁止的：缓冲区的大小是固定的。

是否有适当的解决方案来修复该播放？唯一的要求是播放来自 websocket 的未压缩音频。

编辑：解决方案：鉴于我知道我的缓冲区长度，我可以这样安排播放：

if(nextStartTime == 0) nextStartTime = audioCtx.currentTime + (audioBuffer.length / audioBuffer.sampleRate)/2;
source.start(nextStartTime);
nextStartTime += audioBuffer.length / audioBuffer.sampleRate;

第一次，我将播放的开始时间安排在半个缓冲之后，以允许最大的意外延迟。然后，我将下一个缓冲区开始时间存储在缓冲区结束的最后。

Answer 1

您可能应该从https://www.html5rocks.com/en/tutorials/audio/scheduling/开始，它很好地解释了如何在 WebAudio 中安排事情。

对于您的用例，您还应该利用这样一个事实，即您知道 PCM 样本的采样率，并且知道您读取了多少个样本。这决定了播放缓冲区需要多长时间。使用它来确定何时安排下一个缓冲区。

（但请注意，如果 PCM 采样率与 不同audioCtx.sampleRate，数据将被重新采样，这可能会扰乱您的时序。