Wsrtjtyk

I have started trying to create an audio recorder to use in React using the Web Audio API

Here is the code for my Recorder class

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(() => {

        console.log('added worklet module')



        navigator.mediaDevices.getUserMedia({audio: true, video: false})

          .then(stream => {

            console.log('Have stream')

            let microphone = context.createMediaStreamSource(stream)

            let wavEncoder = new AudioNode(context)



            microphone.connect(wavEncoder).connect(context.destination)

          })

      })

      .catch((e) => {

        alert('Error getting audio')

        console.log(e)

      })

  }





  record() {

    console.log('Start recorder')

    this.recording = true

  }



  stop() {

    console.log('Stop recorder')

    this.recording = false

  }

}

The problem I am having is with this line: context.audioWorklet.addModule('processor.js')

the processor.js file doesn't get added.

and then an error is thrown when it gets to this line:

let wavEncoder = new AudioNode(context)

The error is:

Unhandled Rejection (TypeError): __WEBPACK_IMPORTED_MODULE_0__workletNode___default.a is not a constructor

I've tried the same code outside of react and it is fine. So it is something to do with using audioWorklet.addModule inside react.

Can anyone help?

This is the react component that calls recorder:

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 && this.recorder.record()

  }



  stopRecorder() {

    this.recorder && this.recorder.stop()

  }



  render() {



    return (<div>Speech to text



      <Button id="start" onClick={() => {

        this.startRecorder()

      }}>Record</Button>

      <Button id="stop" onClick={() => {

        this.stopRecorder()

      }}>Stop</Button>

      <div id="recordingslist"></div>

    </div>)

  }

}



const mapStateToProps = () => {

  return {}

}



export default connect(

  mapStateToProps

)(injectIntl(SpeechToTextAudioWorklet))