jQuery waveform visualizer

A simple jQuery plugin build around waves.js, to visualize waveform and segments along with an HTML5 audio player.

warning: this plugin relies on the webAudioAPI (IE not supported)

Install

first load jquery, waves.js and the plugin files in your page, before closing the body tag is considered as a good practice.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/waves.min.js"></script>
<script src="/path/to/jquery-waveform-visualizer.js"></script>

Plugin initialization

In order to display the visualization, you need to insert the following tag:

<div id="timeline" data-audio="/path/to/audio-file.wav" data-annotations="/path/to/annotations-file.json"></div>

• data-audio (mandatory)
  value must be set to the path to your audio file
  for cross browser compatibility, use a .wav file, multiple sources are not yet supported
• data-annotations (optionnal)
  attribute value must be the path to your annotation data file

The data file is used to configure the segments on the visualization and must follow this convention:

[
  {
    "start": 1.2, // in seconds
    "duration": 1 // in seconds
  }, {
    // ...
  }
]

You can also set the size of the module in css (defaults: width: 100%, height: 200px):

#timeline {
  width: 800px;
  height: 240px;
}

Finally, initialize the plugin:

$(document).ready(function() {
  $('#timeline').waveformVisualizer();
});

Configuration options

Here are the default values:

var defaults = {
  waveformColor: '#586e75',
  segmentColor: '#cb4b16',
  anchorColor: '#657b83',
  cursorColor: '#dc322f',
  segmentOpacity: 0.3
};

These values can be overriden in the plugin initialization:

$('#timeline').waveformVisualizer({
  waveformColor: 'steelblue',
  // ...
})

Example

To see a live example of the plugin, launch a file server in this directory and go to the /example folder