javascript - js怎么切分一个录音的blob流？把他分成若干个5s的wav文件？

Question

js怎么切分一个录音的blob流？把他分成若干个5s的wav文件？

我在使用react-mic录音，现在有一个需求是把录音的分成若干个小单元，类似于生产线上一边生产，一边装箱, 但是我把onData回调里面的blob收集并且切分后，只有第一个blob块转换成的wav文件可以播放，其他的都不可以，提示wav文件损坏，我尝试手动加入wav头信息，也无济于事。

import React, { useRef, useState } from 'react'
import { ReactMic, ReactMicStopEvent } from 'react-mic'
import { Button } from 'antd'

const AudioRecorder = () => {
    const [record, setRecord] = useState(false)
    const resRef = useRef<Blob[]>([])
    const audioChunksRef = useRef<Blob[]>([])
    const intervalRef = useRef<NodeJS.Timer | null>(null)
    const firstBlob = useRef<Blob | undefined>(undefined)

    const createWavHeader = (numChannels, sampleRate, byteLength) => {
        const header = new ArrayBuffer(44);
        const view = new DataView(header);

        view.setUint32(0, 1380533830, false); // "RIFF"
        view.setUint32(4, byteLength + 36, false);
        view.setUint32(8, 1718449184, false); // "WAVE"
        view.setUint32(12, 1684108385, false); // "fmt "
        view.setUint32(16, 16, true); // 16 for PCM
        view.setUint16(20, 1, true); // PCM
        view.setUint16(22, numChannels, true);
        view.setUint32(24, sampleRate, true);
        view.setUint32(28, sampleRate * numChannels * 2, true);
        view.setUint16(32, numChannels * 2, true);
        view.setUint16(34, 16, true); // 16 bits
        view.setUint32(36, 1684108385, false); // "data"
        view.setUint32(40, byteLength, true);

        return header;
    };

    const saveFile = async () => {
        const chunksList = resRef.current;
        for (let i = 0; i < chunksList.length; i++) {
            const audioBuffer = new Uint8Array(await chunksList[i].arrayBuffer());
            const header = createWavHeader(1, 44100, audioBuffer.length); // 假设单声道和 44100Hz
            const wavBlob = new Blob([header, audioBuffer], { type: 'audio/wav' });

            const url = URL.createObjectURL(wavBlob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `recording${i}.wav`;
            a.click();
            URL.revokeObjectURL(url);
        }
    };
    const startRecording = () => {
        setRecord(true)
        audioChunksRef.current = [] // 清空之前的录音数据

        // 每5秒分割一次录音
        intervalRef.current = setInterval(() => {
            const curBlob = new Blob(audioChunksRef.current, { type: 'audio/wav' })
            const startIndex = audioChunksRef.current.indexOf(firstBlob.current as Blob)
            const blob = curBlob.slice(startIndex === -1 ? 0 : startIndex, -1, 'audio/wav')
            firstBlob.current = audioChunksRef.current.at(-1)
            // 处理当前录音数据
            console.log('分割当前录音数据:', blob)
            resRef.current.push(blob)
        }, 5000)
    }

    const stopRecording = () => {
        setRecord(false)
        intervalRef.current && clearInterval(intervalRef.current) // 清除定时器
    }

    const onData = (recordedBlob: Blob) => {
        audioChunksRef.current.push(recordedBlob) // 保存录音数据
    }

    const onStop = (recordedBlob: ReactMicStopEvent) => {
        console.log('录音完成:', recordedBlob)
    }
    //
    const saveFile1 = () => {
        const chunksList = resRef.current
        chunksList.map(async (v, i) => {
            const fileName = 'aaa.wav'
            const file: File = new File([v], fileName, { type: 'audio/wav' })
            const fileSize = file.size

            console.log('fileSize', fileSize)
            // 创建下载链接
            const url = URL.createObjectURL(file)
            const a = document.createElement('a')
            a.href = url
            a.download = `recording${i}.wav` // 设置下载文件的名称

            a.click() // 触发下载
            // 释放URL资源
            URL.revokeObjectURL(url)
        })
    }

    const saveFinalResult = () => {
        const fileName = 'aaa.wav'
        const file: File = new File(audioChunksRef.current, fileName, { type: 'audio/wav' })
        const fileSize = file.size

        console.log('fileSize', fileSize)
        // 创建下载链接
        const url = URL.createObjectURL(file)
        const a = document.createElement('a')
        a.href = url
        a.download = `recording${Date.now()}.wav` // 设置下载文件的名称

        a.click() // 触发下载
        // 释放URL资源
        URL.revokeObjectURL(url)
    }

    return (
        <div>
            <ReactMic record={record} onStop={onStop} onData={onData} mimeType="audio/wav" />
            <Button onClick={startRecording}>开始录音</Button>
            <Button onClick={stopRecording}>停止录音</Button>
            <Button onClick={saveFile}>下载</Button>
            <Button onClick={saveFinalResult}>下载Final</Button>
        </div>
    )
}

export default AudioRecorder

希望提供一点思路

Answer 1

wav 应该不行，因为文件格式限制，可以试试 mp3。

Answer 2

如果期望在前端做的话，考虑一下这个项目？ https://github.com/ffmpegwasm/ffmpeg.wasm