如何将录音场景下的ScriptProcessor逻辑转换为AudioWorklet实现

以下实现完全对齐原有逻辑：单输入单输出1通道，采集麦克风输入的第一通道数据发送给Worker，支持音频直通到输出设备。

步骤1：创建独立的AudioWorklet处理器文件 #

新建mic-processor.js文件，内容如下：

class MicProcessor extends AudioWorkletProcessor {
  process(inputs, outputs) {
    // 提取第一输入的第一通道音频数据，与原有逻辑一致
    const input = inputs[0];
    if (input.length > 0) {
      const channelData = input[0];
      // 发送音频数据到主线程
      this.port.postMessage(channelData);
    }

    // 音频直通逻辑：如果不需要输出到扬声器可删除以下这段
    const output = outputs[0];
    for (let channel = 0; channel < output.length; channel++) {
      input[channel] && output[channel].set(input[channel]);
    }

    // 返回true表示处理器持续运行
    return true;
  }
}

// 注册处理器
registerProcessor('mic-processor', MicProcessor);

步骤2：替换主线程原有逻辑 #

将原有ScriptProcessor相关代码替换为以下内容：

const context = new AudioContext();
const microphone = context.createMediaStreamSource(stream);

// 加载AudioWorklet模块后初始化节点
context.audioWorklet.addModule('mic-processor.js')
  .then(() => {
    // 初始化Worklet节点，参数对齐原createScriptProcessor配置
    const processorNode = new AudioWorkletNode(context, 'mic-processor', {
      numberOfInputs: 1,
      numberOfOutputs: 1,
      channelCount: 1
    });

    // 监听Worklet返回的音频数据，转发到你的业务Worker
    processorNode.port.onmessage = (e) => {
      const array = e.data;
      realTimeWorker.postMessage({cmd: 'encode', buf: array});
      // 可选优化：开启零拷贝传输，减少内存占用
      // realTimeWorker.postMessage({cmd: 'encode', buf: array}, [array.buffer]);
    };

    // 节点连接逻辑与原有逻辑完全一致
    microphone.connect(processorNode);
    processorNode.connect(context.destination);
  });

注意事项 #

• 若不需要将麦克风音频输出到扬声器，可删除processorNode.connect(context.destination)这行代码
• AudioWorklet文件需要通过HTTP/HTTPS协议访问，本地file协议无法正常加载
• 所有AudioContext相关初始化逻辑必须放在用户交互事件（如按钮点击）的回调中执行，符合浏览器自动播放限制要求

内容的提问来源于stack exchange，提问作者Sound in Worship