在React项目中创建AudioWorklet时遇AudioWorkletNode未定义编译错误求助

这个报错'AudioWorkletNode' is not defined no-undef本质是ESLint的问题——create-react-app默认的ESLint配置没有将Web Audio API的全局变量纳入识别范围，所以它把浏览器原生的AudioWorkletNode当成了未定义的自定义变量。下面给你几个快速解决的方法：

方案1：在文件顶部声明全局变量 #

直接在你的worklet-node.js文件最顶部添加一行注释，告诉ESLint这个是全局对象：

/* global AudioWorkletNode */
class MyWorkletNode extends AudioWorkletNode {
  constructor(context) {
    super(context, 'my-worklet-processor');
    // 你的自定义逻辑
  }
}

这个方法最简单，不需要修改任何配置文件。

方案2：显式通过window对象引用 #

既然AudioWorkletNode是浏览器全局对象，我们可以直接通过window来访问它，这样ESLint就不会报错了：

class MyWorkletNode extends window.AudioWorkletNode {
  constructor(context) {
    super(context, 'my-worklet-processor');
    // 你的自定义逻辑
  }
}

方案3：修改ESLint配置（需自定义create-react-app配置） #

如果你已经通过npm run eject、craco或者react-app-rewired解锁了自定义配置权限，可以修改ESLint的配置文件，添加Web Audio相关的全局变量或者开启browser环境：
在.eslintrc（或相关配置文件）中添加：

{
  "env": {
    "browser": true
  },
  "globals": {
    "AudioWorkletNode": true,
    "AudioWorkletProcessor": true
  }
}

开启browser环境会让ESLint自动识别所有浏览器原生全局对象，当然你也可以单独指定需要的Web API变量。

额外注意：React环境下AudioWorklet的加载路径 #

除了ESLint的问题，还要注意AudioWorklet处理器脚本的加载路径——create-react-app会把src目录下的文件打包处理，所以处理器脚本最好放在public文件夹下，然后通过process.env.PUBLIC_URL来引用：

import { useEffect } from 'react';
import MyWorkletNode from './worklet/worklet-node';

function App() {
  useEffect(() => {
    async function initAudioWorklet() {
      const audioContext = new AudioContext();
      // 加载处理器脚本，路径指向public下的文件
      await audioContext.audioWorklet.addModule(`${process.env.PUBLIC_URL}/worklet/processor.js`);
      const myNode = new MyWorkletNode(audioContext);
      // 后续将节点连接到音频上下文等操作
      myNode.connect(audioContext.destination);
    }

    // 确保在浏览器环境下初始化
    if (typeof window !== 'undefined') {
      initAudioWorklet();
    }
  }, []);

  return <div>My Audio Worklet App</div>;
}

export default App;

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