JavaScriptを使用して、記録されたブロブストリームを分割し、5秒のWAVファイルを生成します

React-MICを使用して記録するとき、私は要件に遭遇しました。記録されたブロブストリームを複數(shù)の5秒のWAVファイルに分割する必要があります。ただし、試した後、最初のスプリットWAVファイルのみを正常に再生できることがわかり、殘りのファイルが破損するように促されます。

この要件をフロントエンドで実裝する場(chǎng)合、主に2つの課題に直面しています。1つはブロブストリームを正しくセグメント化する方法です。もう1つは、各セグメント化されたクリップがWAVファイルを正しく生成して再生できるようにする方法です。以下はコードの例とソリューションです。

 「React」からReact、{useref、useState}をインポート
「ReactMicStopeVent}」から「ReactMic、ReactMicStopeVent}」
「antd」から{button}をインポートします

const audiorecorder =（）=> {
    const [record、setRecord] = uesestate（false）
    const resref = useref <blob>（[]）
    const audioChunkSref = useref <blob>（[]）
    const intervalref = useref <nodejs.timer null>（null）
    const firstblob = useref <blob>（未定義）

    const createwavheader =（numchannels、samplerate、bytelength）=> {
        const header = new ArrayBuffer（44）;
        const View = new DataView（Header）;

        view.setuint32（0、1380533830、false）; //「リフ」
        view.setuint32（4、bytelength 36、false）;
        view.setuint32（8、1718449184、false）; //「波」
        view.setuint32（12、1684108385、false）; // "fmt"
        view.setuint32（16、16、true）; // PCMの場(chǎng)合16
        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ビット
        view.setuint32（36、1684108385、false）; // "データ"
        view.setuint32（40、bytelength、true）;

        ヘッダーを返します。
    };

    const savefile = async（）=> {
        const chunkslist = resref.current;
        for（i = 0; i <chunkslist.length i const audiobuffer="new" uint8array chunkslist .arraybuffer header="createwavheader（1、44100、audiobuffer.length）;" wavblob="new" blob url="url.createobjecturl（wavblob）;" a="document.createelement（" a.href="url;" a.download="`記録$" .wav a.click url.revokeobjecturl startrecording="（）="> {
        setRecord（true）
        AudioChunkSref.Current = [] //以前の録音データをクリア//録音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、 'audio/wav'）
            firstblob.current = audiochunksref.current.at（-1）
            //現(xiàn)在の記録データコンソールを処理します。log（ '現(xiàn)在の記録データのセグメント：'、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` //ダウンロードファイルの名前を設(shè)定するa.click（）//トリガーダウンロード// 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）
        //ダウンロードリンクconst url = url.createobjecturl（file）を作成する
        const a = document.createelement（ 'a'）
        A.href = url
        A.download = `録音$ {date.now（）}。wav`//ダウンロードファイルの名前を設(shè)定するa.click（）//トリガーダウンロード// url resource url.revokeobjecturl（url）をリリースします
    }

    戻る （
        <div>
            <reactmic record="{record}" onstop="{OnStop}" ondata="{OnData}" mimetype="Audio /Wav"></reactmic>
            <button onclick="{startrecording}">録音を開始</button>
            <button onclick="{stopRecording}">録音を停止</button>
            <button onclick="{savefile}">ダウンロード</button>
            <button onclick="{savefinalresult}"> final </button>をダウンロードします
        </div>
    ））
}

デフォルトのaudiorecorderをエクスポートします</chunkslist.length></blob></nodejs.timer></blob></blob>

ブロブストリームを分割してWAVファイルを生成しようとする過程で、WAVヘッダー情報(bào)を手動(dòng)で追加しても問題は解決しないことがわかりました。その理由は、WAVファイルの構(gòu)造が比較的厳格であるためです。セグメンテーション後にヘッダー情報(bào)が正しく追加されていない場(chǎng)合、ファイルが破損する可能性があります。

この問題を解決するための提案の1つは、ブラウザで実行できるオーディオおよびビデオ?jiǎng)I理のライブラリであるFFMPEGのWASMバージョンを使用することです。これにより、オーディオを簡(jiǎn)単にセグメント化して、正しいWAVファイル形式を生成できます。 FFMPEG.WASMプロジェクトを使用してこの関數(shù)を?qū)g裝することを検討できます。

以上が録音されたブロブストリームをJavaScriptを使用して複數(shù)の5秒のWAVファイルに分割し、正常に再生することを確認(rèn)するにはどうすればよいですか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。