(Help) Need to have different color inside region.

[ahsanabbasi404]

Hello everyone,

I'm new to WaveSurfer and need help changing the waveform color inside a region. I want the waveform to have a different color inside the region (e.g., red) compared to outside the region.

Is this possible? If so, how can I achieve it?

Another question, getDecodedData does return a audio buffer, when I play it using web audio, its quality differ from original, while if I manually decode the buffer from file and play it, it plays fine. Is there some manipulation with decoded data?

Thanks!

[katspaugh]

It's not possible to change the color of the waveform underneath a region. You can approximate it with some clever CSS trickery but it's limited. E.g. region.content.style.mixBlendMode = 'plus-lighter'. See https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

As for getDecodedData, the quality is low because we intentionally decode audio with the lowest sampling rate possible for better performance, as this data is used only for rendering. If you wish to also play this data as audio, you should set sampleRate: 44100 or higher in the wavesurfer options. See https://wavesurfer.xyz/docs/types/wavesurfer.WaveSurferOptions.

[ahsanabbasi404]

Thank you, that was useful.