wavesurfer.js: 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.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 15 (14 by maintainers)
Sure, here’s the same demo in a standalone page on my own server: https://soundplant.org/wavesurfer/wavesurferresizebug.html