Question

I have raw 44,1 kHz audio data from a song as Javascript array and I’d like to create a zoomable timeline out of it.

Example timeline from Audacity:

Since there are millions of timepoints normal Javascript graphics libraries probably don’t cut it: I think, not sure, that normal graph libraries will die on this many timepoints. But does there exist already libraries for this sort of visualization for JS? Canvas, webGL, SVG all are acceptable solutions.

A solution preferably with zoom and pan.

Note that this happens strictly on client side and server-side solutions are not accetable.

Answer 1

I’ve looked into this same problem pretty extensively. To the best of my knowledge, the only existing project that does close to what you want is wavesurfer.js. I haven’t used it, but the screenshots and the description sound promising.

See also this question.

Best of luck.