Communitygithub.com

Amartileyton/autovideo

ElevenLabs AI を使ってプロフェッショナルなナレーションを生成します。動画のナレーション、オーディオナレーション、テキスト読み上げコンテンツが必要な場合に使用します。ナレーター、営業担当、専門家などの複数の音声キャラクタープリセットをサポートし、自然な配信を実現します。単一シーンの再生成による微調整機能も含みます。

autovideo とは?

このスキルは、ElevenLabs API を使用して Remotion 動画向けの高品質な AI ナレーションを生成します。ユーザーはテキストから直接 MP3 音声を生成できるほか、複数のシーンを JSON ファイルで定義し、リクエストスティッチングを使って一貫した韻律で音声を生成できます。特徴的な点は、`narrator`(ナレーター)、`salesperson`(営業)、`expert`(専門家)など、シチュエーションに応じたキャラクタープリセットが用意されており、単なるテキスト読み上げではなく自然な語り口を実現できることです。また、特定のシーンだけを再生成して微調整できる機能、生成後の音声の長さや無音時間、話速を自動検証するタイミングバリデーション機能も備えています。さらに、MP4 動画にサムネイル画像を埋め込む機能もあり、SNS や動画プレイヤーでの表示を最適化します。主に Remotion を使った動画制作ワークフローと統合することを想定しており、`.env.local` に ElevenLabs の API キーを設定するだけで利用開始できます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Amartileyton/autovideo/tree/HEAD/.agent/skills/elevenlabs-remotion

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ElevenLabs ナレーション生成

ElevenLabs API を使用して、Remotion 動画向けのプロフェッショナルな AI ナレーションを生成します。

前提条件

  • .env.local に ELEVENLABS_API_KEY が設定されていること

クイックスタート

# テキストからナレーションを生成
node .claude/skills/elevenlabs-remotion-skill/generate.js --text "ここにテキスト" --output public/audio/voiceover.mp3

# ナレータースタイルで生成(より自然)
node .claude/skills/elevenlabs-remotion-skill/generate.js --text "あなたのテキスト" --character narrator --output voiceover.mp3

# シーンファイルを使った生成(リクエストスティッチング対応)
node .claude/skills/elevenlabs-remotion-skill/generate.js --scenes remotion/scenes.json --output-dir public/audio/project/

# 単一シーンの再生成
node .claude/skills/elevenlabs-remotion-skill/generate.js --scenes scenes.json --scene scene2 --new-text "更新されたテキスト"

# 利用可能な音声とキャラクタープリセットを一覧表示
node .claude/skills/elevenlabs-remotion-skill/generate.js --list-voices
node .claude/skills/elevenlabs-remotion-skill/generate.js --list-characters

キャラクタープリセット

画面上のテキストをそのまま読むのではなく、キャラクタープリセットを使用してより自然なナレーションを実現します。

キャラクター説明最適な用途
literalテキストをそのまま読み上げます画面上のテキスト、引用
narratorプロの語り手、スムーズで魅力的解説動画、ドキュメンタリー
salesperson熱意があり、説得力があり、元気マーケティング、広告
expert権威があり、自信に満ち、知識豊富法的コンテンツ、チュートリアル
conversationalカジュアルで、親しみやすく、自然ソーシャルメディア、カジュアルコンテンツ
dramatic激しく、感情的で、インパクトがあるフック、問題提起
calm心地よく、安心感があり、優しい信頼構築、結論
# 全体にナレータースタイルを適用
node .claude/skills/elevenlabs-remotion-skill/generate.js --scenes scenes.json --character narrator --output-dir public/audio/

# または scenes.json 内でシーンごとに設定
{
  "scenes": [
    { "id": "scene1", "text": "問題提起", "character": "dramatic" },
    { "id": "scene2", "text": "解決策", "character": "calm" }
  ]
}

シーンベース生成とリクエストスティッチング

ElevenLabs のリクエストスティッチングを使用して、複数のシーンを一貫した韻律で生成します。

scenes.json の形式

