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