import Drawer from 'wavesurfer.js/src/drawer.js'

public class | source

Drawer

Extends:

Observer → Drawer

Direct Subclass:

MultiCanvas

Parent class for renderers

Test:

Constructor Summary

Public Constructor
public	constructor(container: HTMLElement, params: WavesurferParams)

Member Summary

Public Members
public	container: *
public	height: number The height of the renderer
public	lastPos: number
public	params: WavesurferParams
public	width: number The width of the renderer
public	wrapper: HTMLElement The `<wave>` element which is added to the container

Method Summary

Public Methods
public abstract	clearWave() Clear the waveform
public	createWrapper() Create the wrapper `<wave>` element, style it and set up the events for interaction
public	destroy() This is called when wavesurfer is destroyed
public abstract	drawBars(peaks: number[] \| Number<Array[]>, channelIndex: number, start: number, end: number) Draw a waveform with bars
public	drawPeaks(peaks: number[] \| Number<Array[]>, length: number, start: number, end: number) Draw peaks on the canvas
public abstract	drawWave(peaks: number[] \| Number<Array[]>, channelIndex: number, start: number, end: number) Draw a waveform
public	getProgressPixels(wrapperBbox: , clientX: ): *
public	getScrollX(): number Get the current scroll position in pixels
public	getWidth(): number 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	resetScroll() Scroll to the beginning
public	setHeight(height: number): boolean Set the height of the container
public	setWidth(width: number): boolean Set the width of the container
public	setupWrapperEvents()
public	style(el: HTMLElement, styles: Object): HTMLElement Alias of `util.style`
public abstract	updateCursor() Called after cursor related params have changed.
public abstract	updateProgress(position: number) Render the new progress
public abstract	updateSize() Called when the size of the container changes so the renderer can adjust

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.

Public Constructors

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

Instantiate Observer

Override:

Observer#constructor

Params:

Name	Type	Attribute	Description
container	HTMLElement		The container node of the wavesurfer instance
params	WavesurferParams		The wavesurfer initialisation options

Public Members

public container: * source

public height: number source

The height of the renderer

public lastPos: number source

public params: WavesurferParams source

public width: number source

The width of the renderer

public wrapper: HTMLElement source

The <wave> element which is added to the container

Test:

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<Array[]>, channelIndex: number, start: number, end: number) source

Draw a waveform with bars

Params:

Name	Type	Attribute	Description
peaks	number[] \| Number<Array[]>		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<Array[]>, length: number, start: number, end: number) source

Draw peaks on the canvas

Params:

Name	Type	Attribute	Description
peaks	number[] \| Number<Array[]>		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<Array[]>, channelIndex: number, start: number, end: number) source

Draw a waveform

Params:

Name	Type	Attribute	Description
peaks	number[] \| Number<Array[]>		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 getProgressPixels(wrapperBbox: , clientX: ): * source

Params:

Name	Type	Attribute	Description
wrapperBbox	*
clientX	*

Return:

public getScrollX(): number source

Get the current scroll position in pixels

Return:

number

Horizontal scroll position in pixels

public getWidth(): number source

Get the width of the container

Return:

number

The width of the container

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

Handle click event

Params:

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

Name	Type	Attribute	Description
progress	number		From 0 to 1

public recenter(percent: number) source

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

Params:

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

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

Name	Type	Attribute	Description
height	number		The new height of the container.

Return:

boolean

Whether the height of the container was updated or not

public setWidth(width: number): boolean source

Set the width of the container

Params:

Name	Type	Attribute	Description
width	number		The new width of the container

Return:

boolean

Whether the width of the container was updated or not

public setupWrapperEvents() source

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

Alias of util.style

Params:

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

Test:

util: style applies a map of styles to an element

public abstract updateCursor() source

Called after cursor related params have changed.

public abstract updateProgress(position: number) source

Render the new progress

Params:

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

Drawer

Extends:

Direct Subclass:

Test:

Constructor Summary

Member Summary

Method Summary

Inherited Summary

Public Constructors

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

Override:

Params:

Public Members

public container: * source

public height: number source

public lastPos: number source

public params: WavesurferParams source

public width: number source

public wrapper: HTMLElement source

Test:

Public Methods

public abstract clearWave() source

public createWrapper() source

public destroy() source

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

Params:

public drawPeaks(peaks: number[] | Number<Array[]>, length: number, start: number, end: number) source

Params:

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

Params:

public getProgressPixels(wrapperBbox: *, clientX: *): * source

Params:

Return:

public getScrollX(): number source

Return:

public getWidth(): number source

Return:

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

Params:

Return:

public progress(progress: number) source

Params:

public recenter(percent: number) source

Params:

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

Params:

public resetScroll() source

public setHeight(height: number): boolean source

Params:

Return:

public setWidth(width: number): boolean source

Params:

Return:

public setupWrapperEvents() source

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

Params:

Return:

Test:

public abstract updateCursor() source

public abstract updateProgress(position: number) source

Params:

public abstract updateSize() source

public getProgressPixels(wrapperBbox: , clientX: ): * source