AudioWorkletProcessor未定义：如何/在哪里定义该接口？

核心结论 #

AudioWorkletProcessor是Web Audio API的内置接口，不需要额外引入第三方库，但它只能在AudioWorklet专属运行上下文中生效，这是你代码报错的关键原因。

为什么会出现报错？ #

你的代码是AudioWorklet处理器的实现，但如果直接把它当成普通Worker文件加载，或者在主线程中执行，就会找不到AudioWorkletProcessor和registerProcessor这两个仅存在于AudioWorklet上下文的内置对象，浏览器自然会抛出异常。

正确的使用流程 #

1. 主线程中加载处理器模块
   必须通过AudioContext的audioWorklet.addModule()方法加载你的处理器文件，不能用普通的new Worker()方式：

   // 主线程代码
   const audioContext = new AudioContext();
   // 等待处理器模块加载完成
   await audioContext.audioWorklet.addModule('./your-processor-file.js');
   

2. 创建节点并接入音频链路
   模块加载完成后，才能创建对应的AudioWorkletNode并连接到音频输入输出链路：

   // 创建自定义处理器节点
   const recorderNode = new AudioWorkletNode(audioContext, 'audio-recorder');
   // 连接麦克风输入和音频输出
   const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
   const sourceNode = audioContext.createMediaStreamSource(mediaStream);
   sourceNode.connect(recorderNode);
   recorderNode.connect(audioContext.destination);
   

IDE标记未定义的解决办法 #

PyCharm等IDE会因为缺少AudioWorklet上下文的类型定义，误标AudioWorkletProcessor未定义。你可以安装Web Audio API的类型声明包来修复：

npm install @types/webaudio-api --save-dev

安装后IDE就能识别这些内置接口，不会再出现错误提示。

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