About the Project
🎵 1. Dual Playback Modes: Audio Visualizer & Cinema Video
Interactive Audio Visualizer: 4 real-time Web Audio API modes:
Neon Bars: Dynamic frequency spectrum with gradient lighting.
Oscillogram Wave: 60fps audio waveform.
Circular Pulse: Radial pulsing spectrum.
Ambient Aura: Breathing bass glow reacting to kick drums.
Spinning Vinyl Disc: Realistic vinyl turntable with concentric grooves, reflection highlights, and animated tonearm needle that cues when playing.
Cinema Video Mode: Plays the high-definition video with translated subtitles (مترجمة).
🎚️ 2. Studio Equalizer & DSP Audio Engine
Web Audio API Biquad Filters: 3-band acoustic processing (Low Shelf 120Hz, Peaking Mid 1kHz, High Shelf 3.5kHz).
Acoustic Presets:
Bass Boost 🔥
EDM / Festival ⚡
Vocal Clarity 🎤
Pop Glow ✨
Rock Power 🎸
Flat (Studio)
Speed Pitch Control: 0.5x, 0.75x, 1.0x, 1.25x, 1.5x, 2.0x.
Volume & Boost: Up to 150% volume with mute toggle and dB indicators.
📜 3. Live Synchronized Karaoke Lyrics
Real-time active lyric line highlight.
Smooth auto-scrolling to keep the current sentence centered.
Click-to-Seek: Click any lyric line to jump audio directly to that timestamp.
Dynamic font-size adjuster (A- / A+).
📱 4. 100% Fully Responsive Design
Optimized fluid scaling across all screens:
Desktop (>1200px): 2-column studio layout.
Tablets (768px - 1024px): Responsive stacked column with adaptive height.
Mobile (320px - 640px): Compact thumb-friendly controls, centered vinyl disc, scrollable filter chips, and touch-optimized scrubber.
Technologies Used
react js
vite
python