如何在Chrome中用AudioWorklet替代createScriptProcessor（JS实现）

兄弟我完全懂你的头疼！Chrome 80把createScriptProcessor给彻底弃用了，而且AudioWorklet和它的工作逻辑完全不是一个路子，刚上手确实容易摸不着头脑。作为过来人给你整理个清晰的替换思路和示例，帮你快速转过去~

先搞懂核心差异 #

• createScriptProcessor跑在主线程，很容易因为音频处理阻塞UI；AudioWorklet跑在独立的音频线程，性能拉满，但代码不能直接写在主线程，必须单独定义处理器逻辑，线程间只能通过消息通信。
• createScriptProcessor用onaudioprocess回调处理音频；AudioWorklet需要继承AudioWorkletProcessor类，重写process方法处理样本。

一步一步替换的示例 #

1. 写AudioWorklet处理器逻辑 #

首先你需要一个处理器脚本（可以单独存成.js文件，或者用Blob内嵌在主线程代码里），这里以一个简单的音频 passthrough + 音量调节为例：

// 示例：audio-processor.js
class MyAudioProcessor extends AudioWorkletProcessor {
  // 核心处理方法，每次音频缓冲区就绪时触发
  process(inputs, outputs, parameters) {
    // 获取输入输出的音频缓冲区
    const inputBuffer = inputs[0];
    const outputBuffer = outputs[0];

    // 遍历每个声道（比如立体声的左右声道）
    for (let channel = 0; channel < inputBuffer.length; channel++) {
      const inputSamples = inputBuffer[channel];
      const outputSamples = outputBuffer[channel];
      
      // 把原来createScriptProcessor里的音频处理逻辑搬到这里
      // 这里只是简单复制样本+音量调节，你可以换成自己的逻辑
      for (let i = 0; i < inputSamples.length; i++) {
        outputSamples[i] = inputSamples[i] * (parameters.gain?.[0] || 1);
      }
    }

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

  // 可选：定义可调节的参数（比如音量、滤镜阈值）
  static get parameterDescriptors() {
    return [
      {
        name: 'gain',
        defaultValue: 1,
        minValue: 0,
        maxValue: 2,
        automationRate: 'a-rate' // 支持实时参数自动化
      }
    ];
  }
}

// 注册处理器，主线程会用这个名字调用它
registerProcessor('my-audio-processor', MyAudioProcessor);

2. 主线程加载并使用AudioWorklet #

接下来把原来用createScriptProcessor的代码替换成下面的逻辑：

async function setupAudioProcessing() {
  // 初始化AudioContext（注意：必须由用户交互触发，比如点击按钮）
  const audioContext = new AudioContext();

  // 加载AudioWorklet处理器
  // 如果用单独文件：
  await audioContext.audioWorklet.addModule('audio-processor.js');
  // 如果不想单独存文件，用Blob内嵌：
  // const processorCode = `上面的处理器代码`;
  // const moduleBlob = new Blob([processorCode], { type: 'application/javascript' });
  // await audioContext.audioWorklet.addModule(URL.createObjectURL(moduleBlob));

  // 创建WorkletNode，关联我们注册的处理器
  const workletNode = new AudioWorkletNode(audioContext, 'my-audio-processor');

  // 连接音频源（比如麦克风、本地音频文件）到WorkletNode
  const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const sourceNode = audioContext.createMediaStreamSource(mediaStream);
  sourceNode.connect(workletNode);

  // 把WorkletNode连接到扬声器输出
  workletNode.connect(audioContext.destination);

  // 如果需要从音频线程向主线程传数据（比如可视化用的音频数据），用port通信
  workletNode.port.onmessage = (event) => {
    console.log('收到音频线程的数据:', event.data);
  };

  // 也可以从主线程给音频线程发配置
  workletNode.port.postMessage({ type: 'SET_CONFIG', value: 'your-setting' });
}

// 必须在用户交互后初始化（浏览器安全限制）
document.querySelector('#start-audio-btn').addEventListener('click', setupAudioProcessing);

替换你原有代码的关键思路 #

1. 把onaudioprocess里的音频处理逻辑，原封不动（或者稍作调整）搬到AudioWorkletProcessor的process方法里。
2. 如果原来需要从音频线程向主线程传递数据（比如频谱数据），在process里用this.port.postMessage()发送，然后在主线程的workletNode.port.onmessage里接收。
3. 原来的参数调整（比如动态修改音量），要么用workletNode.parameters.get('gain').value = 0.5，要么用port发送消息到处理器。
4. 做个兼容性降级判断（如果需要支持老浏览器）：

if (AudioContext.prototype.createScriptProcessor) {
  // 旧的createScriptProcessor逻辑
} else if (AudioContext.prototype.audioWorklet) {
  // 新的AudioWorklet逻辑
}

作为JS新手，刚开始接触线程隔离的概念确实会有点懵，但多写两次就顺手了，而且AudioWorklet的性能比旧API好太多。如果你的原有代码有特定的处理逻辑，可以贴出来，大家能帮你更精准地转换~

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