Waveform images are a great audition for boring audio widgets. They can be both functional and aesthetically pleasing, allowing users to visually navigate through audio. Recently, I found wavesurfer.js, a great waveform imaging tool that uses web audio API to create super-customizable waveform visualizations that take just a minute to deploy.
Start recording wavesurfer.js on your page:
Create an instance of WaveSurfer, go through the selector of the element and other configuration options:
var wavesurfer = WaveSurfer.create ();
Finally, wavesurfer.js directly to load the audio file:
Adding buttons to start pause, skip and mute / cancel is also easy with wavesurfer.js:
wavesurfer.js marks each bar while continuing the song, where you can even skip the whole track while clicking on points in the waveform visualization!
wavesurfer.js takes only a moment to implement, but with its huge configuration list you can spend as much time as you want the waveform to suit your branding.