在 Chrome 中使用 MediaRecorder 录制为 Ogg

Question

在使用 MediaRecorder 时，我们是否可以在 Chrome 中记录 ogg 格式？我相信，Chrome 默认支持 WebM。以下是我的工作

    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

从支持格式列表here 看来，它不支持。

但是，这里有一些库可以帮助您以其他格式录制：

1) Opus 媒体记录器：https://github.com/kbumsik/opus-media-recorder

格式（Container.Codec）：Ogg.Opus、WebM.Opus、WAV.PCM
浏览器：Chrome、Firefox、Safari、Edge

注意：不允许您从默认的 48000hz 更改 Opus 录制的采样率。 （例如，这意味着它的输出不能直接提交给DialogFlow，因为它是requires Opus audio to have a sample rate of 16000hz。）

2) 作品记录器：https://github.com/chris-rudmin/opus-recorder

格式：Ogg.Opus、WAV.PCM
浏览器：Chrome、Firefox、Safari、Opera、Edge

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

格式：FLAC.FLAC
浏览器：（未知，但可能与上述相同）

请参阅speech-to-flac example，了解如何使用麦克风输入。

4) 网络录音机：https://github.com/higuma/web-audio-recorder-js

格式：Ogg.Vorbis、MP3.MP3、WAV.PCM
浏览器：（未知，但可能与上述相同）

5) 通过 WAV/PCM 支持扩充 MediaRecorder 的库

A：https://github.com/muaz-khan/RecordRTC（录音机类型：RecordRTC.StereoAudioRecorder）
B：https://github.com/streamproc/MediaStreamRecorder（mimeType：“audio/wav”或“audio/pcm”）

6) 手动 WAV.PCM 编码

对于 WAV.PCM，格式很简单，您不一定需要库。如果您更喜欢“较低级别”的方法，可以查看此处的示例：https://stackoverflow.com/a/54213814/2441655

Answer 2

你只是错过了启动recoder，比如：rec.start(timeslice)

这样的代码有效，我每次录制音频时都添加了一个播放器，这样我们就可以播放并验证它是否录制了。

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); 
}