How to split into multiple files of recorded blob or file by creating regions in wavesurfer.js?

78 views Asked by At

When user stop recording using the mic then the above event triggered and create regions from that recording My concern is to saves the regions into multiple files or database on setInterval. i.e. when user start the recording the word or character in the table get highlighted then user have to record that word or character then when the highlighter shift to next word then its stop previous recording and create a file or blob to push against that word or character. then start recording again and so on. This function is to split that recording and create regions then display in container. But I want to show separate recording against each word or character in a table or save to database.

function highlightSyllables() {
    currentSyllableIndex = 0;
    highlightInterval = setInterval(function () {
        // Remove highlight from the previous syllable
        if (currentSyllableIndex > 0) {
            syllables[currentSyllableIndex - 1].classList.remove("highlight", "fw-bold");
        }

        // Add highlight to the current syllable
        syllables[currentSyllableIndex].classList.add("highlight", "fw-bold");
        syllables[currentSyllableIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
        // Move to the next syllable
        currentSyllableIndex++;

        // If all syllables are highlighted, stop recording
        if (currentSyllableIndex >= syllables.length) {
            clearInterval(highlightInterval);
            recordButton.innerText = "Start Recording";
        }

    }, intervalDelay);
}

record.on('record-end', (blob) => {
    const container = document.querySelector('#recordings')
    const recordedUrl = URL.createObjectURL(blob)

    // Create wavesurfer from the recorded audio
    const ws = WaveSurfer.create({
        container,
        waveColor: 'rgb(200, 100, 0)',
        progressColor: 'rgb(100, 50, 0)',
        url: recordedUrl,
        minPxPerSec: 100,
        interact: false,
        sampleRate: 48000
    })

    // Initialize the Regions plugin
    const wsRegions = ws.registerPlugin(RegionsPlugin.create())
    // Create regions for each non-silent part of the audio
    ws.on('decode', (duration) => {
        const decodedData = ws.getDecodedData()
        if (decodedData) {
            const regions = extractRegions(decodedData.getChannelData(0), duration)

            // Add regions to the waveform
            regions.forEach((region, index) => {
                wsRegions.addRegion({
                    start: region.start,
                    end: region.end,
                    content: index.toString(),
                    drag: false,
                    resize: false,
                })
            })
        }
    })
0

There are 0 answers