/** * Renders static spectrum analysis of audio buffer * * @param {HTMLCanvasElement} canvas - Target canvas element * @param {AudioBuffer} audioBuffer - Audio buffer to analyze * @param {SpectrumRenderOptions} [options={}] - Rendering options * @returns {Promise} Analysis result with frequency data * * @example * ```javascript * import { renderStaticSpectrum } from './SpectrumAnalyzer.js'; * * const result = await renderStaticSpectrum(canvas, audioBuffer, { * fftSize: 4096, * style: 'filled', * logScale: true * }); * * console.log('Peak frequency:', result.peakFrequency); * ``` */ export function renderStaticSpectrum(canvas: HTMLCanvasElement, audioBuffer: AudioBuffer, options?: SpectrumRenderOptions): Promise; /** * Creates a spectrogram visualization of audio over time * * @param {HTMLCanvasElement} canvas - Target canvas element * @param {AudioBuffer} audioBuffer - Audio buffer to analyze * @param {Object} [options={}] - Spectrogram options * @returns {Promise} Spectrogram data and metadata * * @example * ```javascript * import { createSpectrogram } from './SpectrumAnalyzer.js'; * * const spectrogram = await createSpectrogram(canvas, audioBuffer, { * fftSize: 2048, * hopLength: 512, * colormap: 'hot' * }); * ``` */ export function createSpectrogram(canvas: HTMLCanvasElement, audioBuffer: AudioBuffer, options?: any): Promise; /** * Spectrum visualization configuration * @typedef {Object} SpectrumRenderOptions * @property {string} [style='bars'] - Rendering style: 'bars', 'line', 'filled', 'spectrogram' * @property {string} [color='#00ff88'] - Primary color * @property {number} [minDb=-100] - Minimum dB level * @property {number} [maxDb=-10] - Maximum dB level * @property {number} [smoothing=0.8] - Temporal smoothing factor * @property {boolean} [logScale=true] - Use logarithmic frequency scale * @property {number} [barGap=1] - Gap between bars * @property {Object} [gradient=null] - Color gradient configuration * @property {boolean} [showGrid=false] - Show frequency grid lines */ /** * Real-time spectrum analyzer class * * @example * ```javascript * import { RealtimeSpectrumAnalyzer } from './SpectrumAnalyzer.js'; * * const analyzer = new RealtimeSpectrumAnalyzer(canvas, audioContext, { * fftSize: 2048, * style: 'bars', * color: '#00ff88' * }); * * // Connect to audio source * audioSource.connect(analyzer.getAnalyserNode()); * analyzer.start(); * ``` */ export class RealtimeSpectrumAnalyzer { constructor(canvas: any, audioContext: any, options?: {}); canvas: any; ctx: any; audioContext: any; options: { fftSize: number; style: string; color: string; minDb: number; maxDb: number; smoothing: number; logScale: boolean; barGap: number; gradient: any; showGrid: boolean; }; analyser: any; frequencyData: Uint8Array; timeData: Uint8Array; isRunning: boolean; animationId: number; frequencyLabels: { freq: number; label: string; position: number; }[]; /** * Get the analyser node for connecting to audio sources * @returns {AnalyserNode} Web Audio API AnalyserNode */ getAnalyserNode(): AnalyserNode; /** * Start real-time analysis and rendering */ start(): void; /** * Stop real-time analysis */ stop(): void; /** * Update visualization options * @param {Object} newOptions - New options to merge */ updateOptions(newOptions: any): void; /** * Main rendering loop * @private */ private render; /** * Render frequency bars * @private */ private renderBars; /** * Render frequency line * @private */ private renderLine; /** * Render filled spectrum * @private */ private renderFilled; /** * Render frequency grid * @private */ private renderGrid; /** * Create color gradient * @private */ private createGradient; /** * Get logarithmic position for frequency bin * @private */ private getLogPosition; /** * Get logarithmic position for specific frequency * @private */ private getLogFrequencyPosition; /** * Convert dB to Y position * @private */ private dbToY; /** * Generate frequency labels for grid * @private */ private generateFrequencyLabels; } export const SpectrumAnalyzer: typeof RealtimeSpectrumAnalyzer; /** * Spectrum visualization configuration */ export type SpectrumRenderOptions = { /** * - Rendering style: 'bars', 'line', 'filled', 'spectrogram' */ style?: string; /** * - Primary color */ color?: string; /** * - Minimum dB level */ minDb?: number; /** * - Maximum dB level */ maxDb?: number; /** * - Temporal smoothing factor */ smoothing?: number; /** * - Use logarithmic frequency scale */ logScale?: boolean; /** * - Gap between bars */ barGap?: number; /** * - Color gradient configuration */ gradient?: any; /** * - Show frequency grid lines */ showGrid?: boolean; };