React中创建可导入第三方包的AudioWorkletProcessor求助

问题核心 #

你遇到的错误根源在于：

• 普通Worker环境不存在AudioWorkletProcessor，因此直接用new Worker()加载Worklet脚本必然报错
• 不存在new AudioWorklet()这个API，正确的加载方式是AudioContext.audioWorklet.addModule()，但默认情况下该方法无法直接处理ES模块导入，导致第三方包无法被正确加载

解决方案：打包AudioWorklet模块 #

AudioWorklet脚本需要被单独打包为适配其运行环境的文件，确保第三方依赖被嵌入其中。以下是针对React常用构建工具的具体配置：

1. Create React App（Webpack）配置 #

借助craco自定义Webpack规则，单独处理Worklet脚本：

• 安装依赖：

npm install @craco/craco --save-dev

• 项目根目录创建craco.config.js：

module.exports = {
  webpack: {
    configure: (config) => {
      config.module.rules.push({
        test: /\.worklet\.js$/,
        use: [
          {
            loader: 'file-loader',
            options: { name: '[name].[contenthash].js' },
          },
          {
            loader: 'babel-loader',
            options: { presets: ['@babel/preset-env'] },
          },
        ],
      });
      return config;
    },
  },
};

• 修改package.json脚本：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

• 重命名Worklet脚本为record-processor.worklet.js，保持原有导入逻辑：

import { Encoder } from "@vocaltale/opus.js";

class PlaybackProcessor extends AudioWorkletProcessor {
  // 必须实现process方法
  process(inputs, outputs, parameters) {
    // 你的音频处理逻辑
    return true;
  }
}

registerProcessor("playback-processor", PlaybackProcessor);

• 在React组件中加载：

import recordWorkletUrl from './worklets/record-processor.worklet.js';

async function setupAudioWorklet() {
  const context = new window.AudioContext() || new window.webkitAudioContext();
  await context.audioWorklet.addModule(recordWorkletUrl);
  const recordNode = new AudioWorkletNode(context, "playback-processor");
  // 后续音频流连接逻辑
}

2. Vite配置 #

Vite原生支持AudioWorklet模块，直接通过后缀标记即可：

• 在React组件中导入Worklet脚本时添加?worklet后缀：

import recordWorkletUrl from './worklets/record-processor.js?worklet';

async function setupAudioWorklet() {
  const context = new window.AudioContext() || new window.webkitAudioContext();
  await context.audioWorklet.addModule(recordWorkletUrl);
  const recordNode = new AudioWorkletNode(context, "playback-processor");
  // 后续音频流连接逻辑
}

• Worklet脚本保持原有导入代码即可，Vite会自动打包适配AudioWorklet环境的文件。

注意事项 #

• AudioWorkletProcessor必须实现process方法，否则会触发报错
• 确认第三方包@vocaltale/opus.js不依赖DOM或Node.js专属API，确保能在AudioWorklet环境运行
• 浏览器限制自动播放音频，需将Worklet初始化逻辑绑定到用户交互事件（如按钮点击）

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