![]() ![]() The first solution, that may be problematic for some people, is to make the div visible shortly, while the waveform is drawn and then hide it short after that. Force container to be visible and hide it again In this short article, we will explain you how to draw the wave from an audio using WaveSurfer when the container is initially hidden. WaveSurfer has this problem, when the container or parent container where the waveform should be drawn, isn't visible and therefore it doesn't have defined dimensions (width and height), so when WaveSurfer is initialized with the fillParent property set to true, the waveform is of course drawn, but with 0px as width as it cannot determine the width of the container ! However, when i initialized the wave in the same page, but inside a visible container, the waveform appeared without issue. So, when i initialized a WaveSurfer instance inside one of those hidden tabs, the wave simply wasn't there. In Bootstrap 4, only the primary tab is visible, the rest are initially hidden. However, i noticed an interesting behaviour when working with this inside a Bootstrap 4 Tab. As always, the initialization is pretty straightforward and i never faced any problem with it. ![]() A couple of days ago, i needed to use the well known library WaveSurfer.js, a customizable audio waveform visualization, built on top of Web Audio API and HTML5 Canvas. ![]()
0 Comments
Leave a Reply. |