import {Wavesurfer} from 'videojs-wavesurfer/src/js/videojs.wavesurfer.js'

public class | source

Wavesurfer

Extends:

Plugin → Wavesurfer

Draw a waveform for audio and video files in a video.js player.

Constructor Summary

Public Constructor
public	constructor(player: videojs.Player \| Object, options: Object) The constructor function for the class.

Member Summary

Public Members
public	backend: *
public	debug: *
public	displayMilliseconds: *
public	liveMode: boolean
public	originalHeight: *
public	originalWidth: *
public	surfer: *
public	surferProgress: *
public	surferReady: *
public	surferSeek: *
public	textTracksEnabled: *
public	waveFinished: boolean
public	waveReady: boolean

Private Members
private	_formatTime: *

Method Summary

Public Methods
public	destroy() Remove the player and waveform.
public	exportImage(format: string, quality: number, type: string): string \| string[] \| Promise Save waveform image as data URI.
public	getCurrentTime(): float Get the current time (in seconds) of the stream during playback.
public	getDuration(): float Get the duration of the stream in seconds.
public	isDestroyed(): boolean Indicates whether the plugin is destroyed or not.
public	load(url: string \| blob \| file, peaks: string \| number[]) Start loading waveform data.
public	loadPeaks(url: string \| blob \| file, peaks: string \| number[]) Start loading waveform data.
public	pause() Pauses playback or microphone visualization.
public	play() Start/resume playback or microphone.
public	setAudioOutput(deviceId: string) Change the audio output device.
public	setFormatTime(customImplementation: function) Replaces the default `formatTime` implementation with a custom implementation.
public	setVolume(volume: number) Set the volume level.

Private Methods
private	dispose()
private	initialize() Player UI is ready: customize controls.
private	log(args: Array, logType: string) Log message to console (if the debug option is enabled).
private	onPlayToggle() Fired when the play toggle is clicked.
private	onScreenChange() Fired when the video.js player switches in or out of fullscreen mode.
private	onVolumeChange() Fired when the volume in the video.js player changes.
private	onWaveError(error: string) Waveform error.
private	onWaveFinish() Fires when audio playback completed.
private	onWaveProgress(time: number) Fires continuously during audio playback.
private	onWaveReady() Audio is loaded, decoded and the waveform is drawn.
private	onWaveSeek() Fires during seeking of the waveform.
private	parseOptions(surferOpts: Object): Object Initializes the waveform options.
private	redrawWaveform(newWidth: number, newHeight: number) Redraw waveform.
private	setCurrentTime(currentTime: number, duration: number) Updates the player's element displaying the current time.
private	setDuration(duration: number) Updates the player's element displaying the duration time.
private	setupPlaybackEvents(enable: boolean) Starts or stops listening to events related to audio-playback.

Public Constructors

public constructor(player: videojs.Player | Object, options: Object) source

The constructor function for the class.

Params:

Name	Type	Attribute	Description
player	videojs.Player \| Object		video.js Player object.
options	Object		Player options.

Public Members

public backend: * source

public debug: * source

public displayMilliseconds: * source

public liveMode: boolean source

public originalHeight: * source

public originalWidth: * source

public surfer: * source

public surferProgress: * source

public surferReady: * source

public surferSeek: * source

public textTracksEnabled: * source

public waveFinished: boolean source

public waveReady: boolean source

Private Members

private _formatTime: * source

Public Methods

public destroy() source

Remove the player and waveform.

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

Save waveform image as data URI.

The default format is 'image/png'. Other supported types are 'image/jpeg' and 'image/webp'.

Params:

Name	Type	Attribute	Description
format	string	default: 'image/png'	A string indicating the image format. The default format type is `'image/png'`.
quality	number	default: 1	A number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as 'image/jpeg'` and `'image/webp'`.
type	string		Image data type to return. Either 'blob' (default) or 'dataURL'.

Return:

string | string[] | Promise

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

public getCurrentTime(): float source

Get the current time (in seconds) of the stream during playback.

Returns 0 if no stream is available (yet).

Return:

float

Current time of the stream.

public getDuration(): float source

Get the duration of the stream in seconds.

Returns 0 if no stream is available (yet).

Return:

float

Duration of the stream.

public isDestroyed(): boolean source

Indicates whether the plugin is destroyed or not.

Return:

boolean

Plugin destroyed or not.

public load(url: string | blob | file, peaks: string | number[]) source

Start loading waveform data.

Params:

Name	Type	Attribute	Description
url	string \| blob \| file		Either the URL of the audio file, a Blob or a File object.
peaks	string \| number[]		Either the URL of peaks data for the audio file, or an array with peaks data.

public loadPeaks(url: string | blob | file, peaks: string | number[]) source

Start loading waveform data.

Params:

Name	Type	Attribute	Description
url	string \| blob \| file		Either the URL of the audio file, a Blob or a File object.
peaks	string \| number[]		Either the URL of peaks data for the audio file, or an array with peaks data.

public pause() source

Pauses playback or microphone visualization.

public play() source

Start/resume playback or microphone.

public setAudioOutput(deviceId: string) source

Change the audio output device.

Params:

Name	Type	Attribute	Description
deviceId	string		Id of audio output device.

public setFormatTime(customImplementation: function) source

Replaces the default formatTime implementation with a custom implementation.

Params:

Name	Type	Attribute	Description
customImplementation	function		A function which will be used in place of the default `formatTime` implementation. Will receive the current time in seconds and the guide (in seconds) as arguments.

public setVolume(volume: number) source

Set the volume level.

Params:

Name	Type	Attribute	Description
volume	number		The new volume level.

Private Methods

private dispose() source

private initialize() source

Player UI is ready: customize controls.

private log(args: Array, logType: string) source

Log message to console (if the debug option is enabled).

Params:

Name	Type	Attribute	Description
args	Array		The arguments to be passed to the matching console method.
logType	string		The name of the console method to use.

private onPlayToggle() source

Fired when the play toggle is clicked.

private onScreenChange() source

Fired when the video.js player switches in or out of fullscreen mode.

private onVolumeChange() source

Fired when the volume in the video.js player changes.

private onWaveError(error: string) source

Waveform error.

Params:

Name	Type	Attribute	Description
error	string		The wavesurfer error.

private onWaveFinish() source

Fires when audio playback completed.

private onWaveProgress(time: number) source

Fires continuously during audio playback.

Params:

Name	Type	Attribute	Description
time	number		Current time/location of the playhead.

private onWaveReady() source

Audio is loaded, decoded and the waveform is drawn.

private onWaveSeek() source

Fires during seeking of the waveform.

private parseOptions(surferOpts: Object): Object source

Initializes the waveform options.

Params:

Name	Type	Attribute	Description
surferOpts	Object		Plugin options.

Return:

Object

Updated surferOpts object.

private redrawWaveform(newWidth: number, newHeight: number) source

Redraw waveform.

Params:

Name	Type	Attribute	Description
newWidth	number	optional	New width for the waveform.
newHeight	number	optional	New height for the waveform.

private setCurrentTime(currentTime: number, duration: number) source

Updates the player's element displaying the current time.

Params:

Name	Type	Attribute	Description
currentTime	number	optional	Current position of the playhead (in seconds).
duration	number	optional	Duration of the waveform (in seconds).

private setDuration(duration: number) source

Updates the player's element displaying the duration time.

Params:

Name	Type	Attribute	Description
duration	number	optional	Duration of the waveform (in seconds).

private setupPlaybackEvents(enable: boolean) source

Starts or stops listening to events related to audio-playback.

Params:

Name	Type	Attribute	Description
enable	boolean		Start or stop listening to playback related events.