在 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

从此处支持的格式列表中，似乎没有。

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

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

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

注意：不允许您更改 Opus 录制的默认采样率 48000hz。（例如，这意味着它的输出不能直接提交给DialogFlow，因为它要求 Opus 音频的采样率为 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
浏览器：（未知，但可能与上述相同）

有关如何与麦克风输入一起使用，请参阅语音到 flac 示例。

4）WebAudioRecorder：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 (recorderType: RecordRTC.StereoAudioRecorder)
B: https://github.com/streamproc/MediaStreamRecorder (mimeType: "audio/wav" or "audio/pcm")

6）手动WAV.PCM编码

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

Answer 2

您只是错过了启动重新编码器，例如：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); 
}