Dfyjkt

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