2

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.

1 Answer 1

0

I just stumbled upon this today. There was a bug in the code which is hopefully fixed in v6.1.56.

https://github.com/chrisguttandin/extendable-media-recorder/commit/8f639309b93061dd39233ee702c11515cb992d4d

It should now work as expected. Please feel free to open an issue on GitHub if you run into any further problems.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.