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.
