Wavesurfer.js: MultiCanvas Renderer and Zoom - Current Indicator place is changing

[samih-dev]

Hi
Example can be found here:
http://codepen.io/SamihAbuawad/pen/yJjrrN

I'm using MultiCanvas as renderer (Thanks to @chrisparton1991), after setting the indicator to specific point in a wave while the audio is paused (try the start of the first wave), and then trying to zoom, the indicator place is being changed.

Anyone faced the same issue? is there any workarouds/fix?

Thanks!
Samih.

[chrisparton1991]

Sounds similar to #778, hopefully they're caused by the same thing.

[chrisparton1991]

Can reproduce using v1.1.2 using MultiCanvas renderer, which is a relatively old release. This likely isn't the same cause as #778.

[chrisparton1991]

It behaves the same until multiple canvases are used by the multicanvas renderer under the hood. Something isn't taking the width of all the canvases into consideration.

This means that if you set maxCanvasSize: 32000, you will be able to zoom in further before this behaviour is exhibited. The tradeoff is that some browsers will not render canvases that large.

I'm working on finding a proper solution at any rate.

[chrisparton1991]

Bars don't seem to be affected. Setting barWidth: 1 is a workaround for this issue, if you can live with having bars. This makes me think this issue is in the MultiCanvas drawWave method.

[chrisparton1991]

Found the issue, I was incorrectly dividing by the canvas size in a length calculation in the multiCanvas drawWave method.

Update: This is part of the issue, but not all of it.

[chrisparton1991]

I've been trying to figure this one out for the past few hours, it's a tricky one.

The cause is essentially that the multicanvas waveform rendering code divides up the waveform into equal chunks per canvas, but the canvases aren't equal width. If the waveform width is 1000 and maxCanvasSize is 400, you'll have canvases of widths 400, 400 and 200. These three canvases will be apportioned the same amount of peak data to render, which is incorrect.

A solution still eludes me.

[katspaugh]

Can we perhaps make the last canvas also 400 and have a common container that would cut off the remaining 200 px (via overflow: hidden)?

[chrisparton1991]

I think I have a solution, but I'll have to continue looking at it after work tomorrow. Baaically, instead of having that 400/400/200 split, I divide then equally (333.3/333.3/333.3).

[samih-dev]

Hi chrisparton1991 thanks for the help

Regarding the using barWidth: 1, I tried but I got the same behavior with an audio which 20+ minutes long.

The audio I'm having is private so I can't upload it to have codepen for it - sorry

I hope you find the fix soon.

[chrisparton1991]

@samih-dev did you see my comment on PR #785? I've hopefully got a solution there. I've attached a zip file containing a test setup that you can run locally (just open the html file in the src directory).

I've noticed that there's a small jump whenever an additional canvas is introduced, although the progress indicator stays in the correct space. I suspect this is caused by a reapportioning of the peak data to the canvases. Increasing the maxCanvasSize will minimize the impact of this if it matters to you.

[samih-dev]

Thanks @chrisparton1991!
The issue is fixed I tried also with audio file which is 20min+ length.

one minor issue is that sometimes when having multi canvases used to draw the wave and have large zoom, the click in a point in the wave isn't accurate - the midLine jumps ahead a little ~ 100px, this happens for me when trying with the large audio file (20min+).
I have checked if this also hapeening on the current version I'm using 1.1.8, its not reporduced, so maybe its happening because of the changes you made?

[chrisparton1991]

That's great news @samih-dev :) I'll take a look at that clicking issue sometime in the next few days. Combining multicanvas with zoom is tricky, because any small inaccuracies get amplified as the zoom factor increases, especially for a large audio file like yours. I'll keep you posted as I investigate a solution.

[moyara]

Hi @chrisparton1991 Thanks for your great works around the multi canvas. I also have inaccuracy issue with zoom factor. Even I'm using 7mins audio, there is noticeable gap between the wave and audio. I'm using zoomLevel=20 now.

[chrisparton1991]

Hi @moyara, thanks for the feedback. I've been flat out this past week, I'll try to fix this issue soon. Sorry to keep you guys waiting!

[chrisparton1991]

@samih-dev and @moyara, I've opened a new PR (#789) that I hope will fix your issues. Fingers crossed!

[chrisparton1991]

This has been merged in now. Any chance of a new release with the fix, @katspaugh?

[katspaugh]

Released as 1.1.11.

[samih-dev]

thanks @chrisparton1991. @katspaugh for the great help!

I'll test this soon and provide final feedback.