前端音频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格式。
-
使用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文件完整性，并提供便捷的下载功能，有效解决了原始方法中遇到的文件损坏问题。
