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
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    Scroll IFRAMEs on iOS

    For the longest time, developers were frustrated by elements with overflow not being scrollable within the page of iOS Safari.  For my blog it was particularly frustrating because I display my demos in sandboxed IFRAMEs on top of the article itself, so as to not affect my site's...

  • By
    Animated AJAX Record Deletion Using Dojo

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with Dojo JavaScript. The PHP - Content & Header The following snippet goes at the...

Discussion

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

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