Music Maker is a powerful, 100% client-side web application that allows musicians and creators to transform their audio into stunning lyric videos and music visualizers instantly. No server uploads, no privacy concerns, and no expensive software required.
"Create lyric videos in 60 seconds — right in your browser."
- 🛡️ 100% Private & Local: All processing happens in your browser. Your audio and images never touch a server.
- 📊 Dynamic Visualizers: Choose from various templates including Bars, Circular, Waveform, Bass-reactive, and Particle effects.
- ✍️ Lyric/Subtitle System:
- SRT Upload: Import existing subtitle files.
- Manual Editor: Timeline-based editor with drag handles for precise timing.
- Auto-Transcription: Experimental Whisper WASM integration for automatic lyric generation.
- 🖼️ Custom Backgrounds: Upload your album art or posters to use as the backdrop.
- 🎬 WebM Export: High-speed video export (480p/720p) directly from the browser using standard Web APIs.
- 🎹 Interactive Timeline: Scrubbable waveform timeline with real-time preview and playhead sync.
- Framework: Next.js 15+ (App Router)
- Styling: Tailwind CSS 4
- State Management: Zustand
- Audio Engine: Web Audio API & Howler.js
- Video Processing: webm-muxer & Canvas API
- Icons: Lucide React
- Runtime: Bun (Recommended)
- Bun installed (or Node.js v20+)
- A modern web browser (Chrome, Edge, or Firefox recommended for MediaRecorder support)
-
Clone the repository:
git clone https://github.com/CODE-Y02/MV-maker.git cd MV-maker -
Install dependencies:
bun install # or npm install -
Run the development server:
bun dev # or npm run dev -
Build for production:
bun run build bun start
Open http://localhost:3000 with your browser to see the result.
- Upload Audio: Drag and drop your MP3/WAV file. The waveform will generate automatically.
- Set Background: Upload your album art or brand image.
- Customize Visualizer: Use the side panel to change templates, colors, and sensitivity.
- Add Lyrics:
- Click "Add Subtitle" on the timeline.
- Drag the edges to adjust timing.
- Type your text directly in the editor.
- Export: Hit the "Export" button, choose your FPS, and wait for the browser to render your video file.
Contributions are welcome! If you have ideas for new visualizer templates or feature improvements, feel free to open an issue or submit a pull request.
Distributed under the MIT License. See LICENSE for more information.
Built with ❤️ for indie artists.