Home Reference Source
import TimelinePlugin from 'wavesurfer.js/src/plugin/timeline/index.js'
public class | source

TimelinePlugin

Extends:

Observer → TimelinePlugin

Implements:

Adds a timeline to the waveform.

Example:

// es6
import TimelinePlugin from 'wavesurfer.timeline.js';

// commonjs
var TimelinePlugin = require('wavesurfer.timeline.js');

// if you are using <script> tags
var TimelinePlugin = window.WaveSurfer.timeline;

// ... initialising wavesurfer with the plugin
var wavesurfer = WaveSurfer.create({
  // wavesurfer options ...
  plugins: [
    TimelinePlugin.create({
      // plugin options ...
    })
  ]
});

Static Method Summary

Static Public Methods
public static

Timeline plugin definition factory

Constructor Summary

Public Constructor
public

Creates an instance of TimelinePlugin.

Member Summary

Public Members
public

canvases: *[]

public
public

params: *

public

util: *

public
public

wrapper: *

Method Summary

Public Methods
public

Add new timeline canvas

public

Create a timeline element to wrap the canvases drawn by this plugin

public

Turn the time into a suitable label for the time.

public

Return the cadence of notches that get labels in the primary color.

public

Return the cadence of notches that get labels in the secondary color.

public

Return how many seconds should be between each notch

public

Destroy function used by the plugin API

public

fillRect(x: number, y: number, width: number, height: number)

Draw a rectangle on the canvases

public

fillText(text: string, x: number, y: number)

Fill a given text on the canvases

public

init()

Initialisation function used by the plugin API

public

Remove timeline canvas

public

render()

Render the timeline (also updates the already rendered timeline)

public

Render the timeline labels and notches

public

setFillStyles(fillStyle: DOMString | CanvasGradient | CanvasPattern)

Set the canvas fill style

public

setFonts(font: DOMString)

Set the canvas font

public

Make sure the correct of timeline canvas elements exist and are cached in this.canvases

public

Update the dimensions and positioning style for all the timeline canvases

Inherited Summary

From class Observer
public
public

fireEvent(event: string, args: ...any)

Manually fire an event

public

Attach a handler function for an event.

public

once(event: string, handler: function): ListenerDescriptor

Attach a handler to an event.

public

Disable firing a list of events by name.

since 4.0.0
public

un(event: string, fn: function)

Remove an event handler.

public

unAll()

Remove all event handlers.

Static Public Methods

public static create(params: TimelinePluginParams): PluginDefinition source

Timeline plugin definition factory

This function must be used to create a plugin definition which can be used by wavesurfer to correctly instantiate the plugin.

Params:

NameTypeAttributeDescription
params TimelinePluginParams

parameters use to initialise the plugin

Return:

PluginDefinition

an object representing the plugin

Public Constructors

public constructor(params: TimelinePluginParams, ws: object) source

Creates an instance of TimelinePlugin.

You probably want to use TimelinePlugin.create()

Override:

Observer#constructor

Params:

NameTypeAttributeDescription
params TimelinePluginParams

Plugin parameters

ws object

Wavesurfer instance

Public Members

public canvases: *[] source

public container: * source

public params: * source

public util: * source

public wavesurfer: * source

public wrapper: * source

Public Methods

public addCanvas() source

Add new timeline canvas

public createWrapper() source

Create a timeline element to wrap the canvases drawn by this plugin

public defaultFormatTimeCallback(seconds: number, pxPerSec: number): number source

Turn the time into a suitable label for the time.

Params:

NameTypeAttributeDescription
seconds number

Seconds to format

pxPerSec number

Pixels per second

Return:

number

Time

public defaultPrimaryLabelInterval(pxPerSec: number): number source

Return the cadence of notches that get labels in the primary color.

Params:

NameTypeAttributeDescription
pxPerSec number

Pixels per second

Return:

number

Cadence

public defaultSecondaryLabelInterval(pxPerSec: number): number source

Return the cadence of notches that get labels in the secondary color.

Params:

NameTypeAttributeDescription
pxPerSec number

Pixels per second

Return:

number

Cadence

public defaultTimeInterval(pxPerSec: number): number source

Return how many seconds should be between each notch

Params:

NameTypeAttributeDescription
pxPerSec number

Pixels per second

Return:

number

Time

public destroy() source

Destroy function used by the plugin API

public fillRect(x: number, y: number, width: number, height: number) source

Draw a rectangle on the canvases

(it figures out the offset for each canvas)

Params:

NameTypeAttributeDescription
x number

X-position

y number

Y-position

width number

Width

height number

Height

public fillText(text: string, x: number, y: number) source

Fill a given text on the canvases

Params:

NameTypeAttributeDescription
text string

Text to render

x number

X-position

y number

Y-position

public init() source

Initialisation function used by the plugin API

public removeCanvas() source

Remove timeline canvas

public render() source

Render the timeline (also updates the already rendered timeline)

public renderCanvases() source

Render the timeline labels and notches

public setFillStyles(fillStyle: DOMString | CanvasGradient | CanvasPattern) source

Set the canvas fill style

Params:

NameTypeAttributeDescription
fillStyle DOMString | CanvasGradient | CanvasPattern

Fill style to use

public setFonts(font: DOMString) source

Set the canvas font

Params:

NameTypeAttributeDescription
font DOMString

Font to use

public updateCanvases() source

Make sure the correct of timeline canvas elements exist and are cached in this.canvases

public updateCanvasesPositioning() source

Update the dimensions and positioning style for all the timeline canvases