Lyric Studio

歌詞ビデオを作成するためのツールです。背景画像+オーディオトラックに、選択した正確なタイムスタンプで表示・非表示になる歌詞行を、任意の実際のGoogle Fontで表示します。

同じプロジェクトを共有する2つのパーツがあります:

• エディターUI — ブラウザで開くWebアプリで、メディアのアップロード、タイミング付きの歌詞行の入力、フォント/色の選択、レンダリングを行います。

• MCPサーバー — 同じプロジェクトをツールとして公開し、AIアシスタント(Claude Desktop、Claude Codeなど)が代わりに歌詞行を追加/編集したり、レンダリングをトリガーしたりできます。

同じ projects/default/project.json を共有しているため、AIが追加した行はブラウザUIに表示され(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 を開きます。

UIで:

1. オーディオファイルを追加します。

2. 1つ以上の背景画像を追加します。各画像について、画像をシーケンスに追加 をクリックする前に「until」ボックスに再生時間を入力します(例:3:00)。画像は追加した順に連続して再生されます。最後の画像では「until」を空白のままにすると、曲の終わりまで再生されます。4分の曲で2枚の画像の例:画像1を until: 3:00 で追加し、画像2は until を空白のままにします(自動的に4:00まで再生されます)。

3. Google Font、サイズ、色、アウトライン、位置(上/中央/下)を選択します。

4. 歌詞行を追加します:テキスト+開始時間+終了時間(3:05、185、1:03:05 のいずれも機能します)。タイムライン上で歌詞ブロックをドラッグしてタイミングを調整するか、左右の端をドラッグして開始または終了のみをリサイズします。どちらもリリース時に自動的にコミットされます。

5. タイムラインをスクラブして、その時点でどの行とどの画像が表示されるかをプレビューします。

6. ビデオをレンダリング をクリックします。完了するとMP4がダウンロードリンク付きで表示されます。

2. MCPサーバーを実行(AI制御用)

MCPサーバーはstdioで通信するため、手動で実行するのではなく、AIツールの設定で指定します。

Claude Desktop / Claude Code — MCP設定(claude_desktop_config.json または同等のもの)に追加:

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

クライアントを再起動すると、AIは以下のツールを利用できます:

曲のセクションごとに複数の画像

画像は追加した順に連続して再生されます。各画像は前の画像が終了した時点から、指定した 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 が必要です。画像がオーディオの長さを完全にカバーしていない場合、レンダリングは明確なエラーで失敗するため、ギャップを埋める必要があることがわかります。

接続したAIへのプロンプト例

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 でビデオに焼き込まれます。実際のGoogle Font TTF(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 の1つ)—「1曲、1ビデオ」の用途に最も適しています。複数の同時プロジェクトが必要な場合、shared/projectStore.js のすべての関数はすでに projectId を受け取るため、両方のサーバーに異なるIDを通すのは小さな変更です。

• フォントファイルは初回ダウンロード後にキャッシュされるため、同じフォントで再レンダリングしてもネットワークにアクセスしません。