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

Question

我已经在React中成功实例化了一个简单的AudioWorklet，并希望像谷歌的例子那样启动一个简单的振荡器。为了测试运行它，我正在渲染一个按钮，其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

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

解决方案是为您的工作处理器（例如您的情况下的worklet/processor.js）提供：

Content-Type: application/javascript

要么

Content-Type: text/javascript

Answer 2

我的代码是直接的JavaScript，而不是React，但我得到了相同的错误，因为提供给addModule的路径不正确。在我的例子中，调用addModule的脚本和作为addModule的参数提供的脚本都驻留在同一目录（“js”）中。尽管如此，我仍然必须在路径中包含此目录以消除错误：

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

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