make progressColor only apply when playing inside a region

[yannicklaclau]

Is there any way to make the progressColor active only when playing inside a region?

For example:

• audio of 60 seconds
• region between 10 seconds and 20 seconds
• if you play the audio, progressColor shows only for the waveform between 10-20 seconds
• the rest of the waveform, 0-10 and 20-60, shows the default waveColor

I've searched around but it doesn't seem like this is possible - the progressColor seems to always paint the waveform from 0 seconds to the currentTime.

Has anyone found a workaround for this??

[dakir08]

I have same issues with him, does any one have ideas on this problem?

[hainguyenspdn]

Please help us to have this effect. I want this too but can't find anyway to do it yet.

[sherylj]

@katspaugh Has this been resolved? I'm looking for a solution for this issue as well.

[katspaugh]

This is not possible with the current API.

You can probably set the progress color to the same color as the waveform and implement your own progress overlay inside a region. Maybe just a simple semi-transparent div increasing its width inside the region element as the audio plays.

[qaadoor]

I would like to put real time annotations / information like emotion in some placeholders below the wavesurfer div. They depend on regions and I was wondering if there is a "region-in" event where it is triggered when a specific region is playing. I can see that older versions of wavesurfer.js had that event while the new wavesurfer.js@beta doesn't. I could be mistaken. Pls let me know if there's any alternative. Thx!

[katspaugh]

I'll make an issue to restore that event.
You can for now iterate over your regions and check the currentTime to find the currently playing region like this:

wavesurfer.on('timeupdate', (currentTime) => {
  const currentRegion = regionsPlugin.getRegions().find((region) => {
    return region.start >= currentTime && region.end <= currentTime)
  })
  if (currentRegion) {
    // do some stuff with it
  }
})

[qaadoor]

Hi, appreciate the quick response. I have tried your code and I got the following type error:

Uncaught TypeError: Cannot read properties of undefined (reading 'find')

[katspaugh]

Fixed, there was a typo.