How to convert blob to MP3 in ReactJS?

I am recording audio from microphone of the user with MediaRecorder and using Navigator.getUserMedia.

getUserMedia({ audio: true })
  .then(stream => {
    this.stream = stream;
    const mimeType = 'audio/mp3';
    this.mediaRecorder = new MediaRecorder(stream);
    this.mediaRecorder.start();
    const audioChunks = [];
    this.mediaRecorder.addEventListener('dataavailable', event => {
      audioChunks.push(event.data);
    });

    this.mediaRecorder.addEventListener('stop', () => {
      const audioBlob = new Blob(audioChunks, {
        type: mimeType});
    });
  }).catch(error => { });

I have converted this blob to WAV file in ReactJS with the help of decodeAudioData method of AudioContext. I also used File Reader in this process. But the size of WAV file is too much. Since my usecase is to record the meeting which can go for like 1-2 hours. And for one hour the size is around 350MB.
So I rather need to convert the blob to MP3 has it has relatively less size than WAV.
Please does anyone knows any library to convert blob to MP3 in ReactJS?

10 thoughts on “How to convert blob to MP3 in ReactJS?”

Leave a Comment