Bagaimana untuk memisahkan aliran gumpalan yang direkodkan ke dalam beberapa fail wav 5 saat menggunakan JavaScript dan pastikan ia bermain secara normal?

Gunakan JavaScript untuk memecah aliran gumpalan yang direkodkan dan menghasilkan fail wav 5 saat

Apabila merakam menggunakan React-Mic, saya menghadapi keperluan: Saya perlu memecah aliran BLOB yang direkodkan ke dalam fail WAV 5 saat. Walau bagaimanapun, selepas mencuba, saya mendapati bahawa hanya fail WAV berpecah pertama yang boleh dimainkan secara normal, dan seluruh fail diminta untuk rosak.

Apabila melaksanakan keperluan ini di bahagian depan, kami menghadapi dua cabaran: satu adalah cara untuk segmen aliran gumpalan yang betul, dan yang lain adalah bagaimana untuk memastikan setiap klip bersegmen dapat menghasilkan dan memainkan fail WAV dengan betul. Berikut adalah contoh kod dan penyelesaian:

 Import React, {useref, useState} dari 'React'
import {reactmic, reactmicstopevent} dari 'react-mic'
import {butang} dari 'antd'

const audiorecorder = () => {
    const [rekod, setRecord] = useState (palsu)
    const resref = useref <blob> ([])
    const audiochunksref = useref <blob> ([])
    const intervalRef = useref <nodejs.timer null> (null)
    const firstBlob = useref <blob undefined> (undefined)

    const createewavheader = (numChannels, samplerate, bytelength) => {
        header const = ArrayBuffer baru (44);
        Const View = DataView baru (header);

        view.setuint32 (0, 1380533830, palsu); // "riff"
        view.setuint32 (4, bytelength 36, false);
        view.setuint32 (8, 1718449184, palsu); // "Gelombang"
        view.setuint32 (12, 1684108385, palsu); // "fmt"
        view.setuint32 (16, 16, benar); // 16 untuk PCM
        view.setuint16 (20, 1, benar); // 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, benar); // 16 bit
        view.setuint32 (36, 1684108385, palsu); // "Data"
        view.setuint32 (40, bytelength, true);

        header kembali;
    };

    const saveFile = async () => {
        const chunkslist = resref.current;
        untuk (biarkan i = 0; i <chunkslist.length i const audiobuffer="new" uint8array chunkslist .arraybuffer header audiobuffer.length menganggap mono dan wavblob="new" blob url="url.createObjectUrl" a="document.createElement" a.href="url;" a.download="`rakaman" .wav a.click url.revokeobjecturl startrecording="()"> {
        setRecord (benar)
        audiochunksref.current = [] // Kosongkan data rakaman sebelumnya // berpecah intervalref.current rakaman = setInterval (() => {
            const curblob = gumpalan baru (audiochunksref.current, {type: 'audio/wav'})
            const startIndex = audiochunksref.current.indexof (firstblob.current as gumpalan)
            const blob = curblob.slice (startIndex === -1? 0: startIndex, -1, 'audio/wav')
            FirstBlob.Current = audiochunksref.current.at (-1)
            // Proses Console.log data rakaman semasa ('Segmen data rakaman semasa:', gumpalan)
            resref.current.push (gumpalan)
        }, 5000)
    }

    const stopRecording = () => {
        setRecord (palsu)
        intervalref.current && clearInterval (intervalref.current) // pemasa yang jelas}

    const ondata = (RECOREDBLOB: Blob) => {
        audiochunksref.current.push (recordedBlob) // simpan data rakaman}

    const onStop = (recordedBlob: reactMicStOpEvent) => {
        Console.log ('Dirakam selesai:', RECOREDBLOB)
    }

    const saveFile1 = () => {
        const chunkslist = resref.current
        chunkslist.map (async (v, i) => {
            const filename = 'aaa.wav'
            Const File: File = File Baru ([V], FileName, {Type: 'Audio/Wav'})
            const fileSize = file.size

            Console.log ('FileSize', memfailkan)
            // Buat pautan muat turun const url = url.createObjectUrl (fail)
            const a = document.createeelement ('a')
            A.Href = url
            a.download = `Rakaman $ {i} .wav` // Tetapkan nama fail muat turun a.click () // Trigger Download // Release URL Sumber Url.RevokeObjectUrl (URL)
        })
    }

    const saveFinalResult = () => {
        const filename = 'aaa.wav'
        Const File: File = File Baru (AudioChunksRef.Current, FileName, {Type: 'Audio/Wav'})
        const fileSize = file.size

        Console.log ('FileSize', memfailkan)
        // Buat pautan muat turun const url = url.createObjectUrl (fail)
        const a = document.createeelement ('a')
        A.Href = url
        a.download = `rakaman $ {date.now ()}. wav` // tetapkan nama fail muat turun a.click () // Trigger Download // Release URL Sumber URL.RevokeObjectUrl (URL)
    }

    Kembali (
        <dana>
            <reactmic record="{record}" onstop="{onStop}" ondata="{ondata}" mimetype="audio /wav"></reactmic>
            <butang onclick="{startrecording}"> Mula rakaman </butang>
            <butang onclick="{stopRecording}"> berhenti rakaman </butang>
            <butang onclick="{SaveFile}"> muat turun </butang>
            <button onclick="{SaveFinalResult}"> Muat turun Final </button>
        
    )
}

Eksport audiorecorder lalai</dana></chunkslist.length></blob></nodejs.timer></blob></blob>

Semasa proses cuba memecah aliran gumpalan dan menghasilkan fail WAV, didapati secara manual menambah maklumat header WAV tidak akan menyelesaikan masalah. Sebabnya ialah struktur fail WAV agak ketat. Jika maklumat header tidak ditambah dengan betul selepas segmentasi, fail mungkin rosak.

Satu cadangan untuk menyelesaikan masalah ini ialah menggunakan versi WASM FFMPEG, perpustakaan audio dan pemprosesan video yang boleh dijalankan dalam penyemak imbas. Dengan itu, anda boleh dengan mudah segmen audio dan menghasilkan format fail WAV yang betul. Anda boleh mempertimbangkan menggunakan projek ffmpeg.wasm untuk melaksanakan fungsi ini.

Atas ialah kandungan terperinci Bagaimana untuk memisahkan aliran gumpalan yang direkodkan ke dalam beberapa fail wav 5 saat menggunakan JavaScript dan pastikan ia bermain secara normal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!