In a React project that is written in TypeScript, I use the 'extendable-media-recorder' along with the 'extendable-media-recorder-wav-encoder' (link to repo). This package is used to allow the user to record his/her voice. This works when the user records his/her voice only once but upon recording again and stopping the recording the following error is given: Media encoder error
This error is given after the user stops the recorder the second time, so starting the recorder again does seem to work. I don't understand where this error comes from since the error and the way it occurs would indicate the error originates from stopping the recorder the second time. However, the code for stopping the recorder does catch potential errors whereas the error states that it is not caught.
The way I use the media-recorder in my code is the following:
import microphoneLogo from '../images/microphone.png'
import stopLogo from '../images/stop.png'
import { MediaRecorder, register } from 'extendable-media-recorder';
import { connect } from 'extendable-media-recorder-wav-encoder';
let mediaRecorder: any;
export default () => {
const [microphoneOn, setMicrophone] = useState<boolean>(false)
const [audioSetUp, setAudioSetUp] = useState<boolean>(false)
//Instantiate the mediaRecorder and create an encoder object.
async function setupAudioRecording() {
let port;
try {
port = await connect();
try {
await register(port);
} catch (e2) {
console.log('E2: ' + e2);
}
} catch (e1) {
console.log('E1: ' + e1);
}
const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(mediaStream, {
mimeType: 'audio/wav',
audioBitsPerSecond: 44100,
});
setAudioSetUp(true);
}
async function startRecording() {
try {
mediaRecorder.start();
} catch (e) {
console.log(e);
}
mediaRecorder.addEventListener('dataavailable', ({ data }: any) => {
put(data); //This method sends the blob data to the server to be processed
});
}
async function stopRecording() {
try {
await mediaRecorder?.stop()
} catch (e) {
console.log(e);
}
}
return (
<div className="input">
<input
className="input__microphone"
type="image"
src={microphoneOn ? stopLogo : microphoneLogo}
alt="Microphone"
onClick={handleClick}
/>
</div>
)
}
Does anyone know what causes this error and how I could fix it? Possible suggestions regarding other audio recording libraries (compatible with TypeScript) are also more than welcome.
Many thanks in advance.