Blob show type as audio/wav but still show up as webm after converted to Base64

[andrewroar]

After recording and recieve the blob as audio/wav, I use new FileReader().readAsDataURL(blob) to convert to base64. I then tried to convert it back to audio with the following website (https://base64.guru/converter/decode/audio) but it indicates it as webm.

I am trying to pass the base64 to another api which only support wav. The base64 I got from converting the blob currently does not work despite working with other wav files we tested it with.

[ramonrovirosa]

@andrewroar did you end up figuring this out? Facing the same issue.

[andrewroar]

@ramonrovirosa I'm afraid not. I end up just writing my own recorder instead.

[ramonrovirosa]

In case it helps anyone in the future, what I did was pass the file as a base64 string to the server and on the server using ffmpeg, I converted the file to an mp3. That finally worked. Something like this

Frontend React

//Initialization
const { status, startRecording, stopRecording, mediaBlobUrl } =
    useReactMediaRecorder({ video: false, audio: true });

//Handling of media URL
const blobToBase64 = async (url) => {
  return new Promise(async (resolve, _) => {
    const blob = await fetch(url).then(r => r.blob());

    // instantiate a file reader
    const fileReader = new FileReader();

    // read the file
    fileReader.readAsDataURL(blob);

    fileReader.onloadend = () => {
      resolve(fileReader.result); // Here is the base64 string
    };
  });
};

const base64AudioFile = await blobToBase64(mediaBlobUrl);
sendToServer(file: base64AudioFile)

Then on my server essentially I did with ffmpeg

file = params['file']
decoded_file_string = Base64.decode64(file)
saveAsWavFileOnFileSystem(decoded_file_string)
ffmpeg -y -i path/to/saved_file.wav -vn -ar 44100 -ac 2 -b:a 192k  path/to/new_file.mp3

[renny-ren]

I'm facing the same issue and I have to use ffmpeg to convert the audio format manually.