Question

我已经在React中成功实例化了一个简单的AudioWorklet，并希望像Google的例子一样启动一个简单的振荡器。为了测试运行它，我正在渲染一个按钮，其onClick事件调用以下内容：

的src / App.jsx：

userGesture(){
  //create a new AudioContext
  this.context = new AudioContext();

  //Add our Processor module to the AudioWorklet
  this.context.audioWorklet.addModule('worklet/processor.js').then(() => {

  //Create an oscillator and run it through the processor
  let oscillator = new OscillatorNode(this.context);
  let bypasser = new MyWorkletNode(this.context, 'my-worklet-processor');

  //Connect to the context's destination and start
  oscillator.connect(bypasser).connect(this.context.destination);
  oscillator.start();
  })
  .catch((e => console.log(e)))
}

问题是，每次点击，addModule方法都会返回以下错误：

DOMException: The user aborted a request.

我在Ubuntu v16.0.4上运行Chrome v66。

的src / worklet / worklet-的node.js：

 export default class MyWorkletNode extends window.AudioWorkletNode {
        constructor(context) {
          super(context, 'my-worklet-processor');
        }
      }

的src / worklet / processor.js

class MyWorkletProcessor extends AudioWorkletProcessor {
    constructor() {
      super();
    }

    process(inputs, outputs) {
      let input = inputs[0];
      let output = outputs[0];
      for (let channel = 0; channel < output.length; ++channel) {
        output[channel].set(input[channel]);
      }


      return true;
    }
  }

  registerProcessor('my-worklet-processor', MyWorkletProcessor);

Answer 1

对于任何其他遇到此神秘错误的人，请吞下自豪感并检查以下各项：

处理器没有任何错误。
处理器正在调用具有到外部文件的正确路径的外部模块。
外部模块没有任何错误。

当通过“导入”加载的外部模块有错误，或者无法解析到模块的路径（例如，模块的路径错误且不正确）时，诺言将终止。 t指向现有文件）。

Answer 2

这似乎是Chromium模块加载器中的bug，它通过删除空格来解析worklet/processor.js文件，这反过来导致该文件到处都有JavaScript语法错误，最终导致该通用错误出现非解释性错误消息。

解决方案是通过以下方式为您的工作处理器提供服务（例如您的案例中的worklet/processor.js）

Content-Type: application/javascript

或

Content-Type: text/javascript

Answer 3

我的代码是纯JavaScript，不是React，但由于提供给addModule的路径不正确，因此出现了相同的错误。就我而言，调用addModule的脚本和作为addModule的参数提供的脚本都位于同一目录（“ js”）中。尽管如此，我仍然必须在路径中包含此目录以消除错误：

...addModule('js/StreamTransmitter.js')...

我希望这会有所帮助。祝你好运！

Answer 4

这对我有用：从 public 文件夹而不是 src 提供您的工作集文件。 addModule(url) 函数默认指向那里，因此 addModule('worklets/foo.js') 引用文件 public\worklets\foo.js

来源：https://hackernoon.com/implementing-audioworklets-with-react-8a80a470474

Answer 5

变化：

this.context.audioWorklet.addModule('worklet/processor.js')

与

this.context.audioWorklet.addModule('../worklet/processor.js')

为我工作。

AudioWorklet错误：DOMException：用户中止了请求

5 个答案: