/** * Get a default colormap from the given data * * Determines an appropriate colormap based on data characteristics: * - Sequential colormaps for non-negative data * - Boolean colormaps for binary data * - Diverging colormaps for centered data * * @param {Float32Array|Array|Array>} data - Input data (1D or 2D array) * @param {boolean} robust - If true, use 2nd/98th percentiles for range detection * @param {string} cmapSeq - Sequential colormap name (default: 'magma') * @param {string} cmapBool - Boolean colormap name (default: 'gray_r') * @param {string} cmapDiv - Diverging colormap name (default: 'coolwarm') * @returns {Object} Colormap configuration with {type, name, colors, map function} * * @example * // Sequential data (spectrogram) * const spec = new Float32Array([0.1, 0.5, 0.9, 1.2]); * const cmap = cmap(spec); // Returns 'magma' sequential colormap * * @example * // Centered data (chromagram difference) * const diff = new Float32Array([-1.0, -0.5, 0.0, 0.5, 1.0]); * const cmap = cmap(diff, true, 'magma', 'gray_r', 'coolwarm'); // Returns 'coolwarm' diverging */ export function cmap(data: Float32Array | any[] | Array>, robust?: boolean, cmapSeq?: string, cmapBool?: string, cmapDiv?: string): any; /** * 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. * * @param {Array>|Float32Array} S - 2D spectrogram data [frequency, time] * @param {Object} options - Display options * @param {HTMLCanvasElement} options.canvas - Target canvas element (required) * @param {number} options.sr - Sample rate in Hz (default: 22050) * @param {number} options.hopLength - Hop length in samples (default: 512) * @param {string} options.xAxis - X-axis type: 'time', 'frames', 's', 'ms' (default: 'time') * @param {string} options.yAxis - Y-axis type: 'linear', 'log', 'mel', 'cqt_hz', 'cqt_note' (default: 'linear') * @param {string} options.cmap - Colormap name (default: 'magma') * @param {number} options.fmin - Minimum frequency for y-axis (default: 0) * @param {number} options.fmax - Maximum frequency for y-axis (default: sr/2) * @param {number} options.vmin - Minimum value for colormap (default: auto) * @param {number} options.vmax - Maximum value for colormap (default: auto) * @param {boolean} options.drawAxes - Draw axis labels and ticks (default: true) * @param {boolean} options.drawColorbar - Draw colorbar legend (default: false) * @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' * }); */ export function specshow(S: Array> | Float32Array, options?: { canvas: HTMLCanvasElement; sr: number; hopLength: number; xAxis: string; yAxis: string; cmap: string; fmin: number; fmax: number; vmin: number; vmax: number; drawAxes: boolean; drawColorbar: boolean; }): CanvasRenderingContext2D; /** * 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. * * @param {Float32Array|Array} y - Audio time series * @param {Object} options - Display options * @param {HTMLCanvasElement} options.canvas - Target canvas element (required) * @param {number} options.sr - Sample rate in Hz (default: 22050) * @param {number} options.maxPoints - Maximum number of points to display (default: 11025) * @param {string} options.xAxis - X-axis type: 'time', 'samples', 's', 'ms' (default: 'time') * @param {number} options.offset - Time offset in seconds (default: 0.0) * @param {string} options.color - Waveform color (default: '#1f77b4') * @param {number} options.alpha - Transparency (0-1, default: 0.7) * @param {boolean} options.envelope - Show envelope for decimated display (default: true) * @param {boolean} options.drawAxes - Draw axis labels and ticks (default: true) * @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 * }); */ export function waveshow(y: Float32Array | Array, options?: { canvas: HTMLCanvasElement; sr: number; maxPoints: number; xAxis: string; offset: number; color: string; alpha: number; envelope: boolean; drawAxes: boolean; }): CanvasRenderingContext2D; /** * Connect a canvas display to an event callback * * Creates a DisplayAdaptor and connects it to the specified event signal. * Returns the adaptor for further customization. * * @param {HTMLCanvasElement} canvas - Target canvas element * @param {string} signal - Event signal name (default: 'resize') * @param {Function} updateCallback - Custom update callback (optional) * @returns {DisplayAdaptor} Connected display adaptor instance * * @example * // Auto-resize canvas on window resize * const adaptor = connect(canvas, 'resize', (canvas, event) => { * // Redraw spectrogram on resize * specshow(spectrogramData, { canvas }); * }); */ export function connect(canvas: HTMLCanvasElement, signal?: string, updateCallback?: Function): DisplayAdaptor; /** * Disconnect a display adaptor's event callback * * @param {DisplayAdaptor} adaptor - Display adaptor to disconnect * @param {boolean} strict - If true, throw error if not connected (default: false) * @returns {void} * * @example * const adaptor = connect(canvas, 'resize'); * // ... later ... * disconnect(adaptor); */ export function disconnect(adaptor: DisplayAdaptor, strict?: boolean): void; /** * Update a canvas display according to current viewport limits * * Triggers a manual update of a display adaptor without an event. * Useful for programmatic updates. * * @param {DisplayAdaptor} adaptor - Display adaptor to update * @param {HTMLCanvasElement} canvas - Canvas element (optional, uses adaptor's canvas if not provided) * @returns {void} * * @example * const adaptor = connect(canvas, 'resize'); * // ... modify data ... * update(adaptor, canvas); // Force redraw */ export function update(adaptor: DisplayAdaptor, canvas?: HTMLCanvasElement): void; /** * Time formatter for converting frame/sample indices to time strings */ export class TimeFormatter extends AxisFormatter { /** * @param {Object} options - Formatter options * @param {number} options.lag - Lag parameter for time offset * @param {number} options.sr - Sample rate in Hz * @param {number} options.hopLength - Hop length in samples * @param {string} options.unit - Time unit: 's', 'ms', 'time' (default: 's') */ constructor({ lag, sr, hopLength, unit }?: { lag: number; sr: number; hopLength: number; unit: string; }); lag: number; sr: number; hopLength: number; unit: string; /** * Format frame index to time string * @param {number} value - Frame index * @returns {string} Formatted time (e.g., "1.23s", "1234ms") */ call(value: number): string; } /** * Note formatter for converting frequency/pitch values to musical note names */ export class NoteFormatter extends AxisFormatter { /** * @param {Object} options - Formatter options * @param {string} options.key - Key signature (default: 'C:maj') * @param {boolean} options.unicode - Use unicode sharp/flat symbols (default: true) * @param {number} options.octave - Octave offset (default: 0) */ constructor({ key, unicode, octave }?: { key: string; unicode: boolean; octave: number; }); key: string; unicode: boolean; octave: number; noteNames: string[]; /** * Format MIDI note number to note name * @param {number} value - MIDI note number * @returns {string} Note name (e.g., "C4", "A♯3") */ call(value: number): string; } /** * Svara formatter for Carnatic music notation (Indian classical) */ export class SvaraFormatter extends AxisFormatter { /** * @param {Object} options - Formatter options * @param {string} options.sa - Tonic note (default: 'C') * @param {string} options.mela - Melakarta raga number or name * @param {boolean} options.unicode - Use unicode Carnatic symbols (default: true) * @param {boolean} options.abbr - Use abbreviated notation (default: true) */ constructor({ sa, mela, unicode, abbr }?: { sa: string; mela: string; unicode: boolean; abbr: boolean; }); sa: string; mela: string; unicode: boolean; abbr: boolean; svaras: string[]; /** * Format pitch class to Carnatic svara * @param {number} value - Pitch class (0-11) * @returns {string} Svara notation */ call(value: number): string; } /** * Interval formatter for musical intervals */ export class IntervalFormatter extends AxisFormatter { /** * @param {Object} options - Formatter options * @param {boolean} options.unicode - Use unicode interval symbols (default: true) */ constructor({ unicode }?: { unicode: boolean; }); unicode: boolean; intervals: string[]; /** * Format semitone distance to interval name * @param {number} value - Semitone distance * @returns {string} Interval name (e.g., "P5", "m3") */ call(value: number): string; } /** * Tonnetz formatter for harmonic network coordinates */ export class TonnetzFormatter extends AxisFormatter { /** * @param {Object} options - Formatter options * @param {string} options.axis - Axis to format: 'x', 'y', 'both' (default: 'both') */ constructor({ axis }?: { axis: string; }); axis: string; xLabels: string[]; yLabels: string[]; /** * Format tonnetz coordinate to axis label * @param {number} value - Coordinate value * @returns {string} Axis label */ call(value: number): string; } /** * Chroma formatter for pitch class labels */ export class ChromaFormatter extends AxisFormatter { /** * @param {Object} options - Formatter options * @param {string} options.key - Key signature (default: 'C:maj') * @param {boolean} options.unicode - Use unicode sharp/flat symbols (default: true) */ constructor({ key, unicode }?: { key: string; unicode: boolean; }); key: string; unicode: boolean; noteNames: string[]; /** * Format pitch class to note name * @param {number} value - Pitch class (0-11) * @returns {string} Note name */ call(value: number): string; } /** * Chroma Svara formatter (Carnatic chroma) */ export class ChromaSvaraFormatter extends SvaraFormatter { } /** * Chroma FJS formatter (Functional Just System) */ export class ChromaFJSFormatter extends AxisFormatter { /** * @param {Object} options - Formatter options * @param {boolean} options.unicode - Use unicode FJS symbols (default: true) * @param {number} options.unison - Unison pitch class (default: 0 for C) */ constructor({ unicode, unison }?: { unicode: boolean; unison: number; }); unicode: boolean; unison: number; /** * Format pitch class to FJS notation * @param {number} value - Pitch class * @returns {string} FJS notation */ call(value: number): string; } /** * Adaptive waveform display that adjusts resolution based on zoom level */ export class AdaptiveWaveplot { /** * @param {HTMLCanvasElement} canvas - Target canvas element * @param {Float32Array} y - Audio signal * @param {Object} options - Display options */ constructor(canvas: HTMLCanvasElement, y: Float32Array, options?: any); canvas: HTMLCanvasElement; y: Float32Array; options: any; zoomLevel: number; panOffset: number; /** * Render the waveform with current zoom/pan settings */ render(): void; /** * Update zoom level * @param {number} zoom - New zoom level (1.0 = 100%) */ setZoom(zoom: number): void; /** * Update pan offset * @param {number} offset - Pan offset [0, 1] */ setPan(offset: number): void; /** * Clean up resources */ destroy(): void; } /** * Display adaptor class for connecting canvas updates to event callbacks * Mimics Matplotlib's event connection system for interactive canvas displays */ declare class DisplayAdaptor { constructor(canvas: any); canvas: HTMLCanvasElement; callbacks: Map; connected: boolean; /** * Connect the adaptor to a signal/event on the canvas * * @param {HTMLCanvasElement} canvas - Canvas element (for API compatibility) * @param {string} signal - Event type: 'resize', 'zoom', 'pan', 'xlim_changed', 'ylim_changed' * @returns {void} * * @example * const adaptor = new DisplayAdaptor(canvas); * adaptor.connect(canvas, 'resize'); */ connect(canvas: HTMLCanvasElement, signal?: string): void; /** * Disconnect the adaptor's update callback * * @param {boolean} strict - If true, throw error if not connected * @returns {void} * * @example * adaptor.disconnect(); */ disconnect(strict?: boolean): void; /** * Update the canvas display according to the current viewport/event * * This is a callback that should be overridden by subclasses or * attached as a custom handler. * * @param {HTMLCanvasElement} canvas - Canvas element * @param {Event} event - Browser event that triggered update * @returns {void} * * @example * adaptor.update = (canvas, event) => { * // Custom redraw logic * const ctx = canvas.getContext('2d'); * ctx.clearRect(0, 0, canvas.width, canvas.height); * // Redraw content... * }; */ update(canvas: HTMLCanvasElement, event: Event): void; /** * Check if adaptor is currently connected * @returns {boolean} */ isConnected(): boolean; } /** * Base formatter class for axis tick labels */ declare class AxisFormatter { /** * Format a tick value to a string label * @param {number} value - Tick value * @param {number} index - Tick index * @returns {string} Formatted label */ call(value: number, index: number): string; /** * Make formatter callable (JavaScript equivalent of Python's __call__) * @param {number} value - Tick value * @param {number} index - Tick index * @returns {string} Formatted label */ format(value: number, index: number): string; } export {};