How to detect the silence part in audio when using wavesurfer.js

[truong24hdev]

The issue:

I am developing a feature to help users to highlight silences in an audio file, so I want to detect start time silent in audio files. I am developing it using ReactJs and wavesurfer-js library. I want to ask if it is possible for this library to assist me in implementing this feature. How can this library help me to detect when the wave has a lot of straight line (i.e. too much silence), so I can know when to start silent in audio.

Look at the picture, you can see the silent part in the end of the audio, so I want to highlight this part

I've tried to check the docs if there is any function i can call or any property i can access on the WaveSurfer object but couldn't find any.

I want to detect start time silent in audio files. Could you tell me the way of doing this, please? thank you so much

[prakharpbuf]

I don't believe wavesurfer.js provides any methods for directly manipulating/analyzing audio. However, you can use the JavaScript Web Audio API for such features.
You can also use services like ffmpeg in your backend and have it return, for example, start time and end time of silences and do wavesurfer.addregion(options) or something to highlight/select the silence portion, depending on your use case.

[entonbiba]

@truong24hdev have a look at this section of the code, you can essentially add in there a part where it would check the peak and manipulate the progress and bar colours before it renders if it's 0.

setFillStyles

wavesurfer.js/src/drawer.multicanvas.js

Line 566 in a92da7f

setFillStyles(entry, waveColor = this.params.waveColor, progressColor = this.params.progressColor) {

[tracy-burnett]

You can ask WaveSurfer to give you an array of peaks in the waveform and then look for 0 values or sequences of 0 values within the array. This is the line of code that I used to generate such an array. I hope this is what you are looking for. I don't remember why I said that accuracy is irrelevant.

// length of output array/2, accuracy (irrelevant), don't popup a new window, start at 0,
this.wavesurfer.exportPCM((this.totalDuration / 2) * 100, 10000, true, 0)

[prakharpbuf]

Do you still need help with this? I think I can help you.
I've been working a lot with the web audio API and audio manipulation. I think I can help you find the start and end times of silence portions in the audio file even if the peaks value is not completely 0. i.e. there is some noise/interference.

[jamesdesouza]

wavesurfer.on('ready', function () { var sec = timeDiffAsSeconds(seg.dst_start_time, seg.dst_end_time) wavesurfer.exportPCM(sec, 10000, true).then(function (pcm) { var excludedRanges = Object.values(wavesurfer.regions.list).map(function (region) { return { start: region.start, end: region.end } }); var silences = []; var s = 0, e = 0; for (var i = 0; i < pcm.length; i = i + 2) { var sec = i / 2; var noise = parseInt((pcm[i] - pcm[i + 1]) * 10000); e = sec; var inExculuedRange = excludedRanges.some(function (range) { return range.start <= sec && range.end >= sec; }) if (inExculuedRange) { s = sec; continue; } if (noise > SETTINGS.silence.peakDiff) { if (e - s >= SETTINGS.silence.duration) { silences.push({ s, e }); } s = sec; } } }) });

I just wrote this. hope it helps!

[katspaugh]

I've added an example of silence detection in the new version of wavesurfer: https://wavesurfer-ts.pages.dev/tutorial/#/examples/silence.js