Home Manual Reference Source Test
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 renderered

public

recenter(percent: number)

Recenter the viewport at a certain percent of the waveform

public

recenterOnPosition(position: number, immediate: boolean)

Recenter the viewport 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

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 renderered

Params:

NameTypeAttributeDescription
progress number

From 0 to 1

public recenter(percent: number) source

Recenter the viewport 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 viewport 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 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