{
  "name": "product-demo",
  "voice": "George",
  "character": "narrator",
  "scenes": [
    {
      "id": "scene1",
      "text": "一般的なテキスト読み上げはロボット的に聞こえます。あなたのブランドにはもっとふさわしいものがあります。",
      "duration": 4.5,
      "character": "dramatic"
    },
    {
      "id": "scene2",
      "text": "音声クローンを使えば、自分の声で無限のコンテンツを作成できます。",
      "duration": 5.5
    },
    {
      "id": "scene3",
      "text": "短いサンプルを録音し、クローンを作成します。数分でプロフェッショナルなナレーションを生成できます。",
      "duration": 6,
      "delay": 0.3
    }
  ]
}

全シーンを生成

node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --scenes remotion/product-demo-scenes.json \
  --output-dir public/audio/product-demo/

これにより以下が作成されます:

  • product-demo-scene1.mp3 ~ sceneN.mp3
  • product-demo-combined.mp3(全シーンを連結)
  • product-demo-info.json(長さなどのメタデータ)

単一シーンの再生成

シーンの開始が早すぎる、タイミングが合わない、またはテキストを変更したい場合:

# scene2 を新しいテキストで再生成
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --scenes remotion/scenes.json \
  --scene scene2 \
  --new-text "更新されたシーン2のテキスト" \
  --output-dir public/audio/project/

# scene3 を別のキャラクターで再生成
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --scenes remotion/scenes.json \
  --scene scene3 \
  --character salesperson \
  --output-dir public/audio/project/

# 単純な再生成(同じテキスト、同じキャラクター)
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --scenes remotion/scenes.json \
  --scene scene1 \
  --output-dir public/audio/project/

# MP4 動画にサムネイルを埋め込む
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --embed-thumbnail public/videos/my-video.mp4 \
  --thumbnail public/videos/my-thumbnail.png \
  --output public/videos/my-video-with-thumb.mp4

このツールは自動的に:

  • 前のシーンのリクエストスティッチングを使用し、一貫した韻律を維持
  • 新しいメタデータで info.json ファイルを更新
  • --new-text が指定された場合は scenes.json を更新

サムネイル埋め込み

MP4 動画にサムネイル画像を埋め込むことで、Twitter、YouTube、動画プレイヤーなどで最初のフレームではなくカスタムサムネイルが表示されるようにします。

動画にサムネイルを埋め込む

# 基本的な使用方法 - 出力は video-thumb.mp4
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --embed-thumbnail public/videos/promo.mp4 \
  --thumbnail public/videos/thumbnail.png

# カスタム出力パス
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --embed-thumbnail public/videos/promo.mp4 \
  --thumbnail public/videos/thumbnail.png \
  --output public/videos/promo-final.mp4

Remotion とのワークフロー

# 1. 動画をレンダリング
npx remotion render MyVideo public/videos/my-video.mp4

# 2. サムネイルをレンダリング(Still コンポジションを使用)
npx remotion still MyVideoThumbnail public/videos/my-thumbnail.png

# 3. サムネイルを埋め込む
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --embed-thumbnail public/videos/my-video.mp4 \
  --thumbnail public/videos/my-thumbnail.png \
  --output public/videos/my-video-final.mp4

対応フォーマット

  • 動画: MP4 (H.264/H.265)
  • サムネイル: PNG, JPG, JPEG

埋め込みには ffmpeg の -disposition:v:1 attached_pic フラグを使用して、サムネイルを添付画像として設定します。ほとんどの動画プレイヤーやプラットフォームで認識されます。

タイミングバリデーション

このスキルは生成後、ffprobe を使用して自動的にタイミングを検証します。

チェック内容

チェック項目しきい値説明
長さの不一致>15%実際の長さが予想と異なる場合に警告
先頭の無音>200ms音声の開始が遅い(ナレーションの遅延)
末尾の無音>500ms末尾に不要な無音がある
話速2~4.5 語/秒最適は約3語/秒

既存の音声を検証

# プロジェクト内の全シーンを検証
node .claude/skills/elevenlabs-remotion-skill/generate.js --validate public/audio/product-demo/

出力例:

🔍 product-demo (6 シーン) を検証中

❌ scene1: 3.00秒 (予想: 4.5秒)
   ❌ 音声が予想より1.50秒短い
   👍 8語 @ 3.1語/秒
⚠️ scene2: 6.35秒 (予想: 5.5秒)
   ⚠️ 先頭の無音: 235ms (開始が遅い可能性)
   🐢 10語 @ 1.8語/秒
✅ scene4: 4.36秒 (予想: 4秒)
   👍 9語 @ 2.3語/秒

