Question

我正在使用window.MediaRecorder录制 wav 音频文件，然后将其上传到S3。我将数据块保存到一个数组中，然后在录制结束后用它们创建一个 Blob 。这工作正常，我没有记录或播放文件的问题。但是，我不能为我的生活弄清楚如何设置生成的Blob文件的持续时间。

每当我在本地下载文件或将其上传到s3时，任何地方都没有持续时间元数据。我正在保存用户录制的音频持续时间，但无法将其有效地附加到音频文件。我觉得应该有一个简单的解决方案，但我只是花了几个小时搜索，似乎无法找到任何东西。它必须是可能的，所以我错过了什么？

Answer 1

我对此问题进行了大量研究，得出的结论是，由于webm文件的编码方式，要获得持续时间，您必须解析二进制文件，将所有帧合计为一个持续时间。这是非常复杂和乏味的。如果您对此感兴趣，请阅读How to parse webm。

我走的路线是一种简单得多的方法。录制完文件后，您应该提取它并将其附加到音频元素。如果现在检查持续时间，您仍然会发现它不正确。您需要做的是等待loadedmetadata事件。此时，您可以运行以下功能：

checkForDuration(cb =()=> {}) {
  if(this.element.duration === Infinity) {
    this.element.currentTime = 1e101;
    this.element.ontimeupdate = function() {
      this.ontimeupdate = ()=> {return;};
      cb();
    };
  } else {
    cb();
  }
}

在回调被调用时，您可以检查音频元素的duration属性以获得正确的持续时间。然后，您可以将持续时间存储在数据库中，以备将来使用。

Answer 2

可能你已经找到了解决方案，但是我发布给任何对此感兴趣的人都可以看到。

您可以使用 MediaRecorder.onstart 和 onstop 事件。

当触发MediaRecorder的onstart事件时，您需要使用Date.now（）等方式获取当前日期。
触发onstop事件时，也会获取当前日期。
您需要减去这两个日期才能获得录制音频的持续时间。

参考文献：

Answer 3

有一个库包装在浏览器的本机MediaRecorder中，称为RecordRTC。它公开了一个名为getSeekableBlob()的函数。

请确保在您的网页中包含EBML.js CDN，因为getSeekableBlob()取决于它：

<script src="https://www.webrtc-experiment.com/EBML.js"></script>

您可以看到示例用法here。

function stopRecordingCallback() {
    video.muted = false;
    video.volume = 1;
    video.src = video.srcObject = null;
    getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
        video.src = URL.createObjectURL(seekableBlob);
        recorder.stream.stop();
        recorder.destroy();
        recorder = null;
        document.getElementById('btn-start-recording').disabled = false;
        invokeSaveAsDialog(seekableBlob, 'seekable-recordrtc.webm');
    });
}

从浏览器中的Blob中保存持续时间

3 个答案: