如何录制单个AudioContext中实时播放的音频？（基于WaveSurfer）

嘿，刚好做过类似的需求！你要捕获的是AudioContext里的内部音频流，而非麦克风输入，其实用Web Audio API本身的能力就能搞定，完全不用降级到MediaElement模式，咱们一步步来拆解：

核心思路：用createMediaStreamDestination捕获内部流 #

AudioContext提供了createMediaStreamDestination()方法，它会生成一个特殊的节点，能把AudioContext里的所有音频输出都导向这个节点。之后我们就能从这个节点拿到MediaStream，再用MediaRecorder来录制这个流就可以了。

结合WaveSurfer的具体实现 #

你用的是WaveSurfer的Web Audio模式（就是性能表现好的那个模式），可以直接获取它的AudioContext实例，再把WaveSurfer的音频输出连接到录制节点：

// 假设你已经初始化好WaveSurfer实例，命名为wavesurfer
const audioCtx = wavesurfer.backend.ac; // 不同版本可能略有差异，新版也可尝试wavesurfer.getAudioContext()
const recordingDest = audioCtx.createMediaStreamDestination();

// 把WaveSurfer的音频源连接到录制目标
// 如果是多个WaveSurfer实例，要把每个实例的source都连到这里
wavesurfer.backend.source.connect(recordingDest);

// 初始化MediaRecorder来录制流
const mediaRecorder = new MediaRecorder(recordingDest.stream);
const recordedChunks = [];

// 收集录制的音频数据
mediaRecorder.ondataavailable = (event) => {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
};

// 录制结束后处理Blob
mediaRecorder.onstop = () => {
  // 生成WAV格式的Blob（也可选audio/webm、audio/mp3等，看浏览器支持）
  const audioBlob = new Blob(recordedChunks, { type: 'audio/wav' });
  
  // 这里可按需操作：下载、上传或转换格式
  // 举个下载的例子：
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(audioBlob);
  downloadLink.download = 'my-recording.wav';
  downloadLink.click();
  // 记得释放URL对象
  URL.revokeObjectURL(downloadLink.href);
};

// 开始录制（需绑定用户点击事件，规避浏览器安全限制）
document.getElementById('start-record-btn').addEventListener('click', () => {
  mediaRecorder.start();
});

// 停止录制
document.getElementById('stop-record-btn').addEventListener('click', () => {
  mediaRecorder.stop();
});

关键注意事项 #

• 浏览器兼容性：MediaRecorder和createMediaStreamDestination在Chrome、Firefox、Edge等现代浏览器都支持，但Safari需注意版本，建议提前测试；
• 格式选择：WAV是无压缩格式，兼容性最好但文件体积大；若要更小的文件，可尝试audio/webm或audio/mp3（部分浏览器支持）；
• 用户交互触发：浏览器出于安全考虑，不允许自动录制，必须由用户的点击等交互事件触发mediaRecorder.start()；
• 多WaveSurfer实例：如果用了多个WaveSurfer加载不同采样，要把每个实例的backend.source都连接到同一个recordingDest节点，才能捕获所有音频；

关于MediaElement降级方案 #

只有当你的用户群体大量使用旧浏览器时，才考虑降级到MediaElement模式。此时可以用MediaElement的captureStream()方法捕获播放流，但这个模式的性能不如Web Audio，还可能存在音频延迟，所以优先推荐上面的Web Audio方案。

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