如何在React中使用ffmpeg.wasm将录音的Blob流切分成多个有效的5秒WAV文件？-js教程-PHP中文网

如何在React中使用ffmpeg.wasm将录音的Blob流切分成多个有效的5秒WAV文件？

霞舞

发布： 2025-03-19 11:18:12

原创

763人浏览过

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

如何在React中使用ffmpeg.wasm将录音的Blob流切分成多个有效的5秒WAV文件？

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

解决方案：利用ffmpeg.wasm

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

步骤：

音记AI

音视频秒转文字，声波流式转录，让每个声音都成篇章

查看详情

引入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>

登录后复制

关键改进：