对于我的项目，我使用 MediaRecorder 录制用户音频，它几乎工作正常。当我希望使用 Wavesurfer.js 显示用户录音的波形时，我的问题就出现了，但它不会加载我的录音。不过，使用音频元素播放录音效果很好。
在尝试不同的源之后，似乎是因为最终的 .webm 文件没有太多元数据，甚至没有持续时间或比特率（即使我在 MediaRecorder 选项中设置了它）。
以下是 ffprobe 的输出以及其中一个文件：
输入 #0，matroska，webm，来自“206_3.webm”：
元数据：
编码器：Chrome
持续时间：N/A，开始：0.000000，比特率：N/A
流 #0:0(eng)：音频：opus、48000 Hz、单声道、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)
});