📊 合計時間: 30.80秒 (予想: 30.00秒)

更新された info.json

検証後、info.json には実際の計測値が含まれます:

{
  "scenes": [
    {
      "id": "scene1",
      "duration": 4.5,
      "actualDuration": 3.0,
      "leadingSilence": 0.05,
      "wordsPerSecond": 3.1
    }
  ]
}

Remotion コンポジションでは actualDuration を使用して正確な同期を実現してください。

オプション

オプション説明デフォルト値
--text, -t音声に変換するテキスト必須 (--file または --scenes がない場合)
--file, -fファイルからテキストを読み込む-
--output, -o出力ファイルパスoutput.mp3
--output-dirシーンの出力ディレクトリpublic/audio
--voice, -v音声名またはIDGeorge
--model, -mモデルIDeleven_multilingual_v2
--character, -cキャラクタープリセットliteral
--scenesシーン定義のJSONファイル-
--scene再生成する単一シーンID-
--new-textシーン再生成用の新しいテキスト-
--validate既存の音声ディレクトリを検証-
--skip-validation自動検証をスキップfalse
--embed-thumbnailサムネイルを埋め込む動画ファイル-
--thumbnailサムネイル画像ファイル (PNG/JPG)-
--stability音声の安定性 (0-1)キャラクターによる
--similarity音声の類似性 (0-1)キャラクターによる
--styleスタイルの強調 (0-1)キャラクターによる
--no-combined連結ファイルを作成しないfalse

推奨音声

音声スタイル最適な用途
George温かみのある魅力的な英国風ナレーション、解説
Antoniプロフェッショナルで温かい法的コンテンツ、チュートリアル
Arnold権威があり、深みのあるコーポレート、シリアスな話題
Joshフレンドリーで会話調マーケティング、カジュアルコンテンツ

Remotion との統合

シーンのナレーションを生成した後、コンポジションで使用します:

import { Audio, Sequence, staticFile } from "remotion";

// 個別のシーン音声ファイルを使用して正確に同期
const SCENE_DURATIONS = {
  scene1: 4.5,  // info.json から
  scene2: 5.5,
  scene3: 8.0,
};

export const VideoWithVoiceover: React.FC = () => {
  const { fps } = useVideoConfig();

  const scene1Frames = Math.round(SCENE_DURATIONS.scene1 * fps);
  const scene2Frames = Math.round(SCENE_DURATIONS.scene2 * fps);

  return (
    <>
      <Sequence from={0} durationInFrames={scene1Frames}>
        <Audio src={staticFile("audio/project/project-scene1.mp3")} />
        <Scene1Visual />
      </Sequence>

      <Sequence from={scene1Frames} durationInFrames={scene2Frames}>
        <Audio src={staticFile("audio/project/project-scene2.mp3")} />
        <Scene2Visual />
      </Sequence>
    </>
  );
};

最良の結果を得るためのヒント

  1. キャラクタープリセットを使用する: 画面上のテキストをそのまま読むのではなく、narrator や expert を使用して自然な流れにしましょう
  2. 句読点が重要: 間隔にはピリオド、短い休止にはカンマを使用します
  3. 数字: 自然な読み上げのために数字は書き出します(「500」ではなく「五百」)
  4. 略語: 完全な単語で書きます(「24h」ではなく「24時間」)
  5. シーンごとに: 異なるシーンに異なるキャラクターを使用できます(劇的なイントロ、落ち着いたCTA)
  6. 微調整: --scene を使用して、全体をやり直さずに個別のシーンだけを再生成します
  7. リクエストスティッチング: 全シーンで一貫した音声を維持します

ワークフロー例

# 1. スクリプトを含む scenes.json を作成
# 2. ナレータースタイルで全シーンを生成
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --scenes remotion/my-video-scenes.json \
  --character narrator \
  --output-dir public/audio/my-video/

# 3. Remotion でプレビューし、scene2 の開始が早すぎることに気づく
# 4. scene2 だけを更新テキストで再生成
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --scenes remotion/my-video-scenes.json \
  --scene scene2 \
  --new-text "映像のタイミングに合わせるため、少し長めのテキスト" \
  --output-dir public/audio/my-video/

# 5. info.json の新しい長さで動画コンポジションを更新
# 6. タイミングが完璧になるまで繰り返す

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

関連スキル