How to split a recorded blob stream into multiple 5 second WAV files using JavaScript and make sure it plays normally?

Use javascript to split the recorded blob stream and generate a 5-second wav file

When recording using react-mic, I encountered a requirement: I need to split the recorded blob stream into multiple 5-second wav files. However, after trying, I found that only the first split wav file can be played normally, and the rest of the files are prompted to be corrupted.

When implementing this requirement in the front-end, we mainly face two challenges: one is how to correctly segment the blob stream, and the other is how to ensure that each segmented clip can correctly generate and play wav files. The following are code examples and solutions:

 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  {
        setRecord(true)
        audioChunksRef.current = [] // Clear the previous recording data // Split the recording 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)
            // Process the current recording data console.log('Segment of current recording data:', blob)
            resRef.current.push(blob)
        }, 5000)
    }

    const stopRecording = () => {
        setRecord(false)
        intervalRef.current && clearInterval(intervalRef.current) // Clear timer}

    const onData = (recordedBlob: Blob) => {
        audioChunksRef.current.push(recordedBlob) // Save recording data}

    const onStop = (recordedBlob: ReactMicStopEvent) => {
        console.log('Recorded Completed:', 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)
            // Create a download link const url = URL.createObjectURL(file)
            const a = document.createElement('a')
            a.href = url
            a.download = `recording${i}.wav` // Set the name of the download file a.click() // Trigger download// Release URL resource 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)
        // Create a download link const url = URL.createObjectURL(file)
        const a = document.createElement('a')
        a.href = url
        a.download = `recording${Date.now()}.wav` // Set the name of the download file a.click() // Trigger download// Release URL resource URL.revokeObjectURL(url)
    }

    Return (
        <div>
            <reactmic record="{record}" onstop="{onStop}" ondata="{onData}" mimetype="audio/wav"></reactmic>
            <button onclick="{startRecording}">Start recording</button>
            <button onclick="{stopRecording}">Stop recording</button>
            <button onclick="{saveFile}">Download</button>
            <button onclick="{saveFinalResult}">Download Final</button>
        </div>
    )
}

export default AudioRecorder</blob></nodejs.timer></blob></blob>

During the process of trying to split the blob stream and generating the wav file, it was found that manually adding the wav header information would not solve the problem. The reason is that the structure of the wav file is relatively strict. If the header information is not correctly added after segmentation, the file may be corrupted.

One suggestion to solve this problem is to use the wasm version of ffmpeg, a library of audio and video processing that can be run in the browser. With it, you can easily segment the audio and generate the correct wav file format. You can consider using the ffmpeg.wasm project to implement this function.

The above is the detailed content of How to split a recorded blob stream into multiple 5 second WAV files using JavaScript and make sure it plays normally?. For more information, please follow other related articles on the PHP Chinese website!