specshow

specshow(S, options?): CanvasRenderingContext2D

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

Display a spectrogram/chromagram/CQT/etc on a Canvas element

Renders time-frequency data (spectrograms, chromagrams, CQT, etc.) to a Canvas with appropriate scaling, colormaps, and axis labels.

Parameters

S

Float32Array<ArrayBufferLike> | number[][]

2D spectrogram data [frequency, time]

options?

Display options

canvas

HTMLCanvasElement

Target canvas element (required)

cmap

string

Colormap name (default: ‘magma’)

drawAxes

boolean

Draw axis labels and ticks (default: true)

drawColorbar

boolean

Draw colorbar legend (default: false)

fmax

number

Maximum frequency for y-axis (default: sr/2)

fmin

number

Minimum frequency for y-axis (default: 0)

hopLength

number

Hop length in samples (default: 512)

sr

number

Sample rate in Hz (default: 22050)

vmax

number

Maximum value for colormap (default: auto)

vmin

number

Minimum value for colormap (default: auto)

xAxis

string

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

yAxis

string

Y-axis type: ‘linear’, ‘log’, ‘mel’, ‘cqt_hz’, ‘cqt_note’ (default: ‘linear’)

Returns

CanvasRenderingContext2D

Canvas 2D context with rendered spectrogram

Example

// Display mel spectrogram
const canvas = document.getElementById('spec-canvas');
const S = melspectrogram(y, sr, { nMels: 128 });
specshow(S, {
  canvas: canvas,
  sr: 22050,
  hopLength: 512,
  yAxis: 'mel',
  cmap: 'magma'
});