reactjs - AudioWorklet错误: DOMException: The user aborted a request

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

我的代码是直接的 JavaScript，而不是 React，但我得到了同样的错误，因为提供给 addModule 的路径不正确。就我而言，调用 addModule 的脚本和作为 addModule 参数提供的脚本都位于同一目录(“js”)中。尽管如此，我仍然必须在路径中包含此目录才能消除错误:

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

我希望这有帮助。祝你好运!