context.audioWorklet.addModule() returns DOMException: The user aborted a request.

[heyaphra]

I've successfully instantiated a simple AudioWorklet in React and wish to start a simple oscillator like in Google's example. In order to test run it, I am rendering a button whose onClick event calls the following:

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)))
}

The problem is, on every click, addModule method is returning the following error:

DOMException: The user aborted a request. I am running Chrome v66 on Ubuntu v16.0.4.

src/worklet/worklet-node.js:

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

src/worklet/processor.js [have tried extending window.AudioWorkletProcessor]

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);

Something is causing addModule() to return an unresolved promise and I am unfamiliar with this error type.

[rtoy]

This isn't a general WebAudio support group. This is for issues about the WebAudio specification itself.

However, if you're actually running userGesture on every click, you create a new context each time, which is an unusual approach, and then you also addModule and register the same name again. This is not allowed: https://webaudio.github.io/web-audio-api/#dom-audioworkletglobalscope-registerprocessor, step 2.

[heyaphra]

This isn't a general WebAudio support group. This is for issues about the WebAudio specification itself.

Noted :) Thanks for the input! Is there a forum besides StackOverflow for the WebAudio API?

[rtoy]

I usually go to StackOverflow or the WebAudio Slack channel. There are probably others.

[iooops]

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

Have you fixed this when using Reactjs? I'm having problems with this.

The error message is

Unhandled Rejection (TypeError): Failed to construct 'AudioWorkletNode': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

[padenot]

As noted above, please don't use this as a support forum. Stack Overflow or the Web Audio API slack are better suited venues for asking questions like this.