Overview
Lyric Synchronization Tool
Upload a song, paste the lyrics, tap spacebar to sync each line to the music, then export a standalone HTML player. Two versions: Basic and AI-enhanced.
What This Tool Does
Creates custom lyric video players where each line of text appears perfectly synchronized with the music. The output is a self-contained HTML file that can be opened in any browser, shared via email, or hosted on any web server. No dependencies, no login, no streaming service required.
End-to-End Flow
Upload AudioMP3 or WAV
→
Paste LyricsPlain text
→
Tap to SyncSpacebar timing
→
Export HTMLStandalone player
Basic Creator
Gradient background with animated lyric text. Simple, clean, works everywhere. No external API calls.
File: creator-basic.html
AI Creator
Uses Hugging Face Stable Diffusion to generate unique background images from the lyrics. Each line gets its own AI-generated visual.
File: creator-ai.html
Technical Architecture
| Stack | |
|---|---|
| Creator UIs | Pure HTML/CSS/JS — no framework, no build step, just open in browser |
| Proxy Server | Express.js server (server.js) proxies Hugging Face API calls for the AI creator |
| AI Image Generation | Hugging Face Inference API — Stable Diffusion models for background generation |
| Export Format | Self-contained HTML with embedded Base64 audio and CSS animations |
| Pre-made Players | 4 songs already synced and exported as standalone HTML files |
Creator Version
Basic Creator
The simplest version. Gradient backgrounds with animated lyric text. No external dependencies. Works offline.
How to Use
-
Open
creator-basic.htmlin your browser Double-click the file or drag it into a browser tab. No server required for the basic version. -
Upload your audio file Click the upload area or drag-and-drop an MP3 or WAV file. The file is loaded into the browser's memory (not uploaded anywhere).
-
Paste the lyrics Paste the full song lyrics into the text area. Each line will become a separate synced element. Blank lines create section breaks.
-
Enter the sync mode and tap spacebar Click "Start Sync." The audio begins playing. Press spacebar each time a new lyric line begins in the song. The tool records the timestamp for each line.
-
Preview and export Preview the synced playback, adjust if needed, then export as a standalone HTML file.
Visual Style
Background
- Animated gradient backgrounds
- Smooth color transitions between sections
- Dark overlay for text readability
- Full-screen immersive display
Typography
- Large, centered lyric text
- Fade-in / fade-out transitions per line
- White text with subtle shadow
- Current line highlighted, previous lines dimmed
✅
Zero dependencies: The basic creator is a single HTML file. No Node.js, no npm, no build tools. Open it in any modern browser and it works. The exported player is equally self-contained.
Creator Version
AI Creator
Enhanced version that generates unique AI background images for each lyric line using Hugging Face Stable Diffusion. Requires the Express.js proxy server.
Architecture
creator-ai.htmlBrowser UI
→
server.jsExpress proxy
→
Hugging FaceStable Diffusion
→
Generated ImagesBase64 embedded
How AI Generation Works
-
User pastes lyrics and enters sync timing Same process as the basic creator — upload audio, paste lyrics, spacebar sync.
-
Each lyric line becomes an image prompt The tool takes each line of lyrics and crafts a Stable Diffusion prompt from the text content. Adds style modifiers for visual consistency.
-
Express proxy sends requests to Hugging Face The browser can't call Hugging Face directly (CORS + API key). The Express server (
server.js) acts as a proxy, forwarding requests and returning generated images. -
Images embedded as Base64 in the exported HTML Generated images are converted to Base64 and embedded directly in the export file. No external image hosting needed.
Express Proxy Server
| server.js Details | |
|---|---|
| Framework | Express.js with CORS enabled for local development |
| Endpoint | POST /api/generate-image — accepts a text prompt, returns a generated image |
| API | Hugging Face Inference API with Stable Diffusion model |
| Rate Limiting | Hugging Face free tier has rate limits; images generated sequentially |
| Start Command | node server.js — runs on localhost:3000 by default |
⚠️
Prerequisites for AI Creator: You must have Node.js installed and run
npm install followed by node server.js before using the AI creator. The basic creator does not need this. A Hugging Face API token is required in the environment.Basic vs. AI Comparison
| Basic Creator | |
|---|---|
| Background | Gradient animation |
| Dependencies | None |
| File Size | Small (~500KB with audio) |
| Speed | Instant export |
| AI Creator | |
|---|---|
| Background | AI-generated images per line |
| Dependencies | Node.js + Hugging Face API |
| File Size | Larger (~5-15MB with images) |
| Speed | Minutes (image generation) |
How It Works
Sync Process
The core interaction: listening to the song and tapping spacebar to mark when each lyric line begins. This creates the timing data that powers the player.
Step-by-Step Sync
-
Lyrics are parsed into individual lines When you paste lyrics into the text area, the tool splits them by newlines. Each non-empty line becomes a sync point. Blank lines are treated as section breaks.
-
Click "Start Sync" to begin playback The audio starts playing from the beginning. The first lyric line is highlighted in the UI, waiting for your spacebar tap.
-
Tap SPACEBAR when the current line begins in the song Press spacebar at the exact moment you hear the singer start the highlighted line. The timestamp (in seconds) is recorded, and the next line is highlighted.
-
Repeat for every line until the song ends Continue tapping through every lyric line. If you make a mistake, you can go back and re-sync individual lines.
-
Preview the synchronized result Play back the song with the synced lyrics overlaid. Check timing accuracy. Adjust individual timestamps if needed.
Timing Data Format
The sync process generates a simple JSON array mapping each lyric line to its start time:
// Internal timing data structure
[
{ "line": "Verse 1, line 1 text", "time": 5.230 },
{ "line": "Verse 1, line 2 text", "time": 9.871 },
{ "line": "Chorus line 1", "time": 15.440 },
{ "line": "Chorus line 2", "time": 19.102 },
...
]
💡
Precision tip: The spacebar timing is captured at millisecond precision. For best results, use headphones so you can hear the exact moment each line begins. A slight delay is natural — the player accounts for human reaction time.
DO
- Use headphones for precise timing
- Leave blank lines between verses for section breaks
- Preview before exporting
- Re-sync individual lines if timing is off
- Practice the timing once before the real sync
DON'T
- Don't include non-lyric text (artist name, [Chorus], etc.)
- Don't rush — wait for each line to actually start
- Don't use very long lines (split them naturally)
- Don't close the browser mid-sync (data is lost)
- Don't use files larger than ~50MB (browser memory)
Output
Export & Distribution
How the synced lyrics become a standalone HTML player that can be shared anywhere without any server or hosting requirements.
What Gets Exported
A single .html file that contains everything needed to play the song with synced lyrics:
| Embedded in the HTML File | |
|---|---|
| Audio | The original MP3/WAV file encoded as Base64 and embedded in a <audio> element |
| Lyrics + Timing | JSON array of lyric lines with millisecond timestamps, embedded in a <script> tag |
| Styles | All CSS for the player UI, animations, and transitions — inline in <style> |
| Player Logic | JavaScript that reads audio playback position and shows the correct lyric line |
| Background | Basic: CSS gradient animation. AI: Base64 images for each lyric line |
✅
Fully self-contained: The exported HTML file has zero external dependencies. No CDN links, no font imports, no API calls. Double-click to open in any browser. Works offline. Share via email, USB, Dropbox, or host on any web server.
Distribution Options
📧
Email
Attach the HTML file
🌐
Web Hosting
Upload to any server
💾
File Share
Dropbox, Drive, USB
📱
Mobile
Works on phone browsers
File Size Expectations
| Export Size Guide | ||
|---|---|---|
| Basic (3-min song) | Audio only, gradient backgrounds | ~3-5 MB |
| Basic (5-min song) | Longer audio, same compact styles | ~5-8 MB |
| AI (3-min song) | Audio + 20-30 embedded AI images | ~8-15 MB |
| AI (5-min song) | Audio + 40-50 embedded AI images | ~15-25 MB |
⚠️
Email attachment limits: Most email providers cap attachments at 25MB. For AI-generated exports of longer songs, use a file sharing service (Google Drive, Dropbox) and send the link instead.
Library
Pre-made Players
4 songs have already been synced and exported as standalone HTML players. These serve as examples and are ready to share.
Song Library
| Completed Players | |||
|---|---|---|---|
| All In | Full lyric sync with clean player export | Ready | All-In-player.html |
| Family Business | Full lyric sync with clean player export | Ready | Family-Business-player.html |
| Pappalardo Anthem | Full lyric sync with clean player export | Ready | Pappalardo-Anthem-player.html |
| She Paints the World | Full lyric sync with clean player export | Ready | She-Paints-the-World-player.html |
File Types in the Library
Each song has three associated files:
| Per Song | |
|---|---|
| .mp3 | Original audio file (source material) |
| -player.html | Original synced player export |
| -clean.html | Cleaned/refined version of the player |
"Clean" versions are generated by the generate-clean-players.js script. They apply consistent styling, remove debug elements, and optimize the HTML for distribution.
Run: node generate-clean-players.js to regenerate all clean versions from the raw player files.
Utility Scripts
| Helper Tools | |
|---|---|
generate-all-players.js |
Batch processes all MP3 files in the directory with their timing data and outputs player HTML files |
generate-clean-players.js |
Takes raw player exports and produces clean, optimized versions with consistent styling |
batch-processor.html |
Browser-based batch processing UI for syncing multiple songs in sequence |
server.js |
Express proxy for Hugging Face API (AI creator only) |
Other Creator Variants
The project includes several creator iterations that were built during development:
| All Creator Files | |
|---|---|
creator-basic.html | Current basic version — gradient backgrounds, recommended for most use |
creator-ai.html | Current AI version — Stable Diffusion backgrounds |
creator-ai-backup.html | Backup of a previous AI creator iteration |
creator-simple.html | Minimal version — earlier prototype |
creator-manual.html | Manual timing entry (type timestamps instead of spacebar) |
creator.html | Original first prototype |
🎉
Walkthrough complete! You now understand the Spark Team Event lyric sync tool: two creator versions (Basic and AI), the spacebar sync process, self-contained HTML exports, and the 4-song pre-made player library.