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

MultiCanvas

Extends:

ObserverDrawer → 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

Member Summary

Public Members
public

Class used to generate entries.

public

The radius of the wave bars.

public

Canvas 2d context attributes.

public

List of CanvasEntry instances.

public
public

Whether or not the progress wave is rendered.

public
public
public

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

public
public

Whether to render the waveform vertically.

Method Summary

Public Methods
public

Add a canvas to the canvas list

public

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

public

Clear the whole multi-canvas

public

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

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

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

Adjust to the updated size by adding or removing canvases

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.

From class Drawer
public
public

The height of the renderer

public
public
public

The width of the renderer

public

The <wave> element which is added to the container

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

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

Public Constructors

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

Instantiate Observer

Override:

Drawer#constructor

Params:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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