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.

Austin

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.

Liz

wow, take that Chris rock, you are my new favorite Chris. I am just testing then if all goes smoothly I will mark this correct. – Austin

did you intend to write import {MediaRecorder, register} from 'extendable-media-recorder';? I have that now and it is working. and I have confirmed that without this addition it does not work. The edit queue is full or i would make the change in your answer myself. – Austin

Thanks a lot for making me aware of that mistake. I just fixed the example code. I copied it straight from the readme. Do you want to fix it there or should I do it? – Liz

I have had a problem that I want to report as an issue on the library, It appears that the native MediaRecorder also runs and I get the "Unhandled Rejection (Error): There was no instance of an encoder stored with the given id." Error – Austin

Could you please open an issue on GitHub (github.com/chrisguttandin/extendable-media-recorder/issues/new) and preferably add some steps that I can run to reproduce the problem? Thanks. – Liz