Lyric Studio

Una herramienta para crear videos de letras: una imagen de fondo + una pista de audio, con líneas de letra que aparecen y desaparecen en marcas de tiempo exactas que tú eliges, en cualquier fuente real de Google Fonts.

Tiene dos partes que comparten el mismo proyecto:

• La interfaz de edición — una aplicación web que abres en tu navegador para subir medios, escribir líneas de letra con tiempos, elegir fuente/color y renderizar.

• El servidor MCP — el mismo proyecto, expuesto como herramientas para que un asistente de IA (Claude Desktop, Claude Code, etc.) pueda añadir/editar líneas de letra y activar un render en tu nombre.

Debido a que comparten el mismo projects/default/project.json, las líneas añadidas por la IA aparecen en la interfaz del navegador (se actualiza cada 5 segundos), y viceversa.

Requisitos

• Node.js 18+

• ffmpeg y ffprobe en tu PATH (ffmpeg -version para comprobar)

• Acceso a internet (para descargar Google Fonts en el primer uso de cada fuente)

Related MCP server: Music Media MCP Server

Configuración

npm install

1. Ejecutar la interfaz de edición

npm run start

Luego abre http://localhost:4790.

En la interfaz:

1. Añade un archivo de audio.

2. Añade una o más imágenes de fondo. Para cada una, escribe cuánto tiempo debe reproducirse en el cuadro "until" (por ejemplo, 3:00) antes de hacer clic en Añadir imagen a la secuencia — las imágenes se reproducen una tras otra en el orden en que las añadas. Deja "until" en blanco en la última imagen para que se reproduzca hasta el final de la canción. Ejemplo para una canción de 4 minutos con 2 imágenes: añade la imagen 1 con until: 3:00, luego la imagen 2 con until en blanco (se reproducirá automáticamente hasta 4:00).

3. Elige una fuente de Google Fonts, tamaño, color, contorno y posición (superior/centro/inferior).

4. Añade líneas de letra: texto + hora de inicio + hora de fin (3:05, 185, o 1:03:05 todos funcionan). Arrastra un bloque de letra en la línea de tiempo para cambiar su sincronización, o arrastra su borde izquierdo/derecho para redimensionar solo el inicio o el final — ambos se guardan automáticamente al soltar.

5. Recorre la línea de tiempo para previsualizar qué línea y qué imagen se muestran en cada momento.

6. Haz clic en Renderizar video — el MP4 aparece con un enlace de descarga cuando termina.

2. Ejecutar el servidor MCP (para control por IA)

El servidor MCP se comunica a través de stdio, así que apuntas la configuración de tu herramienta de IA hacia él en lugar de ejecutarlo manualmente tú mismo.

Claude Desktop / Claude Code — añade a tu configuración MCP (claude_desktop_config.json o equivalente):

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

Reinicia el cliente, y la IA tendrá disponibles estas herramientas:

Múltiples imágenes, una por sección de la canción

Las imágenes se reproducen una tras otra en el orden en que las añades — cada una se ejecuta desde donde terminó la anterior hasta el tiempo until que le des:

Establece el audio en /Users/me/song.mp3 (dura 4 minutos). Añade /Users/me/cover1.jpg con until "3:00". Luego añade /Users/me/cover2.jpg sin "until" — debería ejecutarse hasta el final.

Eso te da: cover1.jpg para 0:00–3:00, cover2.jpg para 3:00–4:00. Añade tantas imágenes como quieras de esta manera — cada nueva solo necesita su propio until. El renderizado falla con un error claro si las imágenes no cubren completamente la duración del audio, así sabrás si falta un hueco.

Ejemplo de prompt para la IA una vez conectada

Usa lyric-studio: establece la imagen en /Users/me/cover.jpg y el audio en /Users/me/raikan-cinta.mp3. Usa la fuente "Poppins" en blanco con contorno negro, posición inferior. Añade esta línea de letra: "Mari mawar raikan cinta, tanpa cintanya kita tiada, mawar cinta mawar ku abadi, cinta pemilik segala jadi" de 3:05 a 3:35. Luego renderízalo.

Cómo funciona el renderizado

Las líneas de letra se convierten en un archivo de subtítulos .ass y se incrustan en el video con ffmpeg/libass, usando la TTF real de Google Fonts (descargada y almacenada en caché en fonts-cache/) — no un sustituto genérico de fuente del sistema.

Estructura del proyecto

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

Notas

• Esta es una herramienta de un solo proyecto por diseño (hay un proyecto activo, default) — el ajuste más simple para el uso de "una canción, un video". Si quieres múltiples proyectos concurrentes, cada función en shared/projectStore.js ya acepta un projectId, así que es un cambio pequeño para pasar un id diferente a través de ambos servidores.

• Los archivos de fuente se guardan en caché después de la primera descarga, por lo que volver a renderizar con la misma fuente no vuelve a tocar la red.