![]() loadBlob(url) – Loads audio from a Blob or File object.load(url) – Loads audio from URL via XHR.isPlaying() – Returns true if currently playing, false otherwise.getDuration() – Returns the duration of an audio clip in seconds.getCurrentTime() – Returns current progress in seconds.empty() – Clears the waveform as if a zero-length audio is loaded.destroy() – Removes events, elements and disconnects Web Audio nodes.init(options) – Initializes with the options listed above.If a scrollbar is present, center the waveform around the progressĪll methods are intentionally public, but the most readily available are the following: The fill color of the waveform after the cursor. Number of seconds to skip with the skipForward() and skipBackward() methods. ![]() Otherwise the waveform is shrunk to the container width (see fillParent). Whether to scroll the container with a lengthy waveform. The fill color of the part of the waveform behind the cursor. If true, normalize by the maximum peak instead of 1.0. Minimum number of pixels per second of audio. You can switch this parameter at any time later on. Whether the mouse interaction will be enabled at initialization. Whether to hide the horizontal scrollbar when one would normally be shown. Whether to fill the entire container or draw only according to minPxPerSec. The fill color of the cursor indicating the playhead position. If specified, the waveform will be drawn like this: ▁ ▂ ▇ ▃ ▅ ▂ĬSS-selector or HTML-element where the waveform should be drawn. MediaElement is a fallback for unsupported browsers. In most cases you don't have to set this manually. Use your own previously initialized AudioContext or leave blank. load ( 'example/media/demo.wav' ) įor a list of other projects using wavesurfer.js, check out Using any of the mentioned solutions will guarantee the rendering of the waveform even when the container or the element itself is hidden.Wavesurfer. Define a minimum amount of pixels that should be used This method has the disadvantage of the lost of the responsiveness offered by the plugin: // Initialize a simple instance of WaveSurfer This can be done setting the fillParent property to false during the initialization and specifying a minimum width in pixels for every second rendered on the wave through the minPxPerSec property. So, if you don't want to apply the first solution, you can choose this one, that solves the problem specifying the width of the waveform manually. Specify width of waveform manuallyĪs mentioned, the problem happens when the container or the waveform itself is initially hidden when the wavesurfer instance is initialized. Hide the container once again ! Now WaveSurfer should have been rendered normallyĭocument.getElementById("hidden-container").style.display = 'none' Make the container temporarily visibleĭocument.getElementById("hidden-container").style.display = '' Attach on ready listener to WaveSurfer We should be able to render properly the waveform even when the container is initially hidden with the following JavaScript: // Initialize a simple instance of WaveSurfer This ensures that the problematic of the hidden div with no dimensions dissapears as the div will be drawn and therefore it will have the dimensions specified by the browser and Wavesurfer will be able to determine the waveform width automatically.įor example, given the following markup, where the container of the waveform is hidden: 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. |