# wavesurfer.js + Timeline

#### wavesurfer.js Timeline Plugin

Adds a simple timeline to your wavesurfer.js instances.

Download the plugin

#### Quick Start

    var wavesurfer = WaveSurfer.create({
      // your options here
      plugins: [
        WaveSurfer.timeline.create{
            container: "#wave-timeline"
        })
      ]
    });

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

#### Options

- `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. (Integer or function which receives pxPerSec value and reurns value)
- `primaryLabelInterval` - number of primary time labels. (Integer or function which receives pxPerSec value and reurns value)
- `secondaryLabelInterval` - number of secondary time labels (Time labels between primary labels, integer or function which receives pxPerSec value and reurns value).
- `formatTimeCallback` - custom time format callback. (Function which receives number of seconds and returns formatted string)

Fork me on GitHub