当然有办法解决这个问题！你完全不需要修改第三方库的代码，只需要借助Web Audio API的中间节点来拦截流向audioContext.destination的音频流，同时保证声音正常从扬声器输出。下面给你两种实用的方案：

方案1：用MediaStreamDestination + MediaRecorder捕获完整音频流 #

这个方案适合你需要把播放的音频完整录制下来的场景，操作起来比较简单：

1. 首先创建一个MediaStreamDestinationNode，它可以把音频流转换成MediaStream
2. 断开第三方库节点与audioContext.destination的连接（如果已经连上的话）
3. 把第三方库的输出节点连接到MediaStreamDestinationNode的输入
4. 再把MediaStreamDestinationNode生成的流，通过MediaElementAudioSourceNode连回audioContext.destination，这样声音依然能从扬声器播放
5. 最后用MediaRecorder来录制这个MediaStream，就能获取到音频数据了

代码示例：

// 假设你的音频上下文是audioContext，第三方库的输出节点是thirdPartyOutputNode
const audioContext = new AudioContext();

// 步骤1：创建MediaStreamDestination
const streamDest = audioContext.createMediaStreamDestination();

// 步骤2：如果第三方库已经连到了destination，先断开
thirdPartyOutputNode.disconnect(audioContext.destination);

// 步骤3：连接第三方节点到streamDest
thirdPartyOutputNode.connect(streamDest);

// 步骤4：把streamDest的流连回扬声器
const sourceFromStream = audioContext.createMediaElementSource(new Audio());
sourceFromStream.mediaElement.srcObject = streamDest.stream;
sourceFromStream.connect(audioContext.destination);

// 步骤5：录制音频
const recorder = new MediaRecorder(streamDest.stream);
const chunks = [];

recorder.ondataavailable = (e) => chunks.push(e.data);
recorder.onstop = () => {
  const audioBlob = new Blob(chunks, { type: 'audio/webm' });
  // 这里可以处理音频Blob，比如下载或者转格式
  const audioUrl = URL.createObjectURL(audioBlob);
  const a = document.createElement('a');
  a.href = audioUrl;
  a.download = 'captured-audio.webm';
  a.click();
};

recorder.start();
// 停止录制的时候调用recorder.stop()

方案2：用AudioWorklet实时捕获每帧音频数据 #

如果需要实时获取原始的PCM音频数据（比如做实时分析、处理），推荐用AudioWorklet（替代已废弃的ScriptProcessorNode），它性能更好：

第一步：创建AudioWorkletProcessor文件（比如capture-processor.js） #

class CaptureProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    // inputs[0]是输入的音频通道数据，这里取第一个通道的帧数据
    const inputData = inputs[0][0];
    if (inputData) {
      // 把音频数据发送到主线程，注意要转成普通数组，因为TypedArray不能直接序列化
      this.port.postMessage(Array.from(inputData));
    }
    // 必须返回true表示继续处理
    return true;
  }
}

registerProcessor('capture-processor', CaptureProcessor);

第二步：主线程代码 #

const audioContext = new AudioContext();

// 先加载AudioWorkletProcessor
await audioContext.audioWorklet.addModule('capture-processor.js');

// 创建自定义的AudioWorkletNode
const captureNode = new AudioWorkletNode(audioContext, 'capture-processor');

// 监听来自处理器的音频数据
captureNode.port.onmessage = (e) => {
  const pcmData = e.data;
  // 这里处理实时获取的PCM数据，比如做频谱分析、存储等
  console.log('捕获到的PCM帧数据:', pcmData);
};

// 断开第三方节点与destination的连接
thirdPartyOutputNode.disconnect(audioContext.destination);

// 连接第三方节点 -> captureNode -> destination
thirdPartyOutputNode.connect(captureNode);
captureNode.connect(audioContext.destination);

额外注意事项 #

• AudioContext权限问题：现代浏览器要求AudioContext必须在用户交互（比如点击、触摸）后才能创建或恢复，所以确保你的代码是在用户触发的事件回调里执行的。
• 未知第三方节点的情况：如果实在不知道第三方库的输出节点是谁，可以直接调用audioContext.destination.disconnect()断开所有连接，再把你的中间节点连到audioContext.destination，之后第三方库的输出会自动流向你的中间节点（只要它是往destination输出的）。
• 格式选择：MediaRecorder默认的格式是webm，如果你需要其他格式，可以在创建MediaRecorder时指定mimeType，比如audio/mp4（需看浏览器支持）。如果需要原始PCM数据，方案2是更合适的选择。

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