How to set the Blob type to audio/wav

[possibly]

When using MediaRecorder, the type of the Blob file can be set to formats other than webm. Is there a way to set the Blob type to audio/wav?

I have the AudioRecorder component:

<AudioRecorder
            onRecordingComplete={addAudioElement}
            downloadFileExtension="wav"
            ...

addAudioElement looks like:

const addAudioElement = async (blob: Blob) => {
    const audioArrayBuffer = await blob.arrayBuffer();
    const base64AudioData = btoa(String.fromCharCode(...new Uint8Array(audioArrayBuffer)))
    console.log(base64AudioData)
  };

Using a tool like https://base64.guru/converter/decode/audio to decode the base64 encoded audio back into audio shows that the audio is in webm format.

Is it possible to simply encode the data chunks from the media recorder as audio/wav without worry about cross origin isolation since I am not interested in downloading the audio?

[samhirtarif]

@possibly - This package uses the package @ffmpeg/ffmpeg to convert audio from webm to wav or mp3
But since @ffmpeg/ffmpeg uses SharedArrayBuffer that requires a site to be cross-origin isolated, this conversion only works when your site is cross-origin isolated, otherwise the downloaded format is always webm

In case you are using vite, I can share a code snippet with you that would at least make your development server cross-origion isolated

[possibly]

Hey @samhirtarif ! Thanks for getting back to me.

I saw that, and that limitation. As an alternative, I've seen snippets like the following floating around:

From my limited understanding, it seems like there is some way to take the audio chunks in some raw format and, right before putting them into the Blob, encode them in the desired format there?

Is this technique applicable to this project, and for the wav file format?

[samhirtarif]

@possibly - This is the approach that was initially used in this package to do the file type conversions as well, but to no avail.

The downloaded files were still in the webm format, despite creating a new Blob with appropriate mimetype and appending the proper extension to the downloaded file.

[possibly]

@samhirtarif Ah I see.

I also tried passing my desired mimetype in the mediaRecorderOptions parameter, similar to whats in the demo, but both Chrome and Firefox threw errors.

Thanks for looking into the available options and providing the ffmpeg one!