本文探讨了如何在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。 这个方法提供了更可靠、更简洁的音频分割方案，避免了之前手动处理带来的问题。 请根据你的实际项目代码进行调整。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
