waveform-renderer/dist/index.d.ts

High-performance audio waveform visualization library for the web. Create customizable, interactive waveform renderers with TypeScript support and zero dependencies.

//#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 };