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'.
  • timeInterval - number of intervals that records consists of. Usually it is equal to the duration in minutes.
  • primaryLabelInterval - number of primary time labels.
  • secondaryLabelInterval - number of secondary time labels (Time labels between primary labels).
Fork me on GitHub