WebAudio API：如何从AudioNode直接获取音频数据？

好问题！AudioNode本身并没有提供直接抓取音频数据的原生API——毕竟它的核心设计是在Web Audio的处理管线里流转音频帧，而非直接对外暴露原始数据。不过你完全可以通过两种方式捕获它的输出数据，全程不需要碰Media Stream相关内容：

方法1：ScriptProcessorNode（兼容性优先，已废弃但可用） #

这是早期Web Audio API提供的手动音频处理节点，虽然现在已经被标记为废弃，但在旧浏览器里兼容性更好。你可以把它接在目标AudioNode的输出端，然后在回调里捕获每一帧的音频数据：

// 假设你已经有了AudioContext和目标AudioNode
const audioContext = new AudioContext();
const targetNode = ...; // 你的目标AudioNode

// 创建ScriptProcessorNode，参数分别是缓冲区大小、输入声道数、输出声道数
const scriptNode = audioContext.createScriptProcessor(4096, 1, 1);

// 连接管线：让目标节点的音频流进入捕获节点，再输出到扬声器（可选）
targetNode.connect(scriptNode);
scriptNode.connect(audioContext.destination);

// 用来存储捕获到的音频帧
const capturedFrames = [];

scriptNode.onaudioprocess = function(e) {
  // 获取输入缓冲区的第一个声道数据（Float32Array格式）
  const channelData = e.inputBuffer.getChannelData(0);
  // 注意：缓冲区会被复用，所以要复制一份数据存起来
  capturedFrames.push(new Float32Array(channelData));
  
  // 这里可以直接处理数据，比如转成其他格式
};

// 停止捕获时记得断开连接
// targetNode.disconnect(scriptNode);
// scriptNode.disconnect();

方法2：AudioWorkletProcessor（现代推荐方案） #

AudioWorklet是Web Audio的新一代处理方案，它运行在独立的音频线程，不会阻塞主线程，性能更优。步骤分为两部分：

第一步：编写AudioWorklet处理器脚本 #

创建一个单独的JS文件（比如audio-capture-processor.js），内容如下：

class DataCaptureProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    // 取第一个输入的第一个声道数据
    const inputData = inputs[0][0];
    if (inputData) {
      // 将帧数据发送到主线程
      this.port.postMessage(new Float32Array(inputData));
    }
    return true; // 返回true表示继续运行处理器
  }
}

// 注册处理器，供主线程调用
registerProcessor('data-capture-processor', DataCaptureProcessor);

第二步：主线程加载并连接处理器 #

const audioContext = new AudioContext();
const targetNode = ...; // 你的目标AudioNode

// 先加载处理器脚本
await audioContext.audioWorklet.addModule('audio-capture-processor.js');

// 创建捕获节点
const captureNode = new AudioWorkletNode(audioContext, 'data-capture-processor');

// 连接管线
targetNode.connect(captureNode);
captureNode.connect(audioContext.destination); // 可选，保留声音输出

// 存储捕获到的帧数据
const capturedFrames = [];

// 监听来自处理器的音频数据
captureNode.port.onmessage = (e) => {
  capturedFrames.push(e.data);
};

// 停止捕获时断开连接
// targetNode.disconnect(captureNode);
// captureNode.disconnect();

把捕获的数据转为AudioBuffer/ArrayBuffer #

如果需要把零散的音频帧合并成完整的AudioBuffer或ArrayBuffer，可以这样处理：

// 计算总帧数
const totalFrames = capturedFrames.reduce((sum, frame) => sum + frame.length, 0);
// 创建对应规格的AudioBuffer
const audioBuffer = audioContext.createBuffer(1, totalFrames, audioContext.sampleRate);
const channelData = audioBuffer.getChannelData(0);

// 将所有帧复制到AudioBuffer的声道数据里
let offset = 0;
for (const frame of capturedFrames) {
  channelData.set(frame, offset);
  offset += frame.length;
}

// 转成ArrayBuffer的话，直接从Float32Array导出即可
const arrayBuffer = channelData.buffer;

总结一下：虽然不能直接从AudioNode读取数据，但通过上述两种拦截音频流的方式，你可以轻松获取到Float32Array格式的音频数据，再按需转换成AudioBuffer或ArrayBuffer。

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