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.wav');

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 colour of the labels next to the main notches (e.g. 10sec, 20sec). The default is '#000'.
• secondaryFontColor - the colour of the labels next to the secondary notches (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)
• offset - offset (in seconds) for the start of the timeline. The value may also be negative and the default is 0.