React中如何将录音Blob流切分成5秒的WAV文件？

本文介绍了在React项目中，使用`ffmpeg.wasm`库将录音的Blob流切分成多个5秒WAV文件的完整解决方案。直接用JavaScript分割音频并生成正确的WAV文件头信息非常复杂且容易出错。而`ffmpeg.wasm`能够高效处理音频和视频，自动生成正确的WAV文件头，并提供可靠的音频分割功能，避免了手动操作带来的错误。文章详细讲解了使用`@ffmpeg/ffmpeg`库的步骤，包括引入库、分割音频函数的实现以及在React组件中的集成方法，最终实现将录音Blob流精确分割成多个5秒WAV文件并下载的功能，有效解决了因手动处理WAV头信息导致音频文件损坏的问题。

本文探讨了如何在React前端使用ffmpeg.wasm将录音的Blob流切分成多个5秒的有效WAV文件。直接用JavaScript处理音频分割，特别是生成正确的WAV文件头信息，非常复杂。 因此，我们建议使用ffmpeg.wasm，一个将ffmpeg编译成WebAssembly的库，来简化这个过程并确保音频文件的完整性。

问题： 使用react-mic录制音频后，尝试将Blob流切分成多个5秒WAV文件时，只有第一个文件可播放，其余文件损坏。手动添加WAV头信息也无法解决问题。

解决方案：利用ffmpeg.wasm

ffmpeg.wasm提供了一种在浏览器中高效处理音频和视频的方案。它能可靠地分割音频，并自动处理WAV文件头信息，避免手动操作带来的错误。

步骤：

1. 引入ffmpeg.wasm: 确保已正确安装并引入@ffmpeg/ffmpeg库。

2. 分割音频函数: 以下是一个使用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' });
    });
}

3. 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}"></reactmic><button onclick="{handleSave}">保存音频</button>

关键改进：

• 避免手动处理WAV头: ffmpeg.wasm自动处理WAV文件头，避免了手动操作导致的错误。
• 更可靠的分割: 使用ffmpeg的-segment_time参数进行精确的音频分割。
• 简化代码: 避免了复杂的Blob手动分割和WAV头信息处理。

记住在使用前安装@ffmpeg/ffmpeg： npm install @ffmpeg/ffmpeg 或 yarn add @ffmpeg/ffmpeg。 这个方法提供了更可靠、更简洁的音频分割方案，避免了之前手动处理带来的问题。 请根据你的实际项目代码进行调整。

今天关于《React中如何将录音Blob流切分成5秒的WAV文件？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！