Media Recorder API encoding audio/mp4 stream to base64 string

Question

I'm building a web app and need voice input from the user. On Desktop the input works well with "audio/webm" MimeType.

Recorder

  const mimeType = 
    MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' 
    : MediaRecorder.isTypeSupported('audio/aac') ? 'audio/aac' 
    : MediaRecorder.isTypeSupported('audio/mpeg') ? 'audio/mpeg' 
    : MediaRecorder.isTypeSupported('audio/mp3') ? 'audio/mp3' 
    : MediaRecorder.isTypeSupported('audio/mp4') ? 'audio/mp4' 
    : 'audio/ogg';

  navigator?.mediaDevices?.getUserMedia({ audio: true })
        .then((stream: any) => {
          initialMediaRecorder(stream)
  }

  const initialMediaRecorder = async (stream: any) => {
    const mRecorder = new MediaRecorder(stream,{
      audioBitsPerSecond: 64000,
      mimeType
    })

    ...

    mRecorder.onstop = () => {
      const audioBlob = new Blob(chunks.current, { type: mimeType })
      blobToBase64(audioBlob, getText)
    }
  }

I then try to convert the blob to base64 before sending it to an API. Here i tested it with base64.guru/converter and the format always is “application/octet-stream”.

const blobToBase64 = async (blob:any, callback:any) => {
  const alt = await blobToBase64Alternative(blob);
    const reader = new FileReader();
    reader.onload = function () {
      const base64data = String(reader?.result)?.split(",")[1];
      callback(base64data);
    };
    reader.readAsDataURL(blob);
  };

I tested different MimeTypes and transformation methods, but nothing was able to fix it yet.