title: AudioWorklet error: DOMException: The user aborted a request
body: <p>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:</p>
  
  <p>src/App.jsx:</p>
  
  <pre><code>userGesture(){
    //create a new AudioContext
    this.context = new AudioContext();
  
    //Add our Processor module to the AudioWorklet
    this.context.audioWorklet.addModule('worklet/processor.js').then(() =&gt; {
  
    //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 =&gt; console.log(e)))
  }
  </code></pre>
  
  <p>The problem is, on every click, addModule method is returning the following error:</p>
  
  <pre><code>DOMException: The user aborted a request.
  </code></pre>
  
  <p>I am running Chrome v66 on Ubuntu v16.0.4.</p>
  
  <p>src/worklet/worklet-node.js:</p>
  
  <pre><code> export default class MyWorkletNode extends window.AudioWorkletNode {
          constructor(context) {
            super(context, 'my-worklet-processor');
          }
        }
  </code></pre>
  
  <p>src/worklet/processor.js</p>
  
  <pre><code>class MyWorkletProcessor extends AudioWorkletProcessor {
      constructor() {
        super();
      }
  
      process(inputs, outputs) {
        let input = inputs[0];
        let output = outputs[0];
        for (let channel = 0; channel &lt; output.length; ++channel) {
          output[channel].set(input[channel]);
        }
  
  
        return true;
      }
    }
  
    registerProcessor('my-worklet-processor', MyWorkletProcessor);
  </code></pre>