An immersive music player with a real-time Web Audio visualizer, song search, favorites, and a 3-band equalizer. Built for personal use. Zero tracking, minimal interface, keyboard-first.
Next.js 16TypeScriptWeb Audio APIHTML5 CanvasFramer MotionTailwind CSS 4shadcn/ui
key features
- Web Audio Engine: AudioContext/AnalyserNode pipeline with MediaElementAudioSourceNode routed through three BiquadFilterNode bands into the analyser
- 3 Visualizer Modes: Spectrum bars (with roundRect fallbacks), waveform line, and radial bars — 60fps via requestAnimationFrame
- Album-Art Color Extraction: Samples downscaled cover art into HSL hue bins to build 3 contrast-safe gradient colors for the live background
- Live Song Search: Implement JioSaavn API search with skeleton loaders
- Favorites: Option to add favorites
- Global Keyboard Shortcuts: Space (play/pause), arrow keys (seek, next/prev) with automatic input-focus protection
- Media Session API: Lock-screen/OS media controls for play, pause, seek, and track skipping
- Drag-and-Drop Loading: Load local audio files straight into the player