如何使用JavaScript和ffmpeg.wasm将录音的Blob流切分成5秒的WAV文件？-js教程-PHP中文网

如何使用JavaScript和ffmpeg.wasm将录音的Blob流切分成5秒的WAV文件？

花韻仙語

发布： 2025-03-15 10:56:11

原创

724人浏览过

如何使用javascript和ffmpeg.wasm将录音的blob流切分成5秒的wav文件？

前端音频Blob流切片：生成5秒WAV文件

将长音频录音Blob流切分成多个5秒的WAV文件，是音频处理中的常见需求。本文将详细介绍如何使用JavaScript和ffmpeg.wasm高效实现此功能，解决因音频数据不完整或WAV头信息错误导致文件损坏的问题。

问题根源

直接分割Blob流并添加WAV头信息，容易导致数据不完整，从而造成文件无法播放。

ffmpeg.wasm解决方案

推荐使用ffmpeg.wasm，这是一个可在浏览器环境运行的ffmpeg版本，能够处理各种音频视频操作，包括切片和格式转换。它能确保生成的WAV文件完整且可播放。

使用ffmpeg.wasm的步骤：

立即学习“Java免费学习笔记（深入）”；

引入并加载ffmpeg.wasm: 在项目中引入@ffmpeg/ffmpeg并加载ffmpeg.wasm库。
Blob转ArrayBuffer: 将录音得到的Blob数据转换为ffmpeg.wasm可处理的ArrayBuffer格式。

音记AI
音视频秒转文字，声波流式转录，让每个声音都成篇章

38

查看详情
使用ffmpeg命令切片: 使用ffmpeg命令行接口切分音频。以下命令将输入音频input.wav切分成5秒的片段，命名为output001.wav, output002.wav等：
```
ffmpeg -i input.wav -f segment -segment_time 5 -c copy output%03d.wav
```
登录后复制
保存并下载: 将切分后的音频数据保存为Blob，并生成下载链接供用户下载。

代码示例

假设已引入ffmpeg.wasm，以下代码展示了如何使用它进行音频切片：

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });

const processAudio = async (blob) => {
  await ffmpeg.load();
  const arrayBuffer = await blob.arrayBuffer();
  ffmpeg.FS('writeFile', 'input.wav', new Uint8Array(arrayBuffer));
  await ffmpeg.run('-i', 'input.wav', '-f', 'segment', '-segment_time', '5', '-c', 'copy', 'output%03d.wav');
  const files = ffmpeg.FS('readdir', '.')
    .filter(file => file.startsWith('output') && file.endsWith('.wav'));
  files.forEach((file, index) => {
    const data = ffmpeg.FS('readFile', file);
    const blob = new Blob([data.buffer], { type: 'audio/wav' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `recording${index + 1}.wav`;
    a.click();
    URL.revokeObjectURL(url);
  });
};

// 在你的组件中调用processAudio
const onStop = (recordedBlob) => {
  processAudio(recordedBlob.blob);
};

登录后复制

此方法确保了生成的WAV文件完整性，并提供便捷的下载功能，有效解决了原始方法中遇到的文件损坏问题。

以上就是如何使用JavaScript和ffmpeg.wasm将录音的Blob流切分成5秒的WAV文件？的详细内容，更多请关注php中文网其它相关文章！