Slow speed rendering high pixel per second waveform peak data

[Linkandzelda]

Wavesurfer.js version(s):

5.1.0

Browser and operating system version(s):

Chromium 92.0.4515.107 on Arch Linux

Code needed to reproduce the issue:

Generate high pixel per second peak data and load it into wavesurfer as normal: audiowaveform -i long_clip.mp3 -o long_clip.json --pixels-per-second 1000 --bits 8

Use behaviour needed to reproduce the issue:

I am generating peak data for my audio and video files using audiowaveform as suggested in the FAQ. However as per the documentation if I use --pixels-per-second 20 then the zoomed waveform becomes less detailed as there is less peaks in the produced data. I am therefore using --pixels-per-second 1000 to produce a higher quality waveform.

As a result the rendering of the waveform's peak data takes much longer to update the canvas. This is considerably noticeable in audio/video files with a duration longer than 5 mins. With a 10 minute MP3 the rendering of the waveform canvas with provided peak data took 34s. With a 1 hour 30 minute video the rendering took 3 minutes. Using peak data generated with --pixels-per-second 500 lowers these loading speeds much further, however the lower it is set the less detailed the rendered waveform is.

During the time it's rendering the entire UI is locked and nothing can be clicked, not even right click. It's worth noting that when the peak data is not provided the waveform is rendered very quickly once the entire item has been fetched which is not the goal here. It is only providing peak data that causes this slow rendering speed.

Is there anything which can be done about this?

[entonbiba]

@Linkandzelda do you have a link to sample code online to check with the json data / audio file?