reactjs 将Blob WebM转换为音频文件(WAV或MP3)

rryofs0p  于 2023-03-01  发布在  React
关注(0)|答案(1)|浏览(1275)

我看了这里和谷歌上的大部分问题,我找不到一个简单的方法来转换webm到wav或mp3。我知道lamejs和ffmpeg,但它有点混乱,因为它不是主要为react设计的。
我在https://codesandbox.io/embed/strange-hofstadter-lmcnv?fontsize=14上创建了一个沙箱
我试着创建一个这样的新文件,但我相信浏览器不能本地转换文件。

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

如果有人能帮忙那就太好了。

6uxekuva

6uxekuva1#

首先,通过在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。

相关问题