Dynamic Waveform Visualizations with wavesurfer.js

David Walsh

6 months ago

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.

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: