在 firefox os 中使用 mediarecorder api 和 html5 音频标签无法进行音频捕获和播放

Question

我想每隔一段时间捕获语音并在音频标签中播放。

https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/这个录音机示例链接是一个很好的网站。 这里使用

record.onclick = function() {
  mediaRecorder.start();

在这里开始录制音频。 如果我使用

mediaRecorder.start(2000); // 2sec interval

然后它将每 2 秒间隔提供数据

mediaRecorder.ondataavailable = function(e) {

这个函数将被调用，它给出 blob 中的音频数据（e.data）在这个函数中音频 src 被设置。

var audioURL = window.URL.createObjectURL(e.data);
audio.src = audioURL;

调用audio.play() 可以播放音频。 但问题是它第一次播放 2 秒录制的声音。 但在那之后，当 2 秒的下一个数据到来时，没有音频播放。 有作为 blob 的音频数据，但在第一次播放后没有音频播放.. 我该如何处理以间隔播放录制的语音？

任何建议lz..

Answer 1

好的，我找到了解决方案，即MediaSource API （是的，另一个不稳定的 API）。 您可以在该文档或我的简单版本中找到一些示例：

var mediaSource = new MediaSource();
var replay = document.querySelector('#replay');
replay.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function(e) {
    console.log('sourceopen')
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
});

var mediaConstraint = { video: true, audio: true };
navigator.getUserMedia(mediaConstraint, function(stream) {
    var mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start(3000);
    mediaRecorder.ondataavailable = function(e) {
        var fileReader = new FileReader();
        fileReader.onload = function() {
            sourceBuffer.appendBuffer(fileReader.result);
        };
        fileReader.readAsArrayBuffer(e.data);
    }
}, function(error){});

请注意，在 Firefox 中，您需要将 enable-media-source 标志设置为 true。