title: How to use audioWorklet.addModule in React?
body: <p>I have started trying to create an audio recorder to use in React using the <a href="https://webaudio.github.io/web-audio-api/#audioapi" rel="nofollow noreferrer">Web Audio API</a></p>
  
  <p>Here is the code for my Recorder class</p>
  
  <pre><code>import AudioNode from './workletNode'
  
  
  export default class Recorder {
    constructor(context) {
  
      this.context = context
      this.recording = false
  
      console.log(context)
  
      context.audioWorklet.addModule('processor.js')
        .then(() =&gt; {
          console.log('added worklet module')
  
          navigator.mediaDevices.getUserMedia({audio: true, video: false})
            .then(stream =&gt; {
              console.log('Have stream')
              let microphone = context.createMediaStreamSource(stream)
              let wavEncoder = new AudioNode(context)
  
              microphone.connect(wavEncoder).connect(context.destination)
            })
        })
        .catch((e) =&gt; {
          alert('Error getting audio')
          console.log(e)
        })
    }
  
  
    record() {
      console.log('Start recorder')
      this.recording = true
    }
  
    stop() {
      console.log('Stop recorder')
      this.recording = false
    }
  }
  </code></pre>
  
  <p>The problem I am having is with this line:  <code>context.audioWorklet.addModule('processor.js')</code></p>
  
  <p>the processor.js file doesn't get added.</p>
  
  <p>and then an error is thrown when it gets to this line:</p>
  
  <pre><code>let wavEncoder = new AudioNode(context)
  </code></pre>
  
  <p>The error is:</p>
  
  <p><em>Unhandled Rejection (TypeError): __WEBPACK_IMPORTED_MODULE_0__workletNode___default.a is not a constructor</em></p>
  
  <p>I've tried the same code outside of react and it is fine. So it is something to do with using <code>audioWorklet.addModule</code> inside react.</p>
  
  <p>Can anyone help?</p>
  
  <p>This is the react component that calls recorder:</p>
  
  <pre><code>import React from 'react'
  import {connect} from 'react-redux'
  import {Button} from 'semantic-ui-react'
  import {injectIntl} from 'react-intl'
  import Recorder from './recorder'
  
  class SpeechToTextAudioWorklet extends React.Component {
  
    componentDidMount() {
      this.context = null
      this.recorder = null
    }
  
    startRecorder() {
      if (!this.context) {
        this.context = new window.AudioContext()
        this.recorder = new Recorder(this.context)
      } else {
        this.context.resume()
      }
  
      this.recorder &amp;&amp; this.recorder.record()
    }
  
    stopRecorder() {
      this.recorder &amp;&amp; this.recorder.stop()
    }
  
    render() {
  
      return (&lt;div&gt;Speech to text
  
        &lt;Button id="start" onClick={() =&gt; {
          this.startRecorder()
        }}&gt;Record&lt;/Button&gt;
        &lt;Button id="stop" onClick={() =&gt; {
          this.stopRecorder()
        }}&gt;Stop&lt;/Button&gt;
        &lt;div id="recordingslist"&gt;&lt;/div&gt;
      &lt;/div&gt;)
    }
  }
  
  const mapStateToProps = () =&gt; {
    return {}
  }
  
  export default connect(
    mapStateToProps
  )(injectIntl(SpeechToTextAudioWorklet))
  </code></pre>