import TimelinePlugin from 'wavesurfer.js/src/plugin/timeline/index.js'

public class | source

TimelinePlugin

Extends:

Observer → TimelinePlugin

Implements:

PluginClass

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	create(params: TimelinePluginParams): PluginDefinition Timeline plugin definition factory

Constructor Summary

Public Constructor
public	constructor(params: TimelinePluginParams, ws: object) Creates an instance of TimelinePlugin.

Member Summary

Public Members
public	canvases: *[]
public	container: *
public	params: *
public	util: *
public	wavesurfer: *
public	wrapper: *

Method Summary

Public Methods
public	addCanvas() Add new timeline canvas
public	createWrapper() Create a timeline element to wrap the canvases drawn by this plugin
public	defaultFormatTimeCallback(seconds: number, pxPerSec: number): number Turn the time into a suitable label for the time.
public	defaultPrimaryLabelInterval(pxPerSec: number): number Return the cadence of notches that get labels in the primary color.
public	defaultSecondaryLabelInterval(pxPerSec: number): number Return the cadence of notches that get labels in the secondary color.
public	defaultTimeInterval(pxPerSec: number): number Return how many seconds should be between each notch
public	destroy() 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	removeCanvas() Remove timeline canvas
public	render() Render the timeline (also updates the already rendered timeline)
public	renderCanvases() 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	updateCanvases() Make sure the correct of timeline canvas elements exist and are cached in this.canvases
public	updateCanvasesPositioning() Update the dimensions and positioning style for all the timeline canvases

Inherited Summary

From class Observer
public	handlers: *
public	fireEvent(event: string, args: ...any) Manually fire an event
public	on(event: string, fn: function): ListenerDescriptor Attach a handler function for an event.
public	once(event: string, handler: function): ListenerDescriptor Attach a handler to an event.
public	setDisabledEventEmissions(eventNames: string[]) 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:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
pxPerSec	number		Pixels per second

Return:

number

Cadence

public defaultTimeInterval(pxPerSec: number): number source

Return how many seconds should be between each notch

Params:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
fillStyle	DOMString \| CanvasGradient \| CanvasPattern		Fill style to use

public setFonts(font: DOMString) source

Set the canvas font

Params:

Name	Type	Attribute	Description
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