only render a segment of the waveform

I’d like “to only render the part of the waveform showing along the horizontal scroll” as described by @ErikOmberg and @katspaugh in #672. I’m wondering if anyone has any insight for how to make it possible with wavesurfer?

I am working with long audio files (using MediaElement and pre-analyzed waveform .json). I don’t need to show the entire file, I’m only trying to zoom in very close on one segment at a time. As I zoom, the main canvas exceeds the max number of pixels (as mentioned before https://github.com/katspaugh/wavesurfer.js/issues/458 https://github.com/katspaugh/wavesurfer.js/issues/692).

I can keep zooming with MultiCanvas (thanks for your work on this, @chrisparton1991). But I only need to show the zoomed in segment, and MultiCanvas is using up resources to draw canvases that aren’t visible.

Would it make sense to adapt MultiCanvas, and tell it not to create/draw the extra canvases if scrollParent is false? Or does this call for a custom renderer, like SegmentRenderer? Is anybody else interested/working on this?

[rockyhuber]

@therewasaguy hey mate, how did you go with this? Any updates?

[katspaugh]

I like the approach that peaks.js has taken: they use only one canvas to render the currently visible segment. They redraw the canvas as the track is being navigated.