Comment diviser un flux blob enregistré en plusieurs fichiers WAV de 5 secondes à l'aide de JavaScript et s'assurer qu'il joue normalement?

Utilisez JavaScript pour diviser le flux blob enregistré et générer un fichier WAV de 5 secondes

Lors de l'enregistrement à l'aide de React-MIC, j'ai rencontré une exigence: j'ai besoin de diviser le flux BLOB enregistré en plusieurs fichiers WAV de 5 secondes. Cependant, après avoir essayé, j'ai constaté que seul le premier fichier WAV divisé peut être lu normalement et que le reste des fichiers est invité à être corrompu.

Lors de la mise en œuvre de cette exigence dans le frontal, nous sommes principalement confrontés à deux défis: l'un est de savoir comment segmenter correctement le flux blob, et l'autre est de savoir comment s'assurer que chaque clip segmenté peut générer et lire correctement les fichiers WAV. Voici des exemples de code et des solutions:

 Importer React, {useref, useState} de 'react'
import {reactmic, reactMicStoPevent} à partir de 'react-mic'
import {bouton} de 'antd'

const AudioreCrorder = () => {
    const [enregistrement, setRecord] = UseState (false)
    const resref = useref <blob> ([])
    const AudiochunksRef = useref <blob> ([])
    const interalref = useref <nodejs.timer null> (null)
    const premierblob = useref <blob non d> (indéfini)

    const CreateWavheader = (numChannels, samplerate, bytelngth) => {
        constant const = new ArrayBuffer (44);
        const View = new DataView (en-tête);

        View.SetUint32 (0, 1380533830, false); // "riff"
        View.SetUint32 (4, bytelngth 36, false);
        View.SetUint32 (8, 1718449184, false); // "VAGUE"
        View.SetUint32 (12, 1684108385, false); // "FMT"
        View.SetUint32 (16, 16, true); // 16 pour 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); // "données"
        View.SetUint32 (40, bytelngth, true);

        En-tête de retour;
    };

    const SaveFile = async () => {
        const chunkslist = resref.current;
        pour (que i = 0; i <chunkslist.length i const audiobuffer="new" uint8array chunkslist .arraybuffer header="CreateWavheader" audiobuffer.length supposons mono et wavblob="new" blob wav url="url.createObjectUrl" a="document.CreateElement" a.href="url;" a.download="`Enregistrement" .wav a.click url.revokeobjecturl startrecording="()"> {
        setRecord (true)
        AudioChunksRef.Current = [] // Effacer les données d'enregistrement précédentes // Diviser l'intervalle d'enregistrement.
            const CurBlob = new Blob (AudiochunksRef.current, {type: 'audio / wav'})
            const startIndex = AudiochunksRef.current.indexof (FirstBlob.current comme blob)
            const blob = curblob.slice (startIndex === -1? 0: startIndex, -1, 'audio / wav')
            FirstBlob.Current = AudiochunksRef.current.at (-1)
            // traite la console de données d'enregistrement actuelle.log ('segment des données d'enregistrement actuelles:', blob)
            resref.current.push (blob)
        }, 5000)
    }

    const stopRecording = () => {
        setRecord (false)
        interalref.current && clearInterval (interalref.current) // timiner claire}

    const Odata = (enregistréblob: blob) => {
        AudiochunksRef.current.push (enregistréblob) // Enregistrer les données d'enregistrement}

    const Onstop = (enregistréblob: reactMicStOnevent) => {
        Console.log ('enregistré terminé:', RecordedBlob)
    }

    const SaveFile1 = () => {
        const chunkslist = resref.current
        chunkslist.map (async (v, i) => {
            const filename = 'aaa.wav'
            const File: file = nouveau fichier ([v], nom de fichier, {type: 'audio / wav'})
            const FileSize = file.size

            Console.log ('Files Size', FileSize)
            // Créer un lien de téléchargement const url = url.createObjectUrl (fichier)
            const a = document.createelement ('a')
            a.href = URL
            A.Download = `Enregistrement $ {i} .wav` // Définissez le nom du fichier de téléchargement a.click () // Trigger Download // Release URL Resource url.RevokeObjectUrl (URL)
        })
    }

    const SaveFinalResult = () => {
        const filename = 'aaa.wav'
        const File: file = nouveau fichier (AudiochunksRef.current, nom de fichier, {type: 'audio / wav'})
        const FileSize = file.size

        Console.log ('Files Size', FileSize)
        // Créer un lien de téléchargement const url = url.createObjectUrl (fichier)
        const a = document.createelement ('a')
        a.href = URL
        A.Download = `Enregistrement $ {date.now ()}. wav` // Définissez le nom du fichier de téléchargement a.click () // Trigger Download // Release URL Resource url.RevokeObjectUrl (URL)
    }

    Retour (
        <div>
            <reactmic enregistre="{disques}" onstop="{onstop}" ondata="{ondata}" mimetype="Audio / wav"></reactmic>
            <button onclick="{starTrecording}"> Démarrer l'enregistrement <button onclick="{stopRecording}"> Arrêtez d'enregistrer 
            <button onclick="{SaveFile}"> Télécharger 
            <button onclick="{SavefinalResult}"> Télécharger Final 
        </button></button></button></button>
</div>
    )
}

exportation par défaut audioritor</chunkslist.length></blob></nodejs.timer></blob></blob>

Pendant le processus d'essai de diviser le flux Blob et de générer le fichier WAV, il a été constaté que l'ajout manuellement les informations de l'en-tête WAV ne résoudrait pas le problème. La raison en est que la structure du fichier WAV est relativement stricte. Si les informations d'en-tête ne sont pas correctement ajoutées après la segmentation, le fichier peut être corrompu.

Une suggestion pour résoudre ce problème consiste à utiliser la version WASM de FFMPEG, une bibliothèque de traitement audio et vidéo qui peut être exécutée dans le navigateur. Avec lui, vous pouvez facilement segmenter l'audio et générer le format de fichier WAV correct. Vous pouvez envisager d'utiliser le projet FFMPEG.WASM pour implémenter cette fonction.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!