使用MediaRecorder录制音频WebM时没有元数据

Question

对于我的项目，我使用MediaRecorder录制用户音频，并且效果很好。当我希望使用Wavesurfer.js显示用户记录的波形时，我的问题浮出水面，它不会加载我的记录。但是，使用Audio元素播放录音效果很好。

在尝试了不同的来源之后，它似乎是因为最终的.webm文件没有太多的元数据，甚至没有持续时间或比特率（即使我在MediaRecorder选项中进行了设置）也是如此。这是ffprobe的输出，其中包含以下文件之一：

输入＃0，matroska，webm，来自'206_3.webm'：
元数据：
编码器：Chrome
持续时间：N / A，开始：0.000000，比特率：N / A
流＃0：0（eng）：音频：opus，48000 Hz ，mono，fltp（默认）

所以我的问题是：我在录制音频时做错了吗？这是我开始录制的方法：

// Somewhere in the code...
this._handleUserMedia(await navigator.mediaDevices.getUserMedia({ audio: true }));

// ... and elsewhere
_handleUserMedia(stream) {
    this._mediaRecorder = new MediaRecorder(stream, { audioBitsPerSecond : 64000 });

    this._mediaRecorder.ondataavailable = event => {
      this._mediaBuffer.push(event.data);
    };

    this._mediaRecorder.onstop = () => {
      // Ajoute le buffer et une URL vers le buffer dans les résultats pour la sauvegarde et le playback
      let blob = new Blob(this._mediaBuffer, { type: "audio/webm" });
      this.state.results[this.state.currentWordIdx].recordingBlob = blob;
      this.state.results[this.state.currentWordIdx].recordingUrl = URL.createObjectURL(blob);

      // Réinitialise le buffer pour l'enregistrement suivant
      this._mediaBuffer = [];

      this._gotoNextWord();
    };

    this._gotoNextWord();
  }

如您所见，我创建了一个Blob，稍后将其与NodeJS一起保存fs.writeFile。然后，当我需要显示波形时，我使用fs.readFile如下方式加载文件：

fs.readFile(`${this.getAppData()}/${filePath}`, (err, buffer) => {
    if (err) { reject(err); }
    const blob = new Blob([buffer], {type : 'audio/webm'});
    resolve(URL.createObjectURL(blob)); // Si besoin d'un ArrayBuffer => toArrayBuffer(buffer)
});

Answer 1

我相信元数据如此之少的原因是，默认情况下，MediaRecorder 将生成一个可变比特率文件，对于该文件，单个比特率值没有意义 - 可能（尽管我不确定）导致缺乏明确的持续时间值，如出色地。

该规范最近允许设置恒定的录制比特率，并且很快就会在 Chromium (M89) 中实现