使用 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 函数。
