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