UNPKG

@audiowave/react

Version:

React audio visualization component

236 lines 8.16 kB
import { default as React } from 'react'; import { AudioSource as StandardAudioSource } from './types/AudioSource'; /** * AudioSource type - now only supports the standard interface * All audio sources must implement getAudioData() and isActive() methods */ export type AudioSource = StandardAudioSource; /** * Basic audio source configuration - only affects rendering */ export interface AudioSourceConfig { /** FFT size for frequency analysis - affects audioData array length (default: 2048) */ fftSize?: number; } /** * Comprehensive props interface for AudioWave component * Compatible with React Voice Visualizer API */ export interface AudioWaveProps { /** Audio source - supports MediaStream, HTMLMediaElement, or AudioNode */ source?: AudioSource; /** Component width - supports CSS units and numbers */ width?: string | number; /** Component height in pixels */ height?: number; /** Background color of the visualization area */ backgroundColor?: string; /** Primary color for active audio bars (React Voice Visualizer: mainBarColor) */ barColor?: string; /** Secondary color for inactive/past bars */ secondaryBarColor?: string; /** Width of each audio bar in pixels */ barWidth?: number; /** Gap between bars in pixels */ gap?: number; /** Border radius for rounded bars */ rounded?: number; /** Show border around the visualization area */ showBorder?: boolean; /** Border color */ borderColor?: string; /** Border width in pixels */ borderWidth?: number; /** Border radius for rounded corners */ borderRadius?: number; /** Animation speed (1-6, higher number is slower) */ speed?: number; /** Enable smooth bar transitions */ animateCurrentPick?: boolean; /** Fill entire parent container */ fullscreen?: boolean; /** Whether to show visualization only when active */ onlyActive?: boolean; /** * Visualization gain multiplier for waveform amplitude * @default 1.0 (no gain) * @range 0.1 - 10.0 */ gain?: number; /** * Amplitude calculation mode for better perceptual loudness * - 'peak': Use peak amplitude (default, current behavior) * - 'rms': Use RMS for perceptual loudness * - 'adaptive': Use adaptive scaling to handle dynamic range issues * @default 'peak' */ amplitudeMode?: 'peak' | 'rms' | 'adaptive'; /** Whether the visualization is paused (keeps waveform frozen) */ isPaused?: boolean; /** Callback when visualization state changes */ onStateChange?: (state: AudioWaveState) => void; /** Custom rendering function for advanced visualizations */ customRenderer?: (context: RenderContext) => void; /** Custom placeholder content when no audio source is provided */ placeholder?: React.ReactNode; /** Whether to show background and border in placeholder state */ showPlaceholderBackground?: boolean; /** CSS class for the main container */ className?: string; /** CSS class for the canvas element */ canvasClassName?: string; /** Called when rendering starts */ onRenderStart?: () => void; /** Called when rendering stops */ onRenderStop?: () => void; /** Called on render errors */ onError?: (error: Error) => void; } /** * AudioWave visualization states */ export type AudioWaveState = 'idle' | 'visualizing' | 'paused'; /** * AudioWave component control interface for imperative control * Following React media component best practices */ export interface AudioWaveController { /** Pause visualization (freeze waveform display) */ pause: () => void; /** Resume visualization from paused state */ resume: () => void; /** Clear all waveform data and reset display */ clear: () => void; /** Get current paused state */ isPaused: () => boolean; /** Get current state */ getState: () => AudioWaveState; /** Get current audio data */ getAudioData: () => Uint8Array; } /** * Context object provided to custom renderer functions */ export interface RenderContext { /** Canvas element for drawing */ canvas: HTMLCanvasElement; /** 2D rendering context */ context: CanvasRenderingContext2D; /** Current audio data frame (frequency domain) */ audioData: Uint8Array; /** Whether audio source is active */ isActive: boolean; /** Current timestamp for animations */ timestamp: number; /** Canvas dimensions */ dimensions: { width: number; height: number; }; } /** * Return type for useElectronAudio hook * @deprecated Use new architecture with AdaptedAudioSource instead */ export interface UseElectronAudioReturn { /** The audio source for Electron IPC */ source: AudioSource | null; /** Whether the audio source is active */ isActive: boolean; /** Function to start the audio source */ start: () => Promise<void>; /** Function to stop the audio source */ stop: () => void; /** Any error that occurred */ error: Error | null; /** Current performance metrics */ performanceMetrics: PerformanceMetrics | null; } export interface PerformanceMetrics { averageLatency: number; dataRate: number; droppedFrames: number; memoryUsage: number; } /** * Data point for scrolling waveform visualization * Represents a single waveform segment with position and height */ export interface WaveformDataPoint { /** Y position as percentage of canvas height (0-100) */ startY: number; /** Bar height as percentage of canvas height */ barHeight: number; } /** * Parameters for scrolling waveform rendering */ export interface ScrollingWaveformParams { /** Canvas element for drawing */ canvas: HTMLCanvasElement; /** Current audio data frame (time domain) */ audioData: Uint8Array; /** Array of historical waveform data points */ picks: Array<WaveformDataPoint | null>; /** Current animation index */ index: React.MutableRefObject<number>; /** Secondary animation index for smooth scrolling */ index2: React.MutableRefObject<number>; /** Unit calculation: barWidth + gap * barWidth */ unit: number; /** Whether audio is in progress */ isAudioInProgress: boolean; /** Whether audio is paused */ isPausedAudio: boolean; /** Background color */ backgroundColor: string; /** Primary waveform color */ barColor: string; /** Secondary/inactive waveform color */ secondaryBarColor: string; /** Width of each waveform bar */ barWidth: number; /** Gap between waveform bars */ gap: number; /** Border radius for rounded bars */ rounded: number; /** Enable current pick animation */ animateCurrentPick: boolean; /** Fill entire canvas width */ fullscreen: boolean; /** Visualization gain multiplier (default: 1.0) */ gain?: number; /** Amplitude calculation mode (default: 'peak') */ amplitudeMode?: 'peak' | 'rms' | 'adaptive'; } /** * Error types for better error handling */ export declare enum AudioWaveErrorType { MEDIA_NOT_SUPPORTED = "MEDIA_NOT_SUPPORTED", PERMISSION_DENIED = "PERMISSION_DENIED", AUDIO_CONTEXT_ERROR = "AUDIO_CONTEXT_ERROR", SHARED_BUFFER_ERROR = "SHARED_BUFFER_ERROR", RENDER_ERROR = "RENDER_ERROR", CONFIGURATION_ERROR = "CONFIGURATION_ERROR", INVALID_STATE = "INVALID_STATE", ADAPTER_ERROR = "ADAPTER_ERROR", CONNECTION_TIMEOUT = "CONNECTION_TIMEOUT" } /** * Custom error class for audiowave */ export declare class AudioWaveError extends Error { type: AudioWaveErrorType; originalError?: Error | undefined; constructor(type: AudioWaveErrorType, message: string, originalError?: Error | undefined); } /** * Type guard to check if source implements standard AudioSource interface */ export declare function isStandardAudioSource(source: any): source is AudioSource; /** * Type guard to check if SharedArrayBuffer is supported (Electron) */ export declare function isSharedArrayBufferSupported(): boolean; //# sourceMappingURL=types.d.ts.map