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

【问题标题】：audio capture and playback not working using mediarecorder api and html5 audio tag in firefox os在 firefox os 中使用 mediarecorder api 和 html5 音频标签无法捕获和播放音频
【发布时间】：2015-01-21 04:39:52
【问题描述】：

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

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，但在第一次播放后没有音频声音播放。我如何处理这个以间隔播放录制的语音？

任何建议请..

【问题讨论】：

bugzilla.mozilla.org/show_bug.cgi?id=898771 说这是“预期的行为”（他们甚至不确定预期的行为是什么）......只有第一个 blob 有有效的标题，我们需要找到附加这些斑点在一起..我想！

标签： javascript html firefox audio firefox-os

【解决方案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。

【讨论】：