如何在已处理音频上使用MediaRecorder API并录制为.wav文件

你完全可以在不改动现有FFT处理逻辑的前提下实现音频录制，有两种常见实现方案可以选：

实现方案 #

方案1：直接分流原始麦克风流（录制原始输入音频） #

不需要修改现有音频管线，直接把获取到的microphone媒体流传给MediaRecorder即可，流本身支持多路消费，不会影响你现有的FFT分析逻辑。
注意MediaRecorder原生对audio/wav的支持度在不同浏览器有差异，你可以先做支持性判断，如果当前浏览器不支持wav编码，可以自行拼接wav头生成文件，或者引入wav编码器polyfill处理。
示例代码如下：

const microphone = await navigator.mediaDevices.getUserMedia({video: false, audio: true});
const context = new AudioContext();
const stream = context.createMediaStreamSource(microphone);
const processor = context.createScriptProcessor(BUFFER_BYTES, 1, 1);
const analyser = context.createAnalyser();

// 原有FFT逻辑不变
stream.connect(analyser);
analyser.connect(processor);
processor.connect(context.destination);

// 新增录制逻辑
let recorderChunks = [];
// 先判断wav支持
const canRecordWav = MediaRecorder.isTypeSupported('audio/wav');
const mediaRecorder = new MediaRecorder(microphone, {
  mimeType: canRecordWav ? 'audio/wav' : 'audio/webm;codecs=opus'
});

mediaRecorder.ondataavailable = (e) => {
  if (e.data.size > 0) recorderChunks.push(e.data);
};

mediaRecorder.onstop = () => {
  const blob = new Blob(recorderChunks, {
    type: canRecordWav ? 'audio/wav' : 'audio/webm'
  });
  // 下载文件
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `recording.${canRecordWav ? 'wav' : 'webm'}`;
  a.click();
  URL.revokeObjectURL(url);
  recorderChunks = [];
};

// 调用开始/停止录制示例
// mediaRecorder.start()
// mediaRecorder.stop()

提示：ScriptProcessor API已经被官方弃用，后续可以替换为AudioWorklet实现相同的音频处理逻辑

方案2：录制经过音频管线处理后的音频 #

如果你需要录制的是经过EQ、滤波等处理后的音频，可以通过MediaStreamDestination桥接，把音频管线的输出转成媒体流再传给MediaRecorder。MediaRecorder本身不是AudioNode，不能直接接入音频管线，用这个方法就能实现你说的"加入管线"的效果。
示例代码在原有逻辑上新增部分如下：

// 新增媒体流目标节点，作为音频管线的输出之一
const recordDestination = context.createMediaStreamDestination();
// 把你要录制的节点输出连到这个目标上，这里以processor的输出为例
processor.connect(recordDestination);

// 用这个目标生成的流初始化MediaRecorder即可，后续录制逻辑和方案1完全一致
const mediaRecorder = new MediaRecorder(recordDestination.stream, {
  mimeType: 'audio/wav'
});

浏览器不支持wav编码的手动实现方案 #

如果需要强制输出wav格式，也可以直接从ScriptProcessor的回调里拿原始PCM数据，最后手动拼接wav文件头生成标准wav文件，不需要依赖MediaRecorder的编码支持。

内容的提问来源于stack exchange，提问作者Maurits van Altvorst