将 blob MIME 类型设置为 wav 仍会导致 webM

Question

我按照this article（第6步的代码）制作了一个录音机，如下所示。在制作audioBlob 之后，我调用了一个自定义函数来上传blob。此功能适用于其他文件类型。

我将{ type: 'audio/wav' } 传递给Blob 构造函数。生成的文件确实假装是一个波形文件，并且可以在浏览器中正常播放，但在 iOS 上则不行。我检查了http://checkfiletype.com/，发现该文件实际上是 WebM：

如何确保文件实际上是.wav 文件？

从那篇文章中编辑的代码：

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start();

    const audioChunks = [];
    mediaRecorder.addEventListener("dataavailable", event => {
      audioChunks.push(event.data);
    });

    mediaRecorder.addEventListener("stop", () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });

      // Custom upload function
      uploadFile(audioBlob);
    });

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

Answer 1

如何确保文件实际上是 .wav 文件？

很简单，没有浏览器（我知道）支持原生地导出到 wav。所以你可以确定你的文件不是 wav 文件。

Blob 构造函数的type 选项仅说明浏览器应如何设置 MIME 类型以满足进一步的需求（例如，何时将其发送到服务器）。 但它实际上并没有改变您作为第一个参数传递的内容。

因此它不会神奇地将您的 webm 文件转换为其他格式。

现在，您确实有 some options 来更改 MediaRecorder 将输出其内容的格式，但支持的格式/编解码器集取决于实现，我认为任何浏览器都不支持opus，在 webm 容器中或在 ogg * 一个（* 仅限 FF）中。

[编辑]：实际上 Chrome 现在 supports PCM in webm。

感谢isTypeSupported 方法，如果它可用，您可以很好地设置您的代码以使用这种格式，但我个人不会对此抱有太大希望，如果需要，我会look somewhere else输出一个 wav 文件...

const mime = ['audio/wav', 'audio/mpeg', 'audio/webm', 'audio/ogg']
  .filter(MediaRecorder.isTypeSupported)[0];
const recorder = new MediaRecorder(stream, {
  mimeType: mime
});