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,
})
})
}
})