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.
Fork me on GitHub