SpectrogramViewer

Spectrogram viewer canvas controller and inspector.

Implements

• ISpectrogramViewer

Constructors

Constructor

new SpectrogramViewer(
   canvas: HTMLCanvasElement,
   viewport: IViewportController,
   source: AudioSource,
   options?: Partial<SpectrogramConfig>): SpectrogramViewer;

Parameters

Parameter	Type
canvas	HTMLCanvasElement
viewport	IViewportController
source	AudioSource
options?	Partial<SpectrogramConfig>

Returns

SpectrogramViewer

Methods

canvasToTimeFrequency()

canvasToTimeFrequency(x: number, y: number): object;

Converts canvas pixel coordinates to time (seconds) and frequency (Hz).

Parameters

Parameter	Type
x	number
y	number

Returns

object

frequency

frequency: number;

time

time: number;

Implementation of

ISpectrogramViewer.canvasToTimeFrequency

---

clearCache()

clearCache(): void;

Clears cached STFT tiles from memory.

Returns

void

Implementation of

ISpectrogramViewer.clearCache

---

destroy()

destroy(): void;

Disposes the renderer, WebGL resources, and event listeners.

Returns

void

Implementation of

ISpectrogramViewer.destroy

---

getCacheStats()

getCacheStats(): CacheStats;

Returns current STFT tile cache statistics.

Returns

CacheStats

Implementation of

ISpectrogramViewer.getCacheStats

---

getCanvas()

getCanvas(): HTMLCanvasElement;

Returns the bound HTML canvas element.

Returns

HTMLCanvasElement

Implementation of

ISpectrogramViewer.getCanvas

---

getConfig()

getConfig(): ResolvedSpectrogramConfig;

Returns the resolved spectrogram configuration options.

Returns

ResolvedSpectrogramConfig

Implementation of

ISpectrogramViewer.getConfig

---

getFrequencyBounds()

getFrequencyBounds(): object;

Returns the full available frequency bounds in Hz.

Returns

object

maxFrequency

maxFrequency: number;

minFrequency

minFrequency: number;

Implementation of

ISpectrogramViewer.getFrequencyBounds

---

getFrequencyScale()

getFrequencyScale(): FrequencyScale;

Returns the active frequency scale (linear, log, or mel).

Returns

FrequencyScale

Implementation of

ISpectrogramViewer.getFrequencyScale

---

getNyquist()

getNyquist(): number;

Returns the Nyquist frequency in Hz.

Returns

number

Implementation of

ISpectrogramViewer.getNyquist

---

getProfileStats()

getProfileStats(): SpectrogramProfileStats;

Returns

SpectrogramProfileStats

---

getRendererKind()

getRendererKind(): RendererKind;

Returns the active rendering engine (webgl2 or canvas2d).

Returns

RendererKind

Implementation of

ISpectrogramViewer.getRendererKind

---

getSource()

getSource(): AudioSource;

Returns the active audio source.

Returns

AudioSource

Implementation of

ISpectrogramViewer.getSource

---

getStatus()

getStatus(): SpectrogramStatus;

Returns the current render status.

Returns

SpectrogramStatus

Implementation of

ISpectrogramViewer.getStatus

---

getTileStates()

getTileStates(): TileStateInfo[];

Returns status information for all computation tiles.

Returns

TileStateInfo[]

Implementation of

ISpectrogramViewer.getTileStates

---

getViewport()

getViewport(): ViewportConfig;

Returns the visible time and frequency viewport.

Returns

ViewportConfig

Implementation of

ISpectrogramViewer.getViewport

---

getViewportController()

getViewportController(): IViewportController;

Returns the bound viewport controller.

Returns

IViewportController

Implementation of

ISpectrogramViewer.getViewportController

---

on()

on<Name>(name: Name, handler: (event: SpectrogramEvents[Name]) => void): () => void;

Subscribes to spectrogram events.

Type Parameters

Type Parameter
Name extends keyof SpectrogramEvents

Parameters

Parameter	Type
name	Name
handler	(event: SpectrogramEvents[Name]) => void

