katspaugh / wavesurfer.js

Audio waveform player
https://wavesurfer.xyz
BSD 3-Clause "New" or "Revised" License
8.39k stars 1.59k forks source link

Waveform gaps with long audio at a high zoom #3761

Open katspaugh opened 1 week ago

katspaugh commented 1 week ago

A known regression in 7.8.0, reported here: https://github.com/katspaugh/wavesurfer.js/issues/3696#issuecomment-2172745200

The new virtualized rendering leaves gaps in some edge cases.

larsrgit commented 1 week ago

Sadly I can't share the audio, as it contains sensitive personal information.

One more thing I noticed: It also depends on where in the audio I zoom, not only the audio length. The audio I tested with is 62:01min long. When I zoom into any point before a specific point (dependend on the container size, the smaller the container, the later in the audio) it shows the waveform, after this point the waveform does not render if I zoom further than ~1500pxPerSec (independent of container size the same pxPerSec).

More information that could be relevant. I zoom into regions using the following code:

// change zoom and view to the uttterance
this.utteranceWs.zoom(this.waveSurferContainer.nativeElement.clientWidth/(this.endTimeSec - this.startTimeSec))
// set time first to zero to assure that autoscroll sets the curser to the middle of the view when setting the curser to the middle of the utterance
this.utteranceWs.setTime(0)
this.utteranceWs.setTime(this.startTimeSec + (this.endTimeSec - this.startTimeSec) / 2)
// disable autoscroll
this.utteranceWs.setOptions({autoScroll:false})
// set time to beginning of utterance
this.utteranceWs.setTime(this.startTimeSec)
katspaugh commented 1 week ago

Ah I actually haven’t tried with programmatic time/zoom setting, I always tested with manual scrolling. Thanks!