waveform draw fails silently with short sounds at certain window widths, esp on hi dpi displays

Wavesurfer.js version(s):

4.1.1

Browser and operating system version(s):

observed on at least Windows latest FF & Chrome, Mac latest Chrome, probably others

Code needed to reproduce the issue:

https://codepen.io/keymapper/pen/XWKdwvz?editors=0010

Use behaviour needed to reproduce the issue:

With very (very) short sounds, the waveform is blank on responsive wavesurfer elements if the window is set wide enough, regardless of minPxPerSec setting, and with no firing of the ‘error’ callback. The above codepen loads 3 short drum sound waveforms (all around 0.1 seconds or less) in responsive mode. On my 2k desktop monitor the topmost sound waveform is always rendered blank at just about any window width, and if I maximize (2048x1040 reported innerWidth but this is scaled with window.devicePixelRatio of 1.25) the top 2 are blank. On my 13" macbook pro retina display if I maximize all 3 turn blank. In all cases if I resize the window width small enough the waveform comes back into view. It seems like some threshold is reached where minPxPerSec has no effect, but ideally wavesurfer should catch this situation and adjust the minPxPerSec automatically even if it means a pixelated waveform (or at least partially fill the container or fire an error rather than be blank). It seems like differing system scaling settings and monitor hi-dpi-ness comes into play here as well.

[marcelblum]

Sure, here’s the same demo in a standalone page on my own server: https://soundplant.org/wavesurfer/wavesurferresizebug.html

[marcelblum]

@thijstriemstra IMO it’s still a bug at least because the error event is not emitted in this situation, but certainly a low priority one with an easy workaround now that I know how to handle it.