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

CursorPlugin

Extends:

Observer → CursorPlugin

Implements:

Displays a thin line at the position of the cursor on the waveform.

Example:

// es6
import CursorPlugin from 'wavesurfer.cursor.js';

// commonjs
var CursorPlugin = require('wavesurfer.cursor.js');

// if you are using <script> tags
var CursorPlugin = window.WaveSurfer.cursor;

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

Static Method Summary

Static Public Methods
public static

Cursor plugin definition factory

Constructor Summary

Public Constructor
public

Construct the plugin class.

Member Summary

Public Members
public

The cursor HTML element

public
public

The html container that will display the time

public

params: *

public

displays the time next to the cursor

public

style: *

public
public

wrapper: *

Method Summary

Public Methods
public

Destroy the plugin (used by the Plugin API)

public

formatTime(cursorTime: number): string

Format the timestamp for cursorTime.

public

Hide the cursor

public

init()

Initialise the plugin (used by the Plugin API)

public

outerWidth(element: DOM): number

Get outer width of given element.

public

Show the cursor

public

updateCursorPosition(xpos: number, ypos: number, flip: boolean)

Update the cursor position

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: CursorPluginParams): PluginDefinition source

Cursor 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 CursorPluginParams

parameters use to initialise the plugin

Return:

PluginDefinition

an object representing the plugin

Public Constructors

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

Construct the plugin class. You probably want to use CursorPlugin.create instead.

Override:

Observer#constructor

Params:

NameTypeAttributeDescription
params CursorPluginParams

Plugin parameters

ws object

Wavesurfer instance

Public Members

public cursor: HTMLElement source

The cursor HTML element

public defaultParams: CursorPluginParams source

public displayTime: HTMLElement source

The html container that will display the time

public params: * source

public showTime: HTMLElement source

displays the time next to the cursor

public style: * source

public wavesurfer: * source

public wrapper: * source

Public Methods

public destroy() source

Destroy the plugin (used by the Plugin API)

public formatTime(cursorTime: number): string source

Format the timestamp for cursorTime.

Params:

NameTypeAttributeDescription
cursorTime number

Time in seconds

Return:

string

Formatted timestamp

public hideCursor() source

Hide the cursor

public init() source

Initialise the plugin (used by the Plugin API)

public outerWidth(element: DOM): number source

Get outer width of given element.

Params:

NameTypeAttributeDescription
element DOM

DOM Element

Return:

number

outer width

public showCursor() source

Show the cursor

public updateCursorPosition(xpos: number, ypos: number, flip: boolean) source

Update the cursor position

Params:

NameTypeAttributeDescription
xpos number

The x offset of the cursor in pixels

ypos number

The y offset of the cursor in pixels

flip boolean

Flag to flip duration text from right to left