使用 Web Audio 播放 Stream 中的点击声音 Api

Question

我有一个奇怪的问题。我正在使用网络音频播放来自服务器的流。我通过以下方式做到这一点：

 var d2 = new DataView(evt.data);

var data = new Float32Array(d2.byteLength / Float32Array.BYTES_PER_ELEMENT);
for (var jj = 0; jj < data.length; ++jj) {
    data[jj] = d2.getFloat32(jj * Float32Array.BYTES_PER_ELEMENT, true);
}

var buffer = context.createBuffer(1, data.length, 44100);
buffer.getChannelData(0).set(data);

source = context.createBufferSource();
source.buffer = buffer;
source.start(startTime);
source.connect(context.destination);

startTime += buffer.duration;

这很好用。如果我在我的电脑上播放流，我没有任何问题。

如果我在我的 Windows 8 平板电脑（相同 Chrome 版本）上播放相同的流，我会在音频中听到很多咔哒声。一秒钟内有多个。它有点接缝，在每个缓冲区的末尾我听到咔嗒声。

我不明白其中的区别...我能找到的唯一区别是声卡的采样率在我的计算机上是 44100，而在平板电脑上是 48000。

传输的流在 44100 中，我没有任何采样率问题。只有咔嗒声。

有人知道为什么会这样吗？

谢谢，新陈代谢

Answer 1

AudioBufferSourceNode 将其缓冲区重新采样为 AudioContext 采样率。可以想象，API 不允许您在一个 AudioBufferSourceNode 和另一个之间保持重采样器状态，因此两个缓冲区之间存在不连续性。

我认为最简单的方法是通过在服务器端重新采样以设备的采样率提供流。当 AudioWorkerNode 准备就绪并实施时，您也可以自己在客户端修复此问题，但事实并非如此。

或者，您也可以只使用一个元素进行流式传输，然后使用 AudioContext.createMediaElementSource() 将其通过管道传输到 Web Audio API。

Answer 2

我遇到了同样的问题，感谢 Padenot 的回答，我检查了采样率。 AudioContext.sampleRate 默认为 44100，但 PCM 数据和 AudioBuffer 为 48000。使用匹配 sampleRate 初始化 AudioContext 解决了问题：

var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext({
  latencyHint: 'interactive',
  sampleRate: 48000,
});

有了这个，我可以连续安排 20ms 48khz PCM16 AudioBuffers 的播放，没有任何卡嗒声或失真。

使用 Web Audio 播放 Stream 中的点击声音 Api

Clicking sounds in Stream played with Web Audio Api

javascript

web-audio-api