Demo Page: https://audio-visualizer.derstr1k3r.de 💡 Origin & Credits Original Concept & Vision: Martin Kraken Lead Developer & Architecture: DerStr1k3r ✨ Key Architectural & Visual Features 🎛️ 1. Multi-Band Audio DSP Engine Real-time frequency bin analysis split across Sub-Bass, Bass, Mids, Treble, and Presence. Adaptive transient/kick detection algorithm with adjustable sensitivity, smoothing, and multi-stage release envelopes. Web Audio API BiquadFilter (Bass Boost up to +15 dB) and Microphone (getUserMedia) live audio stream support. Web MIDI API Integration: Connect any hardware MIDI controller to map knobs and sliders in real-time. 🌌 2. Visualizer Modes & 3D Engine 2D Canvas Modes: Nebula Ring, Spectrum Bars, Pulse Tunnel, and Hybrid. Three.js 3D Modes: 3D Terrain Landscape & 3D Audio-Reactive Sphere. Custom GLSL Shader Studio: 11+ built-in professional Demoszene / Raymarched presets (Cyber Grid, Fluid Plasma, Synthwave Sun & Grid, Cyberpunk Tunnel, Hyperspace Warp, Audio Kaleidoscope, Cyber Audio City, etc.). Shader Fusion Mode: Blend custom GLSL shaders as immersive dynamic backgrounds with classic 2D visualizer elements on top. 🖼️ 3. Background Texture Mapping & Video Overlays WebGL Background Textures (sampler2D u_image): Uploaded background images are fed directly into GLSL shaders for audio-reactive displacement, chromatic aberration, and beat glitching. Chroma Key Video Overlays: Center video overlay playback with real-time white/green screen chroma keying, edge feathering, and speed control. 🎥 4. Broadcast-Ready 16:9 Video Recorder Record high-performance canvas streams at strict 16:9 aspect ratios in Full HD 1080p, QHD 1440p, or Ultra HD 4K at 60 FPS with 12 Mbps WebM encoding.