为何onaudioprocess回调重复返回同一音频缓冲区？

原因分析 #

你遇到的问题核心是ScriptProcessorNode会复用缓冲区对象：

• 每次onaudioprocess回调触发时，e.outputBuffer.getChannelData(0)返回的是同一个Float32Array实例。浏览器为了优化性能，不会每次都创建新的数组，而是重复使用同一块内存区域，只是在每次回调时将新的音频数据写入这个数组。
• 你直接把这个数组的引用push到audioBuffers里，数组中所有元素其实都是指向同一个内存地址的指针。当后续回调更新这个数组的数据时，之前push进去的所有引用都会指向更新后的数据，所以最终控制台输出的所有数组内容完全一致。

解决方法 #

只需要在push时创建当前音频数据的副本，而不是直接推送原数组的引用：
修改onaudioprocess中的push代码：

audioBuffers.push(new Float32Array(output))

这样每次都会生成一个新的Float32Array实例，把当前output里的音频数据复制进去，数组中的每个元素都是独立的，不会被后续的音频数据覆盖。

内容的提问来源于stack exchange，提问作者BigChungus443