Karaoke Studio V4 is a high-performance, web-based production suite designed for content creators to generate professional-grade karaoke videos optimized for TikTok, Reels, and Shorts (9:16 aspect ratio). By combining advanced HTML5 Canvas rendering with synchronized lyric processing and AI-powered visual generation, it bridges the gap between simple lyric displays and studio-quality music videos.
- Real-time Canvas Rendering: A high-fidelity 1080x1920 production environment.
- Studio-Grade Export: Utilizes the MediaRecorder API to encode videos directly in the browser (WebM/VP9) with synchronized audio.
- Cinematic Motion: Built-in background animations (Slow Zoom, Shift Pan) to add life to static images.
- LRC Parser: Robust processing of
.lrcfiles with millisecond precision. - Audio Visualizer: Real-time FFT (Fast Fourier Transform) waveform studio with multiple styles:
- Bars: Traditional frequency bars.
- Reflected: Symmetric reflected visualization.
- Pulse: Oscilloscope-style line waves.
- Circles: Expanding concentric rings reactive to bass/amplitude.
- Precise Controls: Playback, scrubbing, and a dedicated "Studio Replay" button for timing checks.
- Advanced Typography: Deep customization of fonts (Inter, Bebas Neue, Playfair, etc.), sizing, colors, and shadows.
- Karaoke Highlighting: Optional progressive text fill based on current playback time.
- Annotation Overlays: Up to 3 customizable floating text lines for titles, credits, or social handles.
- Ambient Atmosphere: Particle engine for environmental effects:
- Fireflies, Snow, Rain, Bokeh, Mist, and Stars.
- Gemini-Powered Visuals: Integrated with Google Gemini API (
gemini-3-pro-image-preview) to generate aesthetic, mood-matching backgrounds based on your song's vibe.
- A modern browser (Chrome, Edge, or Safari) with MediaRecorder support.
- (Optional) A Google Gemini API Key for AI background generation.
- Clone the project structure.
- Ensure
process.env.API_KEYis configured if using AI features. - Open
index.htmlvia a local web server.
- Load Assets: Upload an MP3 file and a corresponding
.lrclyric file. Alternatively, paste a direct audio link and lyric text. - Set the Scene: Choose a background image or use the AI Visuals button to generate one based on a prompt.
- Customize Visuals:
- Adjust the Waveform Studio settings (color, opacity, amplitude).
- Select an Ambient Atmosphere (e.g., Fireflies for ballads, Stars for lo-fi).
- Configure Typography to match the genre.
- Preview: Use the studio player to watch the real-time preview.
- Export: Click BUILD FINAL EXPORT. The system will play through the track once to encode the video and trigger a download automatically.
- Framework: React 19 + TypeScript.
- Styling: Tailwind CSS for the studio interface.
- Rendering: HTML5 Canvas API (2D Context) for the 60FPS video engine.
- Audio: Web Audio API for real-time frequency analysis.
- Export: MediaRecorder API for hardware-accelerated video encoding.
- Persistence: LocalStorage for saving "Production Presets."
Created for modern music producers and content enthusiasts.
Note: For the visualizer to function with remote audio URLs, the hosting server must support CORS (Cross-Origin Resource Sharing).