# 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).
- `formatTimeCallback` - custom time format callback.

Fork me on GitHub