Lyric Studio

Ein Werkzeug zum Erstellen von Lyric-Videos: ein Hintergrundbild + ein Audiotrack, mit Textzeilen, die zu exakten Zeitstempeln deiner Wahl erscheinen und verschwinden, in jeder echten Google-Schriftart.

Es besteht aus zwei Teilen, die dasselbe Projekt teilen:

• Die Editor-Oberfläche – eine Web-App, die du im Browser öffnest, um Medien hochzuladen, Textzeilen mit Timing einzugeben, Schriftart/Farbe zu wählen und zu rendern.

• Der MCP-Server – dasselbe Projekt, als Tools bereitgestellt, damit ein KI-Assistent (Claude Desktop, Claude Code usw.) Textzeilen hinzufügen/bearbeiten und in deinem Auftrag ein Rendering auslösen kann.

Da beide dasselbe projects/default/project.json teilen, erscheinen von der KI hinzugefügte Zeilen in der Browser-Oberfläche (sie pollt alle 5 Sekunden) und umgekehrt.

Voraussetzungen

• Node.js 18+

• ffmpeg und ffprobe in deinem PATH (ffmpeg -version zum Überprüfen)

• Internetzugang (um Google Fonts bei der ersten Verwendung jeder Schriftart herunterzuladen)

Related MCP server: Idea to Motion

Einrichtung

npm install

1. Editor-UI ausführen

npm run start

Öffne dann http://localhost:4790.

In der UI:

1. Füge eine Audiodatei hinzu.

2. Füge ein oder mehrere Hintergrundbilder hinzu. Gib für jedes ein, wie lange es im Feld „until“ abgespielt werden soll (z. B. 3:00), bevor du auf Add image to sequence klickst – Bilder werden in der Reihenfolge, in der du sie hinzufügst, hintereinander abgespielt. Lasse „until“ beim letzten Bild leer, damit es bis zum Ende des Songs läuft. Beispiel für einen 4-minütigen Song mit 2 Bildern: Füge Bild 1 mit until: 3:00 hinzu, dann Bild 2 mit leerem until (es läuft automatisch bis 4:00).

3. Wähle eine Google-Schriftart, Größe, Farbe, Kontur und Position (oben/mittig/unten).

4. Füge Textzeilen hinzu: Text + Startzeit + Endzeit (3:05, 185 oder 1:03:05 funktionieren alle). Ziehe einen Textblock auf der Timeline, um sein Timing zu verschieben, oder ziehe seine linke/rechte Kante, um nur den Anfang oder das Ende zu ändern – beides wird beim Loslassen automatisch übernommen.

5. Scrubbe die Timeline, um eine Vorschau zu sehen, welche Zeile und welches Bild zu einem bestimmten Zeitpunkt angezeigt werden.

6. Klicke auf Render video – das MP4 erscheint mit einem Download-Link, sobald es fertig ist.

2. MCP-Server ausführen (für KI-Steuerung)

Der MCP-Server kommuniziert über stdio, also weist du die Konfiguration deines KI-Tools darauf hin, anstatt ihn selbst manuell auszuführen.

Claude Desktop / Claude Code – füge zu deiner MCP-Konfiguration hinzu (claude_desktop_config.json oder entsprechend):

{
  "mcpServers": {
    "lyric-studio": {
      "command": "node",
      "args": ["/absolute/path/to/lyric-video-mcp/mcp-server.js"]
    }
  }
}

Starte den Client neu, und die KI hat diese Tools zur Verfügung:

Mehrere Bilder, eines pro Songabschnitt

Bilder werden in der Reihenfolge, in der du sie hinzufügst, hintereinander abgespielt – jedes läuft von dort, wo das vorherige endete, bis zur until-Zeit, die du angibst:

Setze den Audio auf /Users/me/song.mp3 (er ist 4 Minuten lang). Füge /Users/me/cover1.jpg mit until „3:00“ hinzu. Dann füge /Users/me/cover2.jpg ohne „until“ hinzu – es soll bis zum Ende laufen.

Das ergibt: cover1.jpg für 0:00–3:00, cover2.jpg für 3:00–4:00. Füge auf diese Weise so viele Bilder hinzu, wie du möchtest – jedes neue braucht nur sein eigenes until. Das Rendern schlägt mit einer klaren Fehlermeldung fehl, wenn die Bilder die Audiolänge nicht vollständig abdecken, damit du weißt, ob eine Lücke gefüllt werden muss.

Beispiel-Prompt an die KI nach der Verbindung

Verwende lyric-studio: setze das Bild auf /Users/me/cover.jpg und den Audio auf /Users/me/raikan-cinta.mp3. Verwende die Schriftart „Poppins“ in Weiß mit schwarzer Kontur, untere Position. Füge diese Textzeile hinzu: „Mari mawar raikan cinta, tanpa cintanya kita tiada, mawar cinta mawar ku abadi, cinta pemilik segala jadi“ von 3:05 bis 3:35. Dann rendere es.

So funktioniert das Rendern

Textzeilen werden in eine .ass-Untertiteldatei konvertiert und mit ffmpeg/libass in das Video eingebrannt, unter Verwendung der echten Google-Font-TTF (heruntergeladen und in fonts-cache/ zwischengespeichert) – nicht als generischer Systemschrift-Ersatz.

Projektstruktur

shared/projectStore.js   core logic — used by BOTH the UI server and MCP server
shared/fonts.js          Google Fonts catalog + real TTF downloader
shared/timeUtils.js      "3:05" / "185" / "1:03:05" time parsing
ui-server.js             Express server + REST API for the browser UI
mcp-server.js            MCP server (stdio) for AI control
public/                  browser UI (index.html, style.css, app.js)
projects/default/        this project's media, generated .ass file, project.json
fonts-cache/             downloaded Google Font TTF files (cached after first use)
public/output/           rendered MP4s

Hinweise

• Dies ist bewusst ein Einzelprojekt-Tool (es gibt ein aktives Projekt, default) – die einfachste Lösung für „ein Song, ein Video“. Wenn du mehrere gleichzeitige Projekte möchtest, nimmt jede Funktion in shared/projectStore.js bereits eine projectId entgegen, sodass es eine kleine Änderung ist, eine andere ID durch beide Server zu führen.

• Schriftdateien werden nach dem ersten Download zwischengespeichert, sodass ein erneutes Rendern mit derselben Schriftart nicht erneut auf das Netzwerk zugreift.