本文探讨了如何在react前端使用ffmpeg.wasm将录音的blob流切分成多个5秒的有效wav文件。直接用javascript处理音频分割，特别是生成正确的wav文件头信息，非常复杂。 因此，我们建议使用ffmpeg.wasm，一个将ffmpeg编译成webassembly的库，来简化这个过程并确保音频文件的完整性。
问题： 使用react-mic录制音频后，尝试将Blob流切分成多个5秒WAV文件时，只有第一个文件可播放，其余文件损坏。手动添加WAV头信息也无法解决问题。
解决方案：利用ffmpeg.wasm
ffmpeg.wasm提供了一种在浏览器中高效处理音频和视频的方案。它能可靠地分割音频，并自动处理WAV文件头信息，避免手动操作带来的错误。
步骤：
-
引入ffmpeg.wasm: 确保已正确安装并引入
@ffmpeg/ffmpeg库。 -
分割音频函数: 以下是一个使用
ffmpeg.wasm分割音频的示例函数：
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
async function splitAudio(blob, segmentDuration) {
const ffmpeg = createFFmpeg({ log: true });
await ffmpeg.load();
const buffer = await blob.arrayBuffer();
ffmpeg.FS('writeFile', 'input.wav', new Uint8Array(buffer));
await ffmpeg.run(
'-i', 'input.wav',
'-f', 'segment',
'-segment_time', segmentDuration,
'-c', 'copy',
'output%03d.wav' // 输出文件命名：output001.wav, output002.wav...
);
const files = ffmpeg.FS('readdir', '.').filter(file => file.startsWith('output') && file.endsWith('.wav'));
return files.map(file => {
const data = ffmpeg.FS('readFile', file);
return new Blob([data.buffer], { type: 'audio/wav' });
});
}
-
React组件集成: 在你的React组件中，调用
splitAudio函数处理录音的Blob数据。 以下是一个简化的示例，假设你已拥有react-mic的录音功能：
import React, { useRef, useState } from 'react';
import { ReactMic } from 'react-mic'; // 假设你已安装 react-mic
// ... 其他代码 ...
const handleSave = async () => {
const blobs = await splitAudio(recordedBlob, '00:00:05'); // 5秒分割
blobs.forEach((blob, index) => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `recording_${index + 1}.wav`;
a.click();
URL.revokeObjectURL(url);
});
};
// ... 其他代码 ...
<ReactMic // react-mic 组件
// ... 其他配置 ...
onStop={onStop} />
<button onClick={handleSave}>保存音频</button>
关键改进：
- 避免手动处理WAV头: ffmpeg.wasm自动处理WAV文件头，避免了手动操作导致的错误。
-
更可靠的分割: 使用ffmpeg的
-segment_time参数进行精确的音频分割。 - 简化代码: 避免了复杂的Blob手动分割和WAV头信息处理。
记住在使用前安装@ffmpeg/ffmpeg： npm install @ffmpeg/ffmpeg 或 yarn add @ffmpeg/ffmpeg。 这个方法提供了更可靠、更简洁的音频分割方案，避免了之前手动处理带来的问题。 请根据你的实际项目代码进行调整。
