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.
#Wavesurfer width code#
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.
#Wavesurfer width free#
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 kommentar(er)
