使用javascript切分錄音的blob流并生成5秒的wav文件

在使用react-mic進(jìn)行錄音時(shí)，遇到一個(gè)需求：需要將錄音的blob流切分成多個(gè)5秒的wav文件。然而，嘗試之后發(fā)現(xiàn)只有第一個(gè)切分的wav文件能夠正常播放，其余文件均提示文件損壞。

在前端實(shí)現(xiàn)這個(gè)需求時(shí)，主要面臨兩個(gè)挑戰(zhàn)：一是如何正確切分blob流，二是如何確保每個(gè)切分后的片段能夠正確生成并播放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  {
        setRecord(true)
        audioChunksRef.current = [] // 清空之前的錄音數(shù)據(jù)

        // 每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)
            // 處理當(dāng)前錄音數(shù)據(jù)
            console.log('分割當(dāng)前錄音數(shù)據(jù):', blob)
            resRef.current.push(blob)
        }, 5000)
    }

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

    const onData = (recordedBlob: Blob) => {
        audioChunksRef.current.push(recordedBlob) // 保存錄音數(shù)據(jù)
    }

    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)
            // 創(chuàng)建下載鏈接
            const url = URL.createObjectURL(file)
            const a = document.createElement('a')
            a.href = url
            a.download = `recording${i}.wav` // 設(shè)置下載文件的名稱

            a.click() // 觸發(fā)下載
            // 釋放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)
        // 創(chuàng)建下載鏈接
        const url = URL.createObjectURL(file)
        const a = document.createElement('a')
        a.href = url
        a.download = `recording${Date.now()}.wav` // 設(shè)置下載文件的名稱

        a.click() // 觸發(fā)下載
        // 釋放URL資源
        URL.revokeObjectURL(url)
    }

    return (
        <div>
            <reactmic record="{record}" onstop="{onStop}" ondata="{onData}" mimetype="audio/wav"></reactmic>
            <button onclick="{startRecording}">開(kāi)始錄音</button>
            <button onclick="{stopRecording}">停止錄音</button>
            <button onclick="{saveFile}">下載</button>
            <button onclick="{saveFinalResult}">下載Final</button>
        </div>
    )
}

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

在嘗試切分blob流和生成wav文件的過(guò)程中，發(fā)現(xiàn)手動(dòng)添加wav頭信息并不能解決問(wèn)題。其原因在于wav文件的結(jié)構(gòu)比較嚴(yán)格，切分后如果不正確地添加頭部信息，文件可能會(huì)損壞。

解決這個(gè)問(wèn)題的一個(gè)建議是使用ffmpeg的wasm版本，這是一個(gè)可以在瀏覽器中運(yùn)行的音視頻處理庫(kù)。通過(guò)它，你可以輕松地對(duì)音頻進(jìn)行切分并生成正確的wav文件格式?？梢钥紤]使用ffmpeg.wasm項(xiàng)目來(lái)實(shí)現(xiàn)這個(gè)功能。

以上是如何使用JavaScript將錄音的Blob流切分成多個(gè)5秒的WAV文件并確保其正常播放？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！