Flow Media Player - Audio Visualization Platform
An advanced audio visualization platform that transforms music into immersive visual experiences through real-time particle physics and frequency analysis. Built with React and TypeScript, this application combines sophisticated Web Audio API processing with fluid dynamics to create responsive, high-performance visualizations that react to every beat, melody, and rhythm. The visualization engine performs real-time Fast Fourier Transform (FFT) analysis, extracting frequency data across bass, mid-range, and high-frequency bands to drive a physics-based particle system with 200+ interactive particles. Optimized for iPad kiosk deployments with guided access mode, making it ideal for both personal enjoyment and professional installations in entertainment venues and digital art exhibitions.
Key Features
- •Real-time audio analysis using Web Audio API with multi-band frequency processing
- •Physics-based particle system with 200+ interactive particles driven by audio frequencies
- •Frequency-specific color mapping isolating bass, mid-range, and high-frequency bands
- •Customizable visualization presets with PostgreSQL database persistence
- •Advanced particle behavior controls including trail rendering and center attraction
- •Dynamic flow fields and velocity-based trail rendering for fluid visual effects
- •iPad-optimized kiosk mode with Chrome browser integration and guided access support
- •Full-screen immersive experience with gesture prevention and auto-rotation handling
- •Configurable audio reactivity with sensitivity and response parameters
- •Smooth 60fps canvas rendering optimized for performance across all devices
- •Touch-friendly interface with intuitive gesture controls for mobile interaction
- •Video background integration capabilities for enhanced installation experiences
- •Modular architecture supporting extensibility for additional visualization modes
- •Database integration using Drizzle ORM with Neon serverless PostgreSQL
- •Specialized touch event handling with pull-to-refresh prevention for kiosk reliability
Implementation Details
This portfolio piece showcases full-stack development expertise with a focus on real-time audio processing and graphics rendering. The visualization engine leverages the Web Audio API to perform real-time Fast Fourier Transform (FFT) analysis, extracting frequency data across bass (20-250Hz), mid-range (250-2000Hz), and high-frequency (2000-20000Hz) bands. Each particle in the 200+ particle system is influenced by specific frequency ranges, with its position, velocity, color, and trail behavior calculated every animation frame based on live audio input. The particle physics engine implements sophisticated algorithms including center attraction forces, flow field dynamics, and velocity-based trail rendering. Custom canvas optimizations ensure smooth 60fps performance even with hundreds of particles, while the modular architecture supports extensibility for additional visualization modes. Database integration uses Drizzle ORM with PostgreSQL to persist user-created visualization presets and song metadata, enabling users to save and recall their favorite configurations. The iPad kiosk implementation includes specialized Chrome optimizations, touch event handling, pull-to-refresh prevention, and automatic fullscreen management—critical features for reliable operation in public installation environments.