Lyric Studio

Инструмент для создания лирик-видео: фоновое изображение + аудиодорожка, с текстовыми строками, которые появляются и исчезают в точные временные метки, которые вы выбираете, любым настоящим шрифтом Google Fonts.

Он состоит из двух частей, которые используют один и тот же проект:

• Редактор UI — веб-приложение, которое вы открываете в браузере, чтобы загружать медиафайлы, вводить текстовые строки с таймингом, выбирать шрифт/цвет и рендерить видео.

• MCP-сервер — тот же проект, представленный в виде инструментов, чтобы ИИ-ассистент (Claude Desktop, Claude Code и т. д.) мог добавлять/редактировать текстовые строки и запускать рендер от вашего имени.

Поскольку обе части используют один и тот же projects/default/project.json, строки, добавленные ИИ, появляются в браузерном интерфейсе (он опрашивает сервер каждые 5 секунд), и наоборот.

Требования

• Node.js 18+

• ffmpeg и ffprobe в вашем PATH (проверьте командой ffmpeg -version)

• Доступ в интернет (для загрузки шрифтов Google Fonts при первом использовании каждого шрифта)

Related MCP server: Idea to Motion

Установка

npm install

1. Запуск редактора UI

npm run start

Затем откройте http://localhost:4790.

В интерфейсе:

1. Добавьте аудиофайл.

2. Добавьте одно или несколько фоновых изображений. Для каждого укажите, как долго оно должно показываться, в поле «until» (например, 3:00), прежде чем нажать Add image to sequence — изображения воспроизводятся друг за другом в порядке добавления. Оставьте поле «until» пустым для последнего изображения, чтобы оно показывалось до конца песни. Пример для 4-минутной песни с 2 изображениями: добавьте изображение 1 с until: 3:00, затем изображение 2 с пустым полем until (оно автоматически продлится до 4:00).

3. Выберите шрифт Google Fonts, размер, цвет, обводку и позицию (сверху/по центру/снизу).

4. Добавьте текстовые строки: текст + время начала + время окончания (3:05, 185 или 1:03:05 — все форматы работают). Перетащите текстовый блок на таймлайне, чтобы сдвинуть его тайминг, или перетащите его левый/правый край, чтобы изменить только начало или конец — изменения сохраняются автоматически при отпускании.

5. Перемещайте ползунок по таймлайну, чтобы предпросмотреть, какая строка и какое изображение отображаются в любой момент времени.

6. Нажмите Render video — когда рендер завершится, появится MP4-файл со ссылкой для скачивания.

2. Запуск MCP-сервера (для управления через ИИ)

MCP-сервер работает через stdio, поэтому вы указываете на него в конфигурации вашего ИИ-инструмента, а не запускаете его вручную.

Claude Desktop / Claude Code — добавьте в конфигурацию MCP (claude_desktop_config.json или аналогичный файл):

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

Перезапустите клиент, и ИИ получит доступ к следующим инструментам:

Несколько изображений — по одному на каждую часть песни

Изображения воспроизводятся друг за другом в порядке добавления — каждое начинается там, где закончилось предыдущее, и длится до указанного вами времени until:

Установи аудио на /Users/me/song.mp3 (длительность 4 минуты). Добавь /Users/me/cover1.jpg с until "3:00". Затем добавь /Users/me/cover2.jpg без "until" — оно должно идти до конца.

В результате: cover1.jpg на 0:00–3:00, cover2.jpg на 3:00–4:00. Добавляйте сколько угодно изображений таким способом — каждому новому просто нужно указать своё until. Рендер завершится с понятной ошибкой, если изображения не покрывают полностью длительность аудио, так что вы узнаете, если нужно заполнить пробел.

Пример запроса к ИИ после подключения

Используй lyric-studio: установи изображение на /Users/me/cover.jpg и аудио на /Users/me/raikan-cinta.mp3. Используй шрифт "Poppins" белого цвета с чёрной обводкой, позиция снизу. Добавь эту текстовую строку: "Mari mawar raikan cinta, tanpa cintanya kita tiada, mawar cinta mawar ku abadi, cinta pemilik segala jadi" с 3:05 до 3:35. Затем отрендери.

Как работает рендеринг

Текстовые строки преобразуются в файл субтитров .ass и встраиваются в видео с помощью ffmpeg/libass, с использованием настоящего TTF-шрифта Google Fonts (скачивается и кэшируется в fonts-cache/) — а не заменяется системным шрифтом.

Структура проекта

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

Примечания

• Это однопроектный инструмент по замыслу (есть один активный проект, default) — оптимальное решение для сценария «одна песня, одно видео». Если вам нужны несколько параллельных проектов, каждая функция в shared/projectStore.js уже принимает projectId, так что достаточно небольшого изменения, чтобы протянуть другой идентификатор через оба сервера.

• Файлы шрифтов кэшируются после первой загрузки, поэтому повторный рендер с тем же шрифтом не обращается к сети.