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. When a user changes volume, the current value is also saved to local storage.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. Because of this, we must divide the volume range by 100 to convert it to the required decimal value. One important thing to note, although the volume slider ranges from 0 - 100, Wavesurfer accepts values as a decimal between 0 - 1. It simply sets the volume of the Wavesurfer instance to the current value of the volume input. We can define a function to handle user interaction with the volume slider. None of the general styles below are essential to the player and can be ignored if you're embedding this player into an existing project. I'm using CSS custom properties to define colors and the border, as well as using some basic element resets. SoundCloud Player SoundCloud Player Artist - Track Title 00:00:00 / 00:00:00 CSSįirst, we create the general page styles. Putting it all together and the final HTML file should look something like this. The diagram below demonstrates where each of these elements will be used, with labels indicating each individual HTML code block. That's all the code required for the HTML. The timecode will output the current timestamp and total duration of the audio track. The player body contains an empty div for the waveform, as well as elements for the volume controls and the timecode. Player Bodyīelow the play button, we can add the player body. It is important to add the id attribute to this element as we'll be using this to select it later on in the javascript. Inside the button element, we add an image linking to the SVG icon for the play button. Inside the audio-player div we first create a play button. Inside the body, we need to add two tags, a main tag with a class of container and a div inside with the class of audio-player. The HTML is pretty simple, a standard HTML file with a link to the style.css stylesheet and both the wavesurfer.js script and the external script.js. We need four icons, one for play, pause, mute and, unmute. You can use any icons you'd like, but I'd recommend checking out, which has a great collection of free and open-source SVG icons. Grab the latest version of Wavesurfer.js from Unpkg. The overall is structured as follows: index.html style.css script.js assets/ ├─ icons/ │ ├─ play.svg │ ├─ pause.svg │ ├─ volume.svg │ ├─ mute.svg ├─ audio/ │ ├─ sample.mp3 Wavesurfer There is also an assets folder, which will contain a folder for icons and an audio folder for the sample MP3 used in the project. The structure of the app is fairly straightforward, with just three main files, an index.html, style.css and script.js. You can grab a copy and follow along to understand how it all comes together. If you'd like to dive right into the code, it's available on GitHub. The only third-party code required is Wavesurfer.js, which will render the waveform and help when handling the playback control functions. It's built using plain HTML, CSS, and vanilla Javascript. This tutorial will walk you through the steps required to create a SoundCloud-style audio player with custom audio controls and a live waveform.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |