Media Recorder Save in WAV format across browsers

Question

The Media Recorder Was working fantastically for me to do a fairly complicated process along with the rest of Web Audio API documented on Mozilla. However. It is useless to me unless I can get it to record audio consistently in wave format. I have attempted to set the MimeType on many browsers which appears to be deprecated without the knowledge of Mozilla, any attempt to set the mimeType even using the example from the docs here, is not working in any code.

If anyone has any way that this file can be saved as a wave using front-end processing (without the use of a server intermediary) I will be very grateful to hear about it.

It might be worth noting that the ogg format has worked previously for me as long as the file encoding was wav. This example with source code worked until a few days ago on my browser(Brave/Chrome) after which it started saving as webm format.

Also, Worth Noting, I am not married to using MediaRecorder API for this project as long as I am able to get the channel data for processing using the WebAudioAPI after recording.

Answer 1

I built a package which should do exactly what you want. It's called extendable-media-recorder. It offers the same interface as the native MediaRecorder but allows to "extend" it with custom codecs. The example codec is wav.

Here is how you could use it to record a stream coming from getUserMedia():

import { MediaRecorder, register } from 'extendable-media-recorder';
import { connect } from 'extendable-media-recorder-wav-encoder';

await register(await connect());

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecoder = new MediaRecorder(stream, { mimeType: 'audio/wav' });

It will use the built-in MediaRecorder to record pcm data in Chrome. In Firefox and Safari the Web Audio API is used to get the pcm data. Once the data has been retrieved it gets send to a worker which decodes it as wav.