Norway


dynamic waveform visualizations with wavesurfer.js - waveformjs - Dynamic Waveform Visualizations with wavesurfer.js

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 image utility that uses to Web Audio API to create super customizable waveform that take only a minute to implement.

Start by wavesurfer.js in your page:

<script src="http://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, 0%, 0%, 0.5)',
 cursorColor: '#fff',
 // This parameter makes the waveform look like SoundCloud's player
 barWidth: 
});

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

wavesurfer.load('RodStewartMaggieMay.mp3');

Adding buttons to 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 as you’d like making the waveform visualization fit your branding.

The post Dynamic Waveform Visualizations with wavesurfer.js appeared first on David Walsh Blog.

dynamic waveform visualizations with wavesurfer.js - ba vlny16 pc20dwalsh 20160705 - Dynamic Waveform Visualizations with wavesurfer.js



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here