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 Media Recorder：https://github.com/kbumsik/opus-media-recorder

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

注意：不允许您将Opus录制的采样率从默认的48000hz更改。（例如，这意味着其输出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）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”或“ 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); 
}

在Chrome中使用MediaRecorder录制为Ogg

2 个答案: