Home Manual Reference Source Test
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 built in renderer.

Constructor Summary

Public Constructor
public

Member Summary

Public Members
public

Whether or not the progress wave is renderered.

Method Summary

Public Methods
public

Clear the whole waveform

public

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

Draw a waveform with bars

public

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

Draw a waveform

public

fillRect(x: number, y: number, width: number, height: number)

Draw a rectangle on the waveform

public

getImage(type: string, quality: number): string | string[]

Return image data of the waveform

public

init()

Initialise the drawer

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

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.

From class Drawer
public

The height of the renderer

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[][], 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

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 hasProgressCanvas: boolean source

Whether or not the progress wave is renderered. If the waveColor and progressColor are the same colour it is not.

Public Methods

public clearWave() source

Clear the whole waveform

Override:

Drawer#clearWave

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

Draw a waveform with bars

Override:

Drawer#drawBars

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

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

Draw a waveform

Override:

Drawer#drawWave

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 fillRect(x: number, y: number, width: number, height: number) source

Draw a rectangle on the waveform

Params:

NameTypeAttributeDescription
x number
y number
width number
height number

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

Return image data of the waveform

Params:

NameTypeAttributeDescription
type string
  • default: 'image/png'

An optional value of a format type.

quality number
  • default: 0.92

An optional value between 0 and 1.

Return:

string | string[]

images A data URL or an array of data URLs

public init() source

Initialise the drawer

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