Dynamic Waveform Visualizations with wavesurfer.js

Waveform images are an awesome addition to boring audio widgets.  They can be functional as well as aesthetically pleasing, allowing users to navigate audio visually.  I recently found wavesurfer.js, an amazing waveform image utility that uses to Web Audio API to create super customizable waveform visualizations that take only a minute to implement.

Start by including wavesurfer.js in your page:

<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/wavesurfer.min.js"></script>

Create an instance of WaveSurfer, passing the element’s selector and other configuration options:

var wavesurfer = WaveSurfer.create({ // Use the id or class-name of the element you created, as a selector container: '#waveform', // The color can be either a simple CSS color or a Canvas gradient waveColor: 'grey', progressColor: 'hsla(200, 100%, 30%, 0.5)', cursorColor: '#fff', // This parameter makes the waveform look like SoundCloud's player barWidth: 3
});

Lastly, direct wavesurfer.js to load the the audio file:

wavesurfer.load('RodStewartMaggieMay.mp3');

Adding buttons to play pause, skip, and mute/unmute is easy with wavesurfer.js as well:

<button onclick="wavesurfer.skipBackward()"> Backward
</button> <button onclick="wavesurfer.playPause()"> Play | Pause
</button> <button onclick="wavesurfer.skipForward()"> Forward
</button> <button onclick="wavesurfer.toggleMute()"> Toggle Mute
</button>

wavesurfer.js highlights each bar as the song moves on, even allowing you to skip throughout the song as you click on points in the waveform visualization!

wavesurfer.js takes only a moment to implement but with its massive configuration list you can spend as much time as you’d like making the waveform visualization fit your branding.

Related Post

Rojenx is a leading concept artist who work appears in games and publications

Check out his personal gallery here

In other news …