13

我已经成功地在 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);
4

5 回答 5

9

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

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

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

于 2019-02-20T18:52:08.787 回答
3

对于遇到此神秘错误的其他人，请放下您的骄傲并检查以下内容：

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

当通过“import”加载的外部模块出现错误，或者无法解析模块的路径（例如，模块的路径错误并且不指向现有文件）时，promise将中止。

于 2020-07-10T03:07:11.940 回答
2

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

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

Content-Type: application/javascript

或者

Content-Type: text/javascript
于 2018-07-22T22:04:26.230 回答
2

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

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

于 2021-01-02T12:21:52.140 回答
0

改变：

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

和

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

为我工作。

于 2021-04-29T10:28:38.110 回答