时间戳

首页 > 解决方案 > 录制和保存音频文件变得很奇怪

javascript - 录制和保存音频文件变得很奇怪

问题描述

我开始构建一个记录音频并保存它的 Electron 应用程序。我可以录制音频并保存它，然后我也可以播放它。但是当我玩它时，会发生一些奇怪的事情。这是它在 Groovy 播放器上的样子：

在此处输入图像描述

而且在 VLC 中，它在左侧和右侧显示相同的时间。

这是我停止录制时的代码

mediaRecorder.addEventListener("stop", async () => {
  const audioBlob = new Blob(audioChunks, { type: "audio/wav" });
  const buffer = Buffer.from(await audioBlob.arrayBuffer());

  const { filePath } = await dialog.showSaveDialog({
    buttonLabel: "Save Audio",
    defaultPath: `aud-${Date.now()}.wav`,
  });
  writeFile(filePath, buffer, () =>
    console.log("Audio saved successfully")
  );
});

我也尝试将其更改为 ogg 但仍然存在同样的问题。提前致谢！

标签： javascriptnode.jselectron

解决方案

我认为错误的原因是音频编解码器之间的不匹配。

您可以使用以下代码轻松重现它。

它录制麦克风音频 2 秒，重新创建具有audio/wav格式的新 blob 并下载它。它甚至得到435:13:24了正确的时间。

(async() => {

  const microphoneAudioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const stream = audio.captureStream();
  const mediaRecorder = new MediaRecorder(microphoneAudioStream);

  mediaRecorder.addEventListener('dataavailable', (event) => {
    const blob = event.data;

    const blobType = "audio/wav";
    const extension = "wav";

    //const blobType = blob.type;
    //const extension = "webm";

    const audioBlob = new Blob([blob], { type: blobType });
    const anchor = document.createElement("a");
    const url = window.URL.createObjectURL(audioBlob);
    anchor.href = url;
    anchor.download = `test.${extension}`;
    anchor.click();
    window.URL.revokeObjectURL(url);
  });

  mediaRecorder.start();

  setTimeout(() => {
    mediaRecorder.stop();
  }, 2000)

})();

就我而言，我试图用audio/webm;codecs=opus数据创建新的 blob。

有三种解决方案。

  • 您可以保持与原始 blob 相同的格式。
  • 将另一个参数附加到MediaRecorder 构造函数，其中包含选项对象mimeType
  • 找到一些转换为audio/webm的APIaudio/wav

推荐阅读