Dynamic Waveform Visualizations with wavesurfer.js

By  on  

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.

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

Incredible Demos

  • By
    Degradable SELECT onChange

    Whenever I go to Google Analytics I notice a slight flicker in the dropdown list area. I see a button appear for the shortest amount of time and the poof! Gone. What that tells me is that Google is making their site function...

  • By
    CSS Vertical Center with Flexbox

    I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily...

Discussion

  1. Thanks for this guideline but player not working in IOS (Chrome & Safari)

  2. Thank you for the article! We are having difficulty showing multiple waveforms on the same page. Do you have any advice for us?

  3. ahsan

    wave surfer doesn’t load any live link .work good with local file which not helpful any longer

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!