Wie teilen Sie einen aufgezeichneten Blob -Stream mit JavaScript in mehrere 5 -Sekunden -WAV -Dateien auf und stellen Sie sicher, dass er normal abgespielt wird?

Verwenden Sie JavaScript, um den aufgezeichneten Blob-Stream zu teilen und eine 5-Sekunden-WAV-Datei zu generieren

Bei der Aufzeichnung mit React-MIC habe ich auf eine Anforderung gestoßen: Ich muss den aufgezeichneten Blob-Stream in mehrere 5-Sekunden-WAV-Dateien aufteilen. Nach dem Versuch stellte ich jedoch fest, dass nur die erste geteilte WAV -Datei normal abgespielt werden kann und der Rest der Dateien aufgefordert wird, beschädigt zu werden.

Bei der Implementierung dieser Anforderung im Front-End stehen wir hauptsächlich vor zwei Herausforderungen: Eine ist, wie man den Blob-Stream korrekt segmentiert, und der andere ist, wie jeder segmentierte Clip WAV-Dateien korrekt generieren und abspielen kann. Im Folgenden finden Sie Code -Beispiele und -Lösungen:

 React, {Useref, Usestate} aus 'React' '
Import {reactmic, reactmicStopevent} aus 'React-mic' '
{button} aus 'AntD' importieren

const audioreCorder = () => {
    const [record, setRecord] = usustate (false)
    const resref = useref <blob> ([])
    const audiochunksref = useref <blob> ([])
    const intervalref = useref <nodejs.timer null> (NULL)
    const firstblob = useref <blob undefiniert> (undefiniert)

    const createwavHeader = (numchannels, sampled, 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, Falsch); // "WELLE"
        view.setuint32 (12, 1684108385, falsch); // "fmt"
        View.SetUint32 (16, 16, wahr); // 16 für PCM
        view.setUint16 (20, 1, true); // PCM
        view.setUint16 (22, numchannels, true);
        View.SetUint32 (24, Probenplan, wahr);
        View.SetUint32 (28, Sampled * Numchannels * 2, True);
        view.setUint16 (32, numchannels * 2, true);
        view.setUint16 (34, 16, true); // 16 Bit
        View.SetUint32 (36, 1684108385, False); // "Daten"
        View.SetUint32 (40, Bytelength, True);

        Return Header;
    };

    const SaveFile = async () => {
        const chunkList = Resref.Current;
        für (lass i = 0; i <chunkslist.length i const audiobuffer="new" uint8array auf chunklist .arraybuffer header="createwavHeader" audiobuffer.length angenommen mono und wavblob="neuer" blob url="url.createObjecturl" a="document.createelement" a.reif="url;" a.download="`Aufzeichnung" .wav a.click url.revokeobjecturl startercording="()"> {
        setRecord (true)
        audiochunksref.current = [] // Die vorherigen Aufzeichnungsdaten löschen // Teilen Sie das Aufzeichnungsintervalref.current = setInterval (() => {
            const curblob = neuer Blob (AudiochunksRef.Current, {Typ: 'Audio/Wav'})
            const startIndex = audiochunksref.current.indexof (firstblob.current als Blob)
            const blob = curblob.slice (startIndex === -1? 0: startIndex, -1, 'audio/wav')
            firstblob.current = audiochunksref.current.at (-1)
            // Verarbeiten Sie die aktuelle Aufzeichnungsdatenkonsole.log ('Segment der aktuellen Aufzeichnungsdaten:', Blob)
            resref.current.push (Blob)
        }, 5000)
    }

    const stoprecording = () => {
        setRecord (falsch)
        Intervalref.Current && ClearInterval (Intervalref.Current) // Timer Clear}}

    const ondata = (recordedBlob: blob) => {
        audiochunksref.current.push (recordblob) // Aufzeichnungsdaten} speichern}

    const onStop = (recordedBlob: reactmicStopEvent) => {
        console.log ('aufgezeichnet abgeschlossen:', Recordblob)
    }

    const SaveFile1 = () => {
        Const ChunksList = Resref.Current
        ChunksList.map (Async (v, i) => {
            const Dateiname = 'aaa.wav' '
            const Datei: Datei = neue Datei ([v], Dateiname, {type: 'audio/wav'})
            const FileSize = Datei.Size

            console.log ('fileside', filesize)
            // Erstellen Sie einen Download -Link const url = url.createObjecturl (Datei)
            const a = document.createelement ('a')
            a.reif = url
            A.Download = `Aufzeichnung $ {i} .wav` // Legen Sie den Namen der Download -Datei ein.
        })
    }

    const SaveFinalResult = () => {
        const Dateiname = 'aaa.wav' '
        const -Datei: Datei = neue Datei (AudiochunksRef.Current, Dateiname, {Typ: 'Audio/Wav'})
        const FileSize = Datei.Size

        console.log ('fileside', filesize)
        // Erstellen Sie einen Download -Link const url = url.createObjecturl (Datei)
        const a = document.createelement ('a')
        a.reif = url
        A.Download = `Aufzeichnung $ {date.now ()}. WAV` // Setzen Sie den Namen der Download -Datei A.click () // Trigger Download // URL -Ressourcen -URL.revokeObjecturl (URL) veröffentlichen.
    }

    Zurückkehren (
        <div>
            <reactmic record="{record}" onstop="{onStop}" ondata="{ondata}" mimetype="audio /wav"></reactmic>
            <button onclick="{startercording}"> starten Sie die Aufzeichnung </button>
            <button onclick="{stoprecording}"> Aufnahme von Aufnahme </button>
            <button onclick="{SaveFile}"> Download </button>
            <button onclick="{SaveFinalResult}"> Finale </button> herunterladen
        </div>
    )
}

Standard -Audiorecorder exportieren</chunkslist.length></blob></nodejs.timer></blob></blob>

Während des Versuchs, den Blob -Stream zu teilen und die WAV -Datei zu generieren, wurde festgestellt, dass das manuelle Hinzufügen der WAV -Header -Informationen das Problem nicht lösen würde. Der Grund dafür ist, dass die Struktur der WAV -Datei relativ streng ist. Wenn die Header -Informationen nach der Segmentierung nicht korrekt hinzugefügt werden, kann die Datei beschädigt werden.

Ein Vorschlag zur Lösung dieses Problems ist die Verwendung der WASM -Version von FFMPEG, einer Bibliothek mit Audio- und Videoverarbeitung, die im Browser ausgeführt werden kann. Damit können Sie das Audio problemlos segmentieren und das richtige WAV -Dateiformat erstellen. Sie können in Betracht ziehen, das Projekt FFMPEG. GWASM zu verwenden, um diese Funktion zu implementieren.

Das obige ist der detaillierte Inhalt vonWie teilen Sie einen aufgezeichneten Blob -Stream mit JavaScript in mehrere 5 -Sekunden -WAV -Dateien auf und stellen Sie sicher, dass er normal abgespielt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!