Wavesurfer.js: Timeline/waveform breaks when zooming - regions

Created on 20 Sep 2016 · 19Comments · Source: katspaugh/wavesurfer.js

Using MultiCanvas renderer
Steps to reproduce:

Drag a region larger
Zoom in
Zoom out... the region's location within the canvas is not updated properly, causing display issues.

bounty bug plugins

Source

jeremylach

All 19 comments

@jeremylach, do you know if this occurs with the regular Canvas renderer as well? Just curious.

chrisparton1991 on 21 Sep 2016

Yes, it does. In fact without MultiCanvas, zooming past wavesurfer.zoom(6) clears the waveform and shows this issue. This is with a 37 minute audio. MultiCanvas definitely performs better.

With MultiCanvas, and no regions, I can zoom to 100 with no issues, zooming out to "0" works too.
With MultiCanvas, and regions, I can zoom to 100 with no issues, but zooming out gives this issue described in the report.

jeremylach on 21 Sep 2016

@jeremylach can you verify if the problem is solved in version 1.2.6 (I've just released it on npm).

katspaugh on 19 Nov 2016

This does seem to help quite a bit. The only issue I'm still seeing is an inconsistency with the timeline numbering.

Initial (zoom 0)
zoom0_initial

Zoom 2 (should it really be zoomed in this much from only a increase in zoom level of 2? Or is it the timeline is off but the waveform is correct?)
zoom_2

Zoom 4
zoom_4

Zoom back to 2
zoom_2_second

Zoom back to 0
zoom_0_second

Manually trigger wavesurfer.zoom(0) ... here we can see the waveform hasnt redrawn (same as above zoom 0), but the timeline has reset to the proper times.
zoom_0_manual

jeremylach on 20 Nov 2016

The above example was done with custom primaryLabelInterval and secondaryLabelInterval for the timeline initialization... here's the same problem illustrated with default timeline settings

Initial state (minPxPerSec = 0)
zoom_0_initial

Zoom 2
zoom_2_

Zoom 0
zoom_0_second_

Zoom 0 with wavesurfer.zoom(0)
zoom_0_force

jeremylach on 20 Nov 2016

@jeremylach thanks! I'll take a look at the timeline.

katspaugh on 21 Nov 2016

Just a heads up: I haven't had a chance to work on this this weekend, but keeping tabs on this issue.

katspaugh on 28 Nov 2016

👍1

@jeremylach the timeline issue should be solved in v 1.2.7 (on npm). Can you take a look?

katspaugh on 3 Dec 2016

@katspaugh unfortunately I am seeing this issue persisting. The workaround by calling the .zoom(0) function twice does seem to work though. I can .zoom() to any number then call .zoom(0) 2 times and the timeline will reset to the original state.

jeremylach on 4 Dec 2016

@jeremylach I've just realized I forgot to publish to npm. Were you trying v 1.2.7?
Can you reproduce your issue on http://wavesurfer-js.org/example/zoom/ ? If not, could you share your test-case via codepen?

Edit: just published v 1.2.7 on npm.

katspaugh on 4 Dec 2016

Yes I downloaded the zip from the github page, 1.2.7. I'll take a look at the zoom example or create my own for you to see.

jeremylach on 5 Dec 2016

@katspaugh I am seeing the same behavior on the wavesurfer zoom example... Drag the slider in to zoom, then drag back out. The timeline does not zoom out entirely and does not look like the way it started.

jeremylach on 5 Dec 2016

👍1

Ah, thanks, now I see it too!

katspaugh on 5 Dec 2016

It appears, it was a problem with that particular page, though. The left-most position of the slider didn't match the initial zoom of the waveform. Now it should be fine.

Otherwise, is there any other way to reproduce your issue?

katspaugh on 5 Dec 2016

I modified your zoom example as a codepen, to match my wavesurfer config, and at first I could not figure out why it seemed to be working on the codepen but not my site. I then realized that if I removed the regions altogether, or added them to the wavesurfer BEFORE I initialize the timeline then it works like your example. In my code, I added the regions AFTER I initialized the timeline. I am not sure if this is significant or something to note in the docs/change in the code but this seems to have fixed the problem.

Here we see how my code was set up, regions added after the timeline, and the bug I've been describing is present.
http://codepen.io/jeremylach/pen/zoWdyo?editors=1011

jeremylach on 5 Dec 2016

Sounds like a bug, I'll take a look. Thanks for helping to figure this out.

katspaugh on 6 Dec 2016

Closing this one. The last comment by @jeremylach to be solved in #895.

katspaugh on 13 Dec 2016

hi all. any chance 4ee2b298 could be merged in the next branch? atm, the regions are updated only when zooming in, not when zooming out. the timeline plugin also appears to have a similar issue.

piem on 1 Jul 2017

I just posted on #895 and someone ask for clarification but the thread got locked. Not accepting my comment. Using 2.0.6. To clarify, it is the very first issue reported here that I am seeing. The waveform (and regions) disappears when zooming out. Zooming in is fine. I don't see any logs but i will work on putting some sample of on codepen or somewhere so you can see it.