Lyrics Studio

An intuitive, high-precision web studio for creating, visual syncing, editing, and converting structured song lyrics (.yaml / .lrc).

Launch Live Web Studio »

Key Features • Workflow • Shortcuts • YAML Spec • Getting Started • Icons Catalog

---

📌 Overview

Lyrics Studio is a client-side, web-based lyrics production workspace built for creators, karaoke producers, and music archivists. It offers real-time audio playback, single-key timestamp recording, a multi-track visual DAW timeline editor, and an Apple-Music-inspired preview player with real-time syllable gradient sweeps.

🔒 100% Client-Side & Private: Audio tracks and lyric payload processing occur purely in your browser memory. Nothing is stored or uploaded to external servers.

---

✨ Key Features

Visual DAW Timeline Editor Multi-track row view with drag-and-drop word blocks, resize handles, magnetic snapping, and zoomable audio waveforms.	Word & Line Sync Engine Switch seamlessly between word-by-word karaoke timing and line-by-line sync with instant hotkey recording.
Apple-Style Preview Player Interactive karaoke player featuring smooth line scrolling, dynamic ambient cover glow, and syllable fill sweeps.	LRCLIB Integration Direct search and fetching of plain lyrics or timed tracks from the LRCLIB open database.
Background Vocals & Duet Support Automatic detection for parenthetical background vocals (bg), duet vocalist separation, and instrumental breaks.	Binary ID3 & FLAC Metadata Parser Built-in DataView binary parser extracting song titles, artist tags, and embedded album art automatically upon drop.

---

🔄 App Architecture & Workflow

[ 1. Audio & Lyric Input ]           --->      [ 2. Real-time Hotkey Sync ]
 • Drop Audio (.mp3, .flac, .wav)               • Spacebar timestamping
 • Search LRCLIB or paste text                  • Word end & offset adjustments
 • Auto ID3 metadata extraction                 • Step-back (0.3s) correction

            │                                           │
            ▼                                           ▼

[ 3. Multi-Track DAW Timeline ]       --->     [ 4. Apple Preview Player ]
 • Drag & resize word blocks                    • Smooth scrolling stream
 • Magnetic boundary snap                       • Syllable fill gradient sweep
 • Precision millisecond nudge                  • Ambient cover glow layer

---

⌨️ Keyboard Shortcuts

Lyrics Studio is designed for rapid keyboard-driven workflows:

Sync Editor Mode

Shortcut	Action
Space	Record next timestamp (word or line)
Shift + Space	Step back 0.3 seconds & clear last timestamp
Ctrl + Shift + T / Ctrl + 4	Switch to Visual Timeline Editor

Visual Timeline Editor Mode

Shortcut	Action
Space	Play / Pause audio playback
F	Toggle auto-follow playhead
S	Toggle magnetic block snapping
Left / Right	Nudge selected word by 10ms
Shift + Left / Right	Nudge selected word by 50ms
Delete / Backspace	Clear timestamps for selected word block
Ctrl + Scroll Wheel	Smoothly zoom timeline scale
Esc	Exit Timeline view

---

📄 YAML Specification Format

Lyrics Studio exports structured .lyricsfile.yaml files adhering to a clean, standardized schema:

version: "1.1"
metadata:
  title: "Example Track Name"
  artist: "Artist Name"
  duration_ms: 210000
lines:
  - text: "Stay until the morning"
    start_ms: 12400
    end_ms: 15200
    words:
      - text: "Stay "
        start_ms: 12400
        end_ms: 12900
      - text: "until "
        start_ms: 12900
        end_ms: 13500
      - text: "the "
        start_ms: 13500
        end_ms: 13800
      - text: "morning"
        start_ms: 13800
        end_ms: 15200
  - type: "instrumental"
    text: "Instrumental Break"
    start_ms: 15200
    end_ms: 22000
  - text: "(oh oh)"
    start_ms: 22100
    end_ms: 24000
    bg: true
plain: |-
  Stay until the morning
  - Instrumental Break
  (oh oh)

---

🛠️ Tech Stack

• Frontend Core: Plain JavaScript (ES6+ Modules), HTML5, Native DataView Binary Readers
• Audio Waveforms: WaveSurfer.js v7
• YAML Parser: js-yaml v4
• UI Architecture: Windows Fluent UI / Apple Music Dark Theme Hybrid
• Deployment: Vercel

---

💻 Local Setup & Development

Because Lyrics Studio is built with modern, zero-build client-side technologies, running it locally is simple:

1. Clone the repository:

   git clone https://github.com/DarkForceFREEFIRE/LRC-Studio.git
   cd LRC-Studio

2. Serve using any local HTTP server:

   Using Python:

   python3 -m http.server 8000

   Using Node serve or npx:

   npx serve .

3. Open in browser: Navigate to http://localhost:8000.

---

🎨 UI Icons Catalog

All SVG icons are stored locally inside assets/icons/ and power the entire workspace UI:

Click to expand full icon asset directory (47 icons)

Category	Available Icons
Player Controls	Play.svg • Pause.svg • Back.svg • Volume 0.svg • Volume 1.svg • Volume 2.svg • Volume 3.svg • Mute.svg
Editor & Sync	Sync.svg • Timeline.svg • Lyrics.svg • Music Note.svg • Mic On.svg • Singing.svg • Not singing.svg • Effects.svg
Files & Actions	Open.svg • Download.svg • Copy.svg • Delete.svg • Publish.svg • Raw.svg • Search.svg • Cloud Search.svg
System & View	Home.svg • Library.svg • View.svg • Chevron Down.svg • Verified user.svg • Speed High.svg

---

📜 License

Distributed under the MIT License. See LICENSE for details.

---

_{Developed by DarkForceFREEFIRE. Built for lyricists and developers worldwide.}