mcpField
A
add-voiceover

add-voiceover

github.com/dojocodinglabsクリエイティブ・メディア16772 回インストール2 週間前に更新
リポジトリ

add-voiceover について

ElevenLabs でシーンごとのナレーションを生成し、Remotion のコンポジションに組み込むスキルです。音声の選択、シーン尺の調整、任意の字幕追加や BGM のダッキングも扱います。

主な機能

  1. 01シーンごとのナレーション台本
  2. 02ElevenLabs の音声選択と TTS
  3. 03シーンごとの音声ファイル生成
  4. 04音声の長さに基づくシーン尺設定
  5. 05字幕と BGM ダッキングの任意対応

活用シーン

  1. 01Remotion 動画へのナレーション追加
  2. 02特定シーンの音声再生成
  3. 03ナレーションに合わせたシーン尺の調整
  4. 04ナレーション中の BGM 音量低下

MCP 対応

README では、ElevenLabs MCP の text_to_speech ツールは非推奨ながら、対話型の単発生成には引き続き利用できると説明されています。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dojocodinglabs/remotion-superpowers --skill add-voiceover

インストール後、Claude Code で/add-voiceoverを入力して読み込まれたか確認します。

詳細

ナレーションを追加 — ナレーションの生成と統合

Remotion プロジェクトにナレーションを追加する作業をサポートします。

**voiceover-sync と audio-integration のルールを確認するため、remotion-production スキルを読み込み、API の詳細を確認するため、ElevenLabs 公式の text-to-speech スキル（npx skills add elevenlabs/skills）も読み込んでください。

ワークフロー

0. まずプレビューする

まだ Studio が起動していない場合は、公式の remotion-best-practices スキルに従い、npx remotion studio（またはアプリ内ブラウザーを使う場合は --no-open を指定し、表示された URL を開く）で今すぐ起動し、開いたままにしてください。

1. 台本を用意する

ユーザーから台本が提供されていない場合：

  • 動画のテーマを尋ねます
  • トーン（プロフェッショナル、カジュアル、エネルギッシュ、落ち着いた雰囲気）を尋ねます
  • ナレーション台本を作成し、シーンごとに1行または1段落に分けます
  • 承認を求めます
2. 音声を選ぶ

既成の音声（公式の text-to-speech スキルより）：

  • George（JBFqnCBsd6RMkjVDRZzb）— 男性、ナレーション向け（デフォルト）
  • Sarah（EXAVITQu4vr4xnSDxMaL）— 女性、柔らかい声
  • Daniel（onwK4e9ZLuTAKqWW03F9）— 男性、威厳のある声
  • Charlotte（XB0fDUnXU5powFXDhCwa）— 女性、会話調

特定のムード、アクセント、言語に合わせる場合は、音声ライブラリを検索してください。クローン音声や複数話者については、elevenlabs-advanced のルールを参照してください。すべてのシーンで同じ音声を使用します。

3. シーンごとに1ファイルずつ TTS を生成する

公式の Remotion ナレーションガイドでも推奨されているとおり、ElevenLabs を使って生成します。

  1. プロジェクトで ELEVENLABS_API_KEY が設定されていない場合は、プロジェクトのルートから npx -y @elevenlabs/cli@latest onboard init を実行し、表示される手順に従ってください。チャットでキーを尋ねてはいけません。
  2. npm i @elevenlabs/elevenlabs-js を実行し、audio-integration ルールを参考に scripts/generate-audio.ts を作成します。シーンごとに voiceover エントリ（vo-scene1、vo-scene2、…）を1つずつ用意し、選択した VOICE_ID を指定します。モデルは eleven_v4 です。
  3. プロジェクトのルートから node scripts/generate-audio.ts を実行します。各シーンのファイルは public/vo-sceneN.mp3 に保存されます。1つのセリフを作り直すには、そのファイルを削除してスクリプトを再実行してください。

このスクリプトは長さを報告しません。ファイルの長さは手順4で測定します。

代替手段：

  • ElevenLabs MCP の text_to_speech ツールは非推奨（上流でアーカイブ済み）ですが、手軽な対話型の単発生成には引き続き利用できます。出力先は public/ です。出力ファイルの名前を vo-sceneN.mp3 に変更してください。
  • 安価なドラフトには KIE generate_speech（remotion-media）を使用できます。text、output_name: vo-scene1、voice: Eric（voiceover-sync ルールに記載されている21種類の名前付き音声）を指定します。Suno および KIE が再販するその他のモデルは、KIE を通じて各所有者からライセンスされていません。KIE の音声はドラフトや内部作業に使用し、商用の最終音声は ElevenLabs で生成してください。
4. calculateMetadata でシーンの長さを設定する

voiceover-sync ルールに従って、Mediabunny を使い、calculateMetadata 内で各 vo-sceneN.mp3 の長さを測定し、シーンごとのフレーム数（Math.ceil(seconds * fps)）を props として渡します。コンポジションの長さは音声に合わせて決まり、セリフを再生成すると Studio のタイミングも更新されます。

5. コンポジションに組み込む

公式の remotion-markup スキル（audio.md）に従い、各シーン内に @remotion/media の <Audio> を使って、そのシーンのファイルを配置します（npx remotion add @remotion/media でインストールします）。

import { Audio } from "@remotion/media";
import { staticFile } from "remotion";

// Inside scene 1:
<Audio src={staticFile("vo-scene1.mp3")} volume={1} />
6. 字幕（任意）

字幕を提案します。字幕は公式の remotion-captions スキル（単語レベル、@remotion/whisper-webgpu）に従います。GPU がない場合は ElevenLabs Scribe を代替として使用し、captions-workflow ルールの TikTok 風プリセットを利用できます。/add-captions を実行してください。ユーザーが .srt ファイルのみを希望する場合は、/transcribe を実行してください。

7. BGM の音量を下げる（BGM がある場合）

プロジェクトにすでに BGM がある場合は、ナレーション中に音量を下げます。音量を下げる方法は audio-integration ルールを参照してください。

8. Studio で確認する

開いている Studio で再生するようユーザーに依頼します。MP4 を求められない限り、レンダリングしないでください。

コメント

Markdown 対応