Home Reference Source
import Drawer from 'wavesurfer.js/src/drawer.js'
public class | source

Drawer

Extends:

Observer → Drawer

Direct Subclass:

MultiCanvas

Parent class for renderers

Constructor Summary

Public Constructor
public

Member Summary

Public Members
public

The height of the renderer

public

The width of the renderer

public

The <wave> element which is added to the container

Method Summary

Public Methods
public abstract

Clear the waveform

public

Create the wrapper <wave> element, style it and set up the events for interaction

public

This is called when wavesurfer is destroyed

public abstract

drawBars(peaks: number[] | number[][], channelIndex: number, start: number, end: number)

Draw a waveform with bars

public

drawPeaks(peaks: number[] | number[][], length: number, start: number, end: number)

Draw peaks on the canvas

public abstract

drawWave(peaks: number[] | number[][], channelIndex: number, start: number, end: number)

Draw a waveform

public

Get the current scroll position in pixels

public

Get the width of the container

public

handleEvent(e: Event, noPrevent: boolean): number

Handle click event

public

progress(progress: number)

Called by wavesurfer when progress should be rendered

public

recenter(percent: number)

Recenter the view-port at a certain percent of the waveform

public

recenterOnPosition(position: number, immediate: boolean)

Recenter the view-port on a position, either scroll there immediately or in steps of 5 pixels

public

Scroll to the beginning

public

Set the height of the container

public

Set the width of the container

public

Alias of util.style

public abstract

Called after cursor related params have changed.

public abstract

updateProgress(position: number)

Render the new progress

public abstract

Called when the size of the container changes so the renderer can adjust

Inherited Summary

From class Observer
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

un(event: string, fn: function)

Remove an event handler.

public

unAll()

Remove all event handlers.

Public Constructors

public constructor(container: HTMLElement, params: WavesurferParams) source

Instantiate Observer

Override:

Observer#constructor

Params:

NameTypeAttributeDescription
container HTMLElement

The container node of the wavesurfer instance

params WavesurferParams

The wavesurfer initialisation options

Public Members

public height: number source

The height of the renderer

public width: number source

The width of the renderer

public wrapper: HTMLElement source

The <wave> element which is added to the container

Public Methods

public abstract clearWave() source

Clear the waveform

public createWrapper() source

Create the wrapper <wave> element, style it and set up the events for interaction

public destroy() source

This is called when wavesurfer is destroyed

public abstract drawBars(peaks: number[] | number[][], channelIndex: number, start: number, end: number) source

Draw a waveform with bars

Params:

NameTypeAttributeDescription
peaks number[] | number[][]

Can also be an array of arrays for split channel rendering

channelIndex number

The index of the current channel. Normally should be 0

start number

The x-offset of the beginning of the area that should be rendered

end number

The x-offset of the end of the area that should be rendered

public drawPeaks(peaks: number[] | number[][], length: number, start: number, end: number) source

Draw peaks on the canvas

Params:

NameTypeAttributeDescription
peaks number[] | number[][]

Can also be an array of arrays for split channel rendering

length number

The width of the area that should be drawn

start number

The x-offset of the beginning of the area that should be rendered

end number

The x-offset of the end of the area that should be rendered

public abstract drawWave(peaks: number[] | number[][], channelIndex: number, start: number, end: number) source

Draw a waveform

Params:

NameTypeAttributeDescription
peaks number[] | number[][]

Can also be an array of arrays for split channel rendering

channelIndex number

The index of the current channel. Normally should be 0

start number

The x-offset of the beginning of the area that should be rendered

end number

The x-offset of the end of the area that should be rendered

public getScrollX(): number source

Get the current scroll position in pixels

Return:

number

public getWidth(): number source

Get the width of the container

Return:

number

public handleEvent(e: Event, noPrevent: boolean): number source

Handle click event

Params:

NameTypeAttributeDescription
e Event

Click event

noPrevent boolean
  • nullable: true

Set to true to not call e.preventDefault()

Return:

number

Playback position from 0 to 1

public progress(progress: number) source

Called by wavesurfer when progress should be rendered

Params:

NameTypeAttributeDescription
progress number

From 0 to 1

public recenter(percent: number) source

Recenter the view-port at a certain percent of the waveform

Params:

NameTypeAttributeDescription
percent number

Value from 0 to 1 on the waveform

public recenterOnPosition(position: number, immediate: boolean) source

Recenter the view-port on a position, either scroll there immediately or in steps of 5 pixels

Params:

NameTypeAttributeDescription
position number

X-offset in pixels

immediate boolean

Set to true to immediately scroll somewhere

public resetScroll() source

Scroll to the beginning

public setHeight(height: number): boolean source

Set the height of the container

Params:

NameTypeAttributeDescription
height number

Return:

boolean

public setWidth(width: number): boolean source

Set the width of the container

Params:

NameTypeAttributeDescription
width number

Return:

boolean

public style(el: HTMLElement, styles: Object): HTMLElement source

Alias of util.style

Params:

NameTypeAttributeDescription
el HTMLElement

The element that the styles will be applied to

styles Object

The map of propName: attribute, both are used as-is

Return:

HTMLElement

el

public abstract updateCursor() source

Called after cursor related params have changed.

public abstract updateProgress(position: number) source

Render the new progress

Params:

NameTypeAttributeDescription
position number

X-Offset of progress position in pixels

public abstract updateSize() source

Called when the size of the container changes so the renderer can adjust