waveshow

waveshow(y, options?): CanvasRenderingContext2D

Defined in: packages/pleco-xa/src/scripts/xa-display.js:445

Visualize a waveform in the time domain on a Canvas element

Renders audio waveform with envelope display and optional decimation for efficient display of long audio files.

Parameters

y

number[] | Float32Array<ArrayBufferLike>

Audio time series

options?

Display options

alpha

number

Transparency (0-1, default: 0.7)

canvas

HTMLCanvasElement

Target canvas element (required)

color

string

Waveform color (default: ‘#1f77b4’)

drawAxes

boolean

Draw axis labels and ticks (default: true)

envelope

boolean

Show envelope for decimated display (default: true)

maxPoints

number

Maximum number of points to display (default: 11025)

offset

number

Time offset in seconds (default: 0.0)

sr

number

Sample rate in Hz (default: 22050)

xAxis

string

X-axis type: ‘time’, ‘samples’, ‘s’, ‘ms’ (default: ‘time’)

Returns

CanvasRenderingContext2D

Canvas 2D context with rendered waveform

Example

// Display waveform
const canvas = document.getElementById('wave-canvas');
const y = new Float32Array(audioBuffer.getChannelData(0));
waveshow(y, {
  canvas: canvas,
  sr: 44100,
  color: '#2ca02c',
  envelope: true
});