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

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

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

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

Answer 2

这对我有用：从文件public夹而不是src. 该addModule(url)函数默认指向那里，所以addModule('worklets/foo.js')引用文件public\worklets\foo.js

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

Answer 3

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

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

Content-Type: application/javascript

或者

Content-Type: text/javascript