将 Blob WebM 转换为音频文件（WAV 或 MP3）

Question

我浏览了这里和谷歌上的大部分问题，我找不到将 webm 转换为 wav 或 mp3 的简单方法。我知道 lamejs 和 ffmpeg 但它有点令人困惑，因为它主要不是为 React 设计的。

我在https://codesandbox.io/embed/strange-hofstadter-lmcnv?fontsize=14创建了一个沙箱

我尝试像这样创建一个新文件，但我相信浏览器无法本地转换该文件。

let newBlob = new Blob(recordedBlob, {type:'audio/mpeg-3'});

如果有人可以提供帮助那就太好了。

Answer 1

首先，通过在 Angular 6 项目目录中运行以下命令，使用 npm 安装 FFmpeg.js 库：

npm install @ffmpeg/ffmpeg

接下来，导入 FFmpeg 库并定义一个函数，该函数将 WebM blob 作为输入并使用 FFmpeg.js 将其转换为 MP3 blob：

import * as FFmpeg from '@ffmpeg/ffmpeg';

async function convertWebmToMp3(webmBlob: Blob): Promise<Blob> {
  const ffmpeg = createFFmpeg({ log: false });
  await ffmpeg.load();

  const inputName = 'input.webm';
  const outputName = 'output.mp3';

  ffmpeg.FS('writeFile', inputName, await fetch(webmBlob).then((res) => res.arrayBuffer()));

  await ffmpeg.run('-i', inputName, outputName);

  const outputData = ffmpeg.FS('readFile', outputName);
  const outputBlob = new Blob([outputData.buffer], { type: 'audio/mp3' });

  return outputBlob;
}

该函数使用createFFmpeg方法实例化FFmpeg.js库，将WebM blob写入虚拟文件系统，并运行FFmpeg命令将WebM文件转换为MP3文件。最后，它返回生成的 MP3 blob。

注意：此示例假设您可以从 Angular 6 应用程序中访问 WebM blob。如果需要先下载 WebM 文件，可以使用 HttpClient 服务将其作为 blob 进行检索。另外，不要忘记在 Angular 6 组件或服务中导入所需的模块和服务，例如 HttpClient。