WebAudio：如何播放麦克风录制的Float32Array音频数据

嘿，我来帮你搞定这个问题！你已经把录制的音频片段以Float32Array的形式存在leftChannel数组里了，接下来只需要把这些分散的片段合并，再用浏览器的AudioContext API就能播放出来，具体步骤如下：

1. 合并所有音频数据块 #

你的leftChannel数组里是多个独立的Float32Array片段，首先得把它们合并成一个完整的Float32Array：

// 计算所有音频块的总长度
const totalLength = this.state.leftChannel.reduce((total, chunk) => total + chunk.length, 0);
// 创建一个足够容纳所有数据的Float32Array
const mergedAudio = new Float32Array(totalLength);

let offset = 0;
// 把每个数据块复制到合并后的数组里
this.state.leftChannel.forEach(chunk => {
  mergedAudio.set(chunk, offset);
  offset += chunk.length;
});

2. 创建AudioContext与AudioBuffer #

接下来要把合并好的数据转换成浏览器能识别的AudioBuffer，这里有个关键注意点：必须使用和录制时一致的采样率，不然播放速度会出现快进/慢放的问题。建议你在录制的时候把采样率存在state里（比如this.setState({ sampleRate: e.inputBuffer.sampleRate })），后面直接用这个值：

// 初始化AudioContext（兼容不同浏览器）
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// 创建AudioBuffer：参数依次是通道数（单声道填1）、总长度、采样率
const audioBuffer = audioCtx.createBuffer(1, mergedAudio.length, this.state.sampleRate);
// 将合并后的音频数据写入buffer的第一个通道
audioBuffer.copyToChannel(mergedAudio, 0);

3. 播放音频 #

最后创建音频源节点，连接到输出设备并播放：

// 创建音频源节点
const sourceNode = audioCtx.createBufferSource();
sourceNode.buffer = audioBuffer;
// 连接到扬声器
sourceNode.connect(audioCtx.destination);
// 开始播放（如果是用户交互触发，比如按钮点击，这里不会触发浏览器的自动播放限制）
sourceNode.start();

// 可选：播放结束后清理资源
sourceNode.addEventListener('ended', () => {
  sourceNode.disconnect();
});

一些额外注意事项 #

• 自动播放限制：浏览器要求音频播放必须由用户主动触发（比如点击按钮），所以别在页面加载完成后直接调用start()，最好把播放逻辑放在按钮的click事件回调里。
• 多声道处理：如果你录制的是立体声，还需要处理rightChannel数组，创建AudioBuffer时通道数填2，然后分别调用copyToChannel把左右声道数据写入对应通道。
• 复用AudioBuffer：如果需要多次播放同一段音频，不用每次都合并数据和创建buffer，复用之前生成的audioBuffer即可。

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