Record as Ogg using MediaRecorder in Chrome

Question

Is there a way we could record ogg format in Chrome while working with MediaRecorder ? I believe, Chrome by default supports WebM. Following is what I do

    navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
        rec = new MediaRecorder(stream);

        rec.ondataavailable = e => {
            audioChunks.push(e.data);
            if (rec.state == "inactive")
            {
                let blob = new Blob(audioChunks, { 'type': 'audio/ogg; codecs=opus' });
            }
        };

    })
    .catch(e => console.log(e));

Answer 1

From the list of supported formats here, it appears it does not.

However, here are some libraries that help you record to alternative formats:

1) Opus Media Recorder: https://github.com/kbumsik/opus-media-recorder

Formats (Container.Codec): Ogg.Opus, WebM.Opus, WAV.PCM
Browsers: Chrome, Firefox, Safari, Edge

Note: Does not let you change the sampling rate for Opus recording from the default of 48000hz. (For example, this means its output can't directly be submitted to DialogFlow, since it requires Opus audio to have a sample rate of 16000hz.)

2) Opus Recorder: https://github.com/chris-rudmin/opus-recorder

Formats: Ogg.Opus, WAV.PCM
Browsers: Chrome, Firefox, Safari, Opera, Edge

3) LibFlac: https://github.com/mmig/libflac.js

Formats: FLAC.FLAC
Browsers: (unknown, but probably same as the above)

See the speech-to-flac example for how to use with microphone input.

4) WebAudioRecorder: https://github.com/higuma/web-audio-recorder-js

Formats: Ogg.Vorbis, MP3.MP3, WAV.PCM
Browsers: (unknown, but probably same as the above)

5) Libraries augmenting MediaRecorder with WAV/PCM support

A: https://github.com/muaz-khan/RecordRTC (recorderType: RecordRTC.StereoAudioRecorder)
B: https://github.com/streamproc/MediaStreamRecorder (mimeType: "audio/wav" or "audio/pcm")

6) Manual WAV.PCM encoding

For WAV.PCM, the format is simple enough you don't necessarily need a library. If you prefer a "lower level" approach, you can look through the examples here: https://stackoverflow.com/a/54213814/2441655

Answer 2

You just missed to start the recoder, like: rec.start(timeslice)

A code like this works, I added a player every time we record audio, so we can play and verify it recorded.

var audioChunks = [];
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
    rec = new MediaRecorder(stream);

    rec.ondataavailable = e => {
        console.log("recording...")
        audioChunks.push(e.data);
        console.log(audioChunks)


        let blob = new Blob(audioChunks, { 'type': 'audio/ogg; codecs=opus' });
        let blobURL = window.URL.createObjectURL(blob)
        createPlayer(blobURL);
    };
    rec.start(5000)

})
.catch(e => console.log(e));

function createPlayer(blobURL) {
    var audioPlayer = document.createElement("AUDIO");
    audioPlayer.src = blobURL;      
    audioPlayer.setAttribute("id", "player");
    audioPlayer.setAttribute("controls", "controls");
    document.body.appendChild(audioPlayer); 
}