wavesurfer.js + Timeline

wavesurfer.js Timeline Plugin

Adds a simple timeline to your wavesurfer.js instances.

Installation

1. add the Timeline plugin script tag
2. create a WaveSurfer instance
3. add a container HTML element for the timeline
4. create a Timeline instance in the WaveSurfer's "ready" event callback

Download the plugin (5 KB)

Quick Start

var wavesurfer = Object.create(WaveSurfer);

wavesurfer.init({
  // your options here
});

wavesurfer.on('ready', function () {
    var timeline = Object.create(WaveSurfer.Timeline);

    timeline.init({
        wavesurfer: wavesurfer,
        container: "#wave-timeline"
    });
});

wavesurfer.load('example/media/demo.mp3');

Options

• wavesurfer - required - a WaveSurfer instance
• container - required - the element in which to place the timeline, or a CSS selector to find it
• height - the height (in pixels) of the timeline. The default is 20.
• notchPercentHeight - the height (in percent) of the minor notch lines in the timeline. The default is 90.
• primaryColor - the color of the modulo-ten notch lines (e.g. 10sec, 20sec). The default is '#000'.
• secondaryColor - the color of the non-modulo-ten notch lines. The default is '#c0c0c0'.
• primaryFontColor - the color of the non-modulo-ten time labels (e.g. 10sec, 20sec). The default is '#000'.
• primaryFontColor - the color of the non-modulo-ten time labels (e.g. 5sec, 15sec). The default is '#c0c0c0'.
• fontFamily - the font family for the time labels. The default is 'Arial'.
• fontSize - the font size for the time labels. The default is 10.