使用 JavaScript 和 ffmpeg.wasm 将录音 Blob 流切分并转换为多个 5 秒 WAV 文件
本文探讨如何使用 javascript 和 ffmpeg.wasm 将长录音 blob 流切分成多个 5 秒的 wav 文件，并解决可能出现的音频文件损坏问题。 直接使用 javascript 的 blob 切割方法处理音频数据容易导致 wav 文件头信息不完整，从而造成文件损坏。ffmpeg.wasm 提供了更可靠的音频处理能力。
问题：直接 Blob 切割导致 WAV 文件损坏
使用 ondata 回调函数收集录音 Blob 数据，并尝试每 5 秒切分，会导致除第一个 WAV 文件外，其他文件无法播放，提示文件损坏。 手动添加 WAV 头信息也无法解决此问题，因为这只是修复了文件头，而音频数据本身可能由于不完整的帧而损坏。
解决方案：使用 ffmpeg.wasm
ffmpeg.wasm 允许在浏览器中使用强大的 ffmpeg 命令行工具。它能处理音频流，确保正确的 WAV 文件格式，从而解决文件损坏问题。
以下是一个使用 ffmpeg.wasm 的解决方案思路，并非完整的代码实现（由于篇幅限制和代码复杂性，完整的代码实现需要单独提供）：
-
引入 ffmpeg.wasm: 首先，需要在项目中引入 ffmpeg.wasm 库。
立即学习“Java免费学习笔记（深入）”；
-
加载 ffmpeg.wasm: 使用
ffmpeg.load()异步加载 ffmpeg.wasm 库。 -
将 Blob 数据转换为 ArrayBuffer:
ondata回调函数接收到的recordedBlob是 Blob 对象，需要将其转换为 ffmpeg.wasm 可处理的 ArrayBuffer。 -
使用 ffmpeg.wasm 切割和转换: 使用
ffmpeg.run()执行 ffmpeg 命令，将 ArrayBuffer 数据切分成多个 5 秒的片段，并将其转换为 WAV 文件。 示例命令如下（需要根据实际情况调整参数）：
ffmpeg -i input.wav -f segment -segment_time 5 -c copy output%03d.wav
这个命令将 input.wav 切分成多个 5 秒的片段，命名为 output001.wav, output002.wav 等。
-
处理输出:
ffmpeg.run()返回一个 Promise，包含处理结果。 需要处理结果，将生成的 WAV 文件数据转换为 Blob 对象，以便下载或保存。 -
定时切分: 使用
setInterval定时调用 ffmpeg.wasm 进行切分，每次处理一段时间的录音数据。 需要注意的是，需要在切分之前累积足够的录音数据，以避免频繁的 ffmpeg.wasm 调用导致性能问题。 -
错误处理: 添加错误处理机制，处理 ffmpeg.wasm 执行过程中可能出现的错误。
代码示例片段 (Illustrative, not complete):
import ffmpeg from 'ffmpeg.wasm';
// ... other code ...
const processAudio = async (audioBuffer) => {
try {
await ffmpeg.load();
const result = await ffmpeg.run('-i', 'input.wav', '-f', 'segment', '-segment_time', '5', '-c', 'copy', 'output%03d.wav');
// Process the result (convert to Blob and download/save)
} catch (error) {
console.error('Error processing audio:', error);
}
};
// ... ondata callback ...
const onData = async (recordedBlob) => {
const audioBuffer = await blobToArrayBuffer(recordedBlob); // Helper function to convert Blob to ArrayBuffer
// Accumulate audio data and call processAudio periodically
};
// ... other code ...
完整的代码实现需要考虑更多细节，例如音频数据缓冲、错误处理、用户界面更新等。 这个解决方案思路提供了使用 ffmpeg.wasm 解决问题的核心方法，避免了直接操作 Blob 导致的 WAV 文件损坏问题。 记住替换 'input.wav' 为你的输入文件名，并根据需要调整参数。 你需要自行实现 blobToArrayBuffer 函数。
