waveform-renderer
Version:
High-performance audio waveform visualization library for the web. Create customizable, interactive waveform renderers with TypeScript support and zero dependencies.
163 lines • 4.95 kB
TypeScript
//#region src/types/types.d.ts
type RenderMode = "bottom" | "center" | "top";
interface ProgressLineOptions {
color?: string;
heightPercent?: number;
position?: RenderMode;
style?: "dashed" | "dotted" | "solid";
width?: number;
}
interface WaveformOptions {
amplitude?: number;
backgroundColor?: string;
barWidth?: number;
borderColor?: string;
borderRadius?: number;
borderWidth?: number;
color?: string;
debug?: boolean;
gap?: number;
minPixelRatio?: number;
position?: RenderMode;
progress?: number;
progressLine?: null | ProgressLineOptions;
smoothing?: boolean;
}
interface WaveformEvents {
destroy: void;
error: Error;
progressChange: number;
ready: void;
renderComplete: void;
renderStart: void;
resize: {
height: number;
width: number;
};
seek: number;
}
interface CachedBarData {
x: number;
y: number;
width: number;
height: number;
peakValue: number;
}
interface RenderCache {
canvasWidth: number;
canvasHeight: number;
totalBars: number;
step: number;
singleUnitWidth: number;
bars: CachedBarData[];
staticWaveformPath?: Path2D;
lastOptionsHash: string;
lastPeaksHash: string;
}
interface DirtyFlags {
peaks: boolean;
options: boolean;
size: boolean;
progress: boolean;
}
interface DebugInfo {
performance: {
lastRenderTime: number;
averageRenderTime: number;
totalRenders: number;
fps: number;
cacheBuilds: number;
lastCacheBuildTime: number;
};
state: {
canvasSize: {
width: number;
height: number;
};
peaksCount: number;
barsRendered: number;
cacheValid: boolean;
dirtyFlags: DirtyFlags;
};
events: {
totalSeeks: number;
totalResizes: number;
totalErrors: number;
};
}
interface CustomRenderer {
render(ctx: CanvasRenderingContext2D, cache: RenderCache, options: Required<WaveformOptions>, staticPath?: Path2D): boolean;
}
interface RenderHook {
beforeRender?: (ctx: CanvasRenderingContext2D, cache: RenderCache, options: Required<WaveformOptions>) => void;
afterBackground?: (ctx: CanvasRenderingContext2D, cache: RenderCache, options: Required<WaveformOptions>) => void;
afterProgress?: (ctx: CanvasRenderingContext2D, cache: RenderCache, options: Required<WaveformOptions>, progress: number) => void;
afterComplete?: (ctx: CanvasRenderingContext2D, cache: RenderCache, options: Required<WaveformOptions>) => void;
}
//#endregion
//#region src/events/EventEmitter.d.ts
declare class EventEmitter<Events extends Record<string, any>> {
private events;
off<E extends keyof Events>(event: E, callback: (args: Events[E]) => void): void;
on<E extends keyof Events>(event: E, callback: (args: Events[E]) => void): void;
once<E extends keyof Events>(event: E, callback: (args: Events[E]) => void): void;
removeAllListeners<E extends keyof Events>(event?: E): void;
protected emit<E extends keyof Events>(event: E, args: Events[E]): void;
protected hasListeners<E extends keyof Events>(event: E): boolean;
}
//#endregion
//#region src/renderer.d.ts
declare class WaveformRenderer extends EventEmitter<WaveformEvents> {
private readonly canvas;
private readonly ctx;
private readonly devicePixelRatio;
private readonly cacheManager;
private readonly debugSystem;
private readonly eventHandler;
private readonly renderingEngine;
private isDestroyed;
private options;
private peaks;
private dirtyFlags;
private frameRequest?;
private lastRenderTime;
private readonly minRenderInterval;
constructor(canvas: HTMLCanvasElement, peaks: number[], options?: Partial<WaveformOptions>);
destroy(): void;
setOptions(options: Partial<WaveformOptions>): void;
setPeaks(peaks: number[]): void;
setProgress(progress: number): void;
setProgressLineOptions(options: null | Partial<ProgressLineOptions>): void;
setDebug(enabled: boolean): void;
getDebugInfo(): DebugInfo;
resetDebugCounters(): void;
setCustomRenderer(renderer?: CustomRenderer): void;
setRenderHooks(hooks: RenderHook): void;
clearRenderHooks(): void;
private validateInputs;
private getCanvasContext;
private mergeOptions;
private updateDirtyFlags;
private setupCanvas;
private setupContext;
private scheduleRender;
private cancelPendingRender;
private render;
private handleSeek;
private handleResize;
private handleError;
}
//#endregion
//#region src/utils/peaks.d.ts
/**
* Calculates peaks from an AudioBuffer
*/
declare function getPeaksFromAudioBuffer(audioBuffer: AudioBuffer, numberOfPeaks: number): number[];
/**
* Normalizes an array of peak values to a range of -1 to 1
*/
//#endregion
//#region src/constants/default.d.ts
declare const DEFAULT_OPTIONS: Required<WaveformOptions>;
//#endregion
export { CachedBarData, CustomRenderer, DEFAULT_OPTIONS, DebugInfo, ProgressLineOptions, RenderCache, RenderHook, RenderMode, WaveformEvents, WaveformOptions, WaveformRenderer, getPeaksFromAudioBuffer };