Returns

() => void

Implementation of

ISpectrogramViewer.on

---

queryCanvasPoint()

queryCanvasPoint(input: object): Promise<SpectrumPoint>;

Queries the spectral intensity value at canvas pixel coordinates.

Parameters

Parameter	Type	Description
input	{ channel?: number; mode?: ValueMode; x: number; y: number; }	Canvas X and Y in pixels, optional channel, and value mode.
input.channel?	number	-
input.mode?	ValueMode	-
input.x	number	-
input.y	number	-

Returns

Promise<SpectrumPoint>

Implementation of

ISpectrogramViewer.queryCanvasPoint

---

queryFrame()

queryFrame(input: object): Promise<SpectrumSlice>;

Queries spectral magnitudes for a specific STFT frame index.

Parameters

Parameter	Type	Description
input	{ channel?: number; frameIndex: number; mode?: ValueMode; }	Frame index, optional channel, and value mode.
input.channel?	number	-
input.frameIndex	number	-
input.mode?	ValueMode	-

Returns

Promise<SpectrumSlice>

Implementation of

ISpectrogramViewer.queryFrame

---

queryPoint()

queryPoint(input: object): Promise<SpectrumPoint>;

Queries the spectral intensity value at a specific time and frequency.

Parameters

Parameter	Type	Description
input	{ channel?: number; frequency: number; mode?: ValueMode; time: number; }	Time in seconds, frequency in Hz, optional channel, and value mode.
input.channel?	number	-
input.frequency	number	-
input.mode?	ValueMode	-
input.time	number	-

Returns

Promise<SpectrumPoint>

Implementation of

ISpectrogramViewer.queryPoint

---

querySpectrum()

querySpectrum(input: object): Promise<SpectrumSlice>;

Queries spectral magnitudes across all frequency bins at a specific timestamp.

Parameters

Parameter	Type	Description
input	{ channel?: number; mode?: ValueMode; time: number; }	Target time in seconds, optional channel, and value mode.
input.channel?	number	-
input.mode?	ValueMode	-
input.time	number	-

Returns

Promise<SpectrumSlice>

Implementation of

ISpectrogramViewer.querySpectrum

---

render()

render(): Promise<void>;

Renders the current spectrogram viewport asynchronously.

Returns

Promise<void>

Implementation of

ISpectrogramViewer.render

---

requestRender()

requestRender(): void;

Schedules a render on the next animation frame.

Returns

void

Implementation of

ISpectrogramViewer.requestRender

---

setConfig()

setConfig(input: Partial<SpectrogramOptions>): void;

Alias for updateConfig.

Parameters

Parameter	Type
input	Partial<SpectrogramOptions>

Returns

void

Implementation of

ISpectrogramViewer.setConfig

---

setPlayheadTime()

setPlayheadTime(time: number | undefined): void;

Parameters

Parameter	Type
time	number | undefined

Returns

void

---

setSource()

setSource(source: AudioSource): void;

Updates the audio source and invalidates the tile cache.

Parameters

Parameter	Type
source	AudioSource

Returns

void

Implementation of

ISpectrogramViewer.setSource

---

setViewport()

setViewport(vp: Partial<ViewportConfig>): void;

Parameters

Parameter	Type
vp	Partial<ViewportConfig>

Returns

void

Implementation of

ISpectrogramViewer.setViewport

---

timeFrequencyToCanvas()

timeFrequencyToCanvas(time: number, frequency: number): object;

Converts time (seconds) and frequency (Hz) to canvas pixel coordinates.

Parameters

Parameter	Type
time	number
frequency	number

Returns

object

x

x: number;

y

y: number;

Implementation of

ISpectrogramViewer.timeFrequencyToCanvas

---

updateConfig()

updateConfig(input: Partial<SpectrogramOptions>): void;

Updates configuration options and triggers a re-render.

Parameters

Parameter	Type
input	Partial<SpectrogramOptions>

Returns

void

Implementation of

ISpectrogramViewer.updateConfig