import MultiCanvas from 'wavesurfer.js/src/drawer.multicanvas.js'

public class | source

MultiCanvas

Extends:

Observer → Drawer → MultiCanvas

MultiCanvas renderer for wavesurfer. Is currently the default and sole builtin renderer.

A MultiCanvas consists of one or more CanvasEntry instances, depending on the zoom level.

Constructor Summary

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

Member Summary

Public Members
public	EntryClass: function Class used to generate entries.
public	barRadius: number The radius of the wave bars.
public	canvasContextAttributes: object Canvas 2d context attributes.
public	canvases: Array List of `CanvasEntry` instances.
public	halfPixel: number
public	hasProgressCanvas: boolean Whether or not the progress wave is rendered.
public	maxCanvasElementWidth: number
public	maxCanvasWidth: number
public	overlap: number Overlap added between entries to prevent vertical white stripes between `canvas` elements.
public	progressWave: HTMLElement
public	vertical: boolean Whether to render the waveform vertically.

Method Summary

Public Methods
public	addCanvas() Add a canvas to the canvas list
public	applyCanvasTransforms(entry: CanvasEntry, vertical: boolean) Set the canvas transforms for a certain entry (wave and progress)
public	clearWave() Clear the whole multi-canvas
public	createElements() Create the canvas elements and style them
public	drawBars(peaks: number[] \| Number<Array[]>, channelIndex: number, start: number, end: number): void Draw a waveform with bars
public	drawLine(peaks: number[], absmax: number, halfH: number, offsetY: number, start: number, end: number, channelIndex: channelIndex) Tell the canvas entries to render their portion of the waveform
public	drawWave(peaks: number[] \| Number<Array[]>, channelIndex: number, start: number, end: number): void Draw a waveform
public	fillRect(x: number, y: number, width: number, height: number, radius: number, channelIndex: channelIndex) Draw a rectangle on the multi-canvas
public	getImage(format: string, quality: number, type: string): string \| string[] \| Promise Return image data of the multi-canvas
public	hideChannel(channelIndex: number): bool Returns whether to hide the channel from being drawn based on params.
public	init() Initialize the drawer
public	prepareDraw(peaks: number[] \| Number<Array[]>, channelIndex: number, start: number, end: number, fn: function, drawIndex: number, normalizedMax: number): void Performs preparation tasks and calculations which are shared by `drawBars` and `drawWave`
public	removeCanvas() Pop single canvas from the list
public	setFillStyles(entry: CanvasEntry, waveColor: string, progressColor: string) Set the fill styles for a certain entry (wave and progress)
public	updateCursor() Update cursor style
public	updateDimensions(entry: CanvasEntry, width: number, height: number) Update the dimensions of a canvas element
public	updateProgress(position: number) Render the new progress
public	updateSize() Adjust to the updated size by adding or removing 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.

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

Public Constructors

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

Instantiate Observer

Override:

Drawer#constructor

Params:

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

Public Members

public EntryClass: function source

Class used to generate entries.

public barRadius: number source

The radius of the wave bars. Makes bars rounded

public canvasContextAttributes: object source

Canvas 2d context attributes.

public canvases: Array source

List of CanvasEntry instances.

public halfPixel: number source

public hasProgressCanvas: boolean source

Whether or not the progress wave is rendered. If the waveColor and progressColor are the same color it is not.

public maxCanvasElementWidth: number source

public maxCanvasWidth: number source

public overlap: number source

Overlap added between entries to prevent vertical white stripes between canvas elements.

public progressWave: HTMLElement source

public vertical: boolean source

Whether to render the waveform vertically. Defaults to false.

Public Methods

public addCanvas() source

Add a canvas to the canvas list

public applyCanvasTransforms(entry: CanvasEntry, vertical: boolean) source

Set the canvas transforms for a certain entry (wave and progress)

Params:

Name	Type	Attribute	Description
entry	CanvasEntry		Target entry
vertical	boolean		Whether to render the waveform vertically

public clearWave() source

Clear the whole multi-canvas

Override:

Drawer#clearWave

public createElements() source

Create the canvas elements and style them

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

Draw a waveform with bars

Override:

Drawer#drawBars

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. Must be an integer.
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

Return:

void

public drawLine(peaks: number[], absmax: number, halfH: number, offsetY: number, start: number, end: number, channelIndex: channelIndex) source

Tell the canvas entries to render their portion of the waveform

Params:

Name	Type	Attribute	Description
peaks	number[]		Peaks data
absmax	number		Maximum peak value (absolute)
halfH	number		Half the height of the waveform
offsetY	number		Offset to the top
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
channelIndex	channelIndex		The channel index of the line drawn

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

Draw a waveform

Override:

Drawer#drawWave

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 (If this isn't set only a flat line is rendered)
end	number		The x-offset of the end of the area that should be rendered

Return:

void

public fillRect(x: number, y: number, width: number, height: number, radius: number, channelIndex: channelIndex) source

Draw a rectangle on the multi-canvas

Params:

Name	Type	Attribute	Description
x	number		X-position of the rectangle
y	number		Y-position of the rectangle
width	number		Width of the rectangle
height	number		Height of the rectangle
radius	number		Radius of the rectangle
channelIndex	channelIndex		The channel index of the bar drawn

public getImage(format: string, quality: number, type: string): string | string[] | Promise source

Return image data of the multi-canvas

When using a type of 'blob', this will return a Promise.

Params:

Name	Type	Attribute	Description
format	string	default: 'image/png'	An optional value of a format type.
quality	number	default: 0.92	An optional value between 0 and 1.
type	string	default: 'dataURL'	Either 'dataURL' or 'blob'.

Return:

string | string[] | Promise

When using the default 'dataURL' type this returns a single data URL or an array of data URLs, one for each canvas. When using the 'blob' type this returns a Promise that resolves with an array of Blob instances, one for each canvas.

public hideChannel(channelIndex: number): bool source

Returns whether to hide the channel from being drawn based on params.

Params:

Name	Type	Attribute	Description
channelIndex	number		The index of the current channel.

Return:

bool	True to hide the channel, false to draw.

public init() source

Initialize the drawer

public prepareDraw(peaks: number[] | Number<Array[]>, channelIndex: number, start: number, end: number, fn: function, drawIndex: number, normalizedMax: number): void source

Performs preparation tasks and calculations which are shared by drawBars and drawWave

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. If this isn't set only a flat line is rendered
end	number		The x-offset of the end of the area that should be rendered
fn	function		The render function to call, e.g. `drawWave`
drawIndex	number		The index of the current channel after filtering.
normalizedMax	number		Maximum modulation value across channels for use with relativeNormalization. Ignored when undefined

Return:

void

public removeCanvas() source

Pop single canvas from the list

public setFillStyles(entry: CanvasEntry, waveColor: string, progressColor: string) source

Set the fill styles for a certain entry (wave and progress)

Params:

Name	Type	Attribute	Description
entry	CanvasEntry		Target entry
waveColor	string		Wave color to draw this entry
progressColor	string		Progress color to draw this entry

public updateCursor() source

Update cursor style

Override:

Drawer#updateCursor

public updateDimensions(entry: CanvasEntry, width: number, height: number) source

Update the dimensions of a canvas element

Params:

Name	Type	Attribute	Description
entry	CanvasEntry		Target entry
width	number		The new width of the element
height	number		The new height of the element

public updateProgress(position: number) source

Render the new progress

Override:

Drawer#updateProgress

Params:

Name	Type	Attribute	Description
position	number		X-offset of progress position in pixels

public updateSize() source

Adjust to the updated size by adding or removing canvases

Override:

Drawer#updateSize