elevenlabs-remotion

ElevenLabs 音声ナレーションの生成

ElevenLabs API を使用して、Remotion 動画向けのプロ品質の AI 音声ナレーションを生成します。

前提条件

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

クイックスタート

# Generate voiceover from text
node .claude/skills/elevenlabs-remotion-skill/generate.js --text "Your text here" --output public/audio/voiceover.mp3

# Generate with narrator style (more natural)
node .claude/skills/elevenlabs-remotion-skill/generate.js --text "Your text" --character narrator --output voiceover.mp3

# Generate scenes with request stitching
node .claude/skills/elevenlabs-remotion-skill/generate.js --scenes remotion/scenes.json --output-dir public/audio/project/

# Regenerate a single scene
node .claude/skills/elevenlabs-remotion-skill/generate.js --scenes scenes.json --scene scene2 --new-text "Updated text"

# List available voices and character presets
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	心を落ち着かせ、安心感を与える穏やかな声です	信頼の構築、結論

# Use narrator style globally
node .claude/skills/elevenlabs-remotion-skill/generate.js --scenes scenes.json --character narrator --output-dir public/audio/

# Or set per-scene in scenes.json
{
  "scenes": [
    { "id": "scene1", "text": "Problem statement", "character": "dramatic" },
    { "id": "scene2", "text": "Solution", "character": "calm" }
  ]
}

リクエストの連結によるシーン単位の生成

ElevenLabs のリクエスト連結を使って、複数のシーンを一貫したプロソディで生成します。

scenes.json の形式

{
  "name": "product-demo",
  "voice": "George",
  "character": "narrator",
  "scenes": [
    {
      "id": "scene1",
      "text": "Generic text-to-speech sounds robotic. Your brand deserves better.",
      "duration": 4.5,
      "character": "dramatic"
    },
    {
      "id": "scene2",
      "text": "With voice cloning, you can use your own voice for unlimited content.",
      "duration": 5.5
    },
    {
      "id": "scene3",
      "text": "Record a short sample. Clone it. Create professional voiceovers in minutes.",
      "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（再生時間を含むメタデータ）

単一シーンの再生成

シーンの開始が早すぎる場合、タイミングが間違っている場合、またはテキストを変更する必要がある場合は、次のようにします。

# Regenerate scene2 with new text
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --scenes remotion/scenes.json \
  --scene scene2 \
  --new-text "Updated scene 2 text" \
  --output-dir public/audio/project/

# Regenerate scene3 with different character
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --scenes remotion/scenes.json \
  --scene scene3 \
  --character salesperson \
  --output-dir public/audio/project/

# Just regenerate (same text, same character)
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --scenes remotion/scenes.json \
  --scene scene1 \
  --output-dir public/audio/project/

# Embed a thumbnail into an MP4 video
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、動画プレーヤーなどのプラットフォームで、最初のフレームではなくカスタムサムネイルが表示されます。

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

# Basic usage - outputs to video-thumb.mp4
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --embed-thumbnail public/videos/promo.mp4 \
  --thumbnail public/videos/thumbnail.png

# Custom output path
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. Render your video
npx remotion render MyVideo public/videos/my-video.mp4

# 2. Render your thumbnail (use Still composition)
npx remotion still MyVideoThumbnail public/videos/my-thumbnail.png

# 3. Embed the thumbnail
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 wps	最適値は約 3 語／秒です

既存の音声を検証

# Validate all scenes in a project
node .claude/skills/elevenlabs-remotion-skill/generate.js --validate public/audio/product-demo/

出力例：

🔍 Validating product-demo (6 scenes)

❌ scene1: 3.00s (expected: 4.5s)
   ❌ Audio 1.50s shorter than expected
   👍 8 words @ 3.1 words/sec
⚠️ scene2: 6.35s (expected: 5.5s)
   ⚠️ Leading silence: 235ms (may start late)
   🐢 10 words @ 1.8 words/sec
✅ scene4: 4.36s (expected: 4s)
   👍 9 words @ 2.3 words/sec

📊 Total duration: 30.80s (expected: 30.00s)

更新された 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	音声の名前または ID	George
--model、-m	モデル ID	eleven_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";

// Use individual scene audio files for precise sync
const SCENE_DURATIONS = {
  scene1: 4.5,  // From 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」ではなく「five hundred」のように綴ります
4. 略語：「24h」ではなく「twenty-four hours」のように、省略せずに書きます
5. シーンごとに設定する：シーンごとに異なるキャラクターを使えます（ドラマチックな導入、落ち着いた CTA など）
6. 微調整する：--scene を使うと、すべてをやり直さずに個別のシーンを再生成できます
7. リクエストのスティッチング：すべてのシーンで音声の一貫性を保ちます

ワークフローの例

# 1. Create scenes.json with your script
# 2. Generate all scenes with narrator style
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --scenes remotion/my-video-scenes.json \
  --character narrator \
  --output-dir public/audio/my-video/

# 3. Preview in Remotion, notice scene2 starts too early
# 4. Regenerate just scene2 with updated text
node .claude/skills/elevenlabs-remotion-skill/generate.js \
  --scenes remotion/my-video-scenes.json \
  --scene scene2 \
  --new-text "Slightly longer text to fill the visual timing" \
  --output-dir public/audio/my-video/

# 5. Update video composition with new duration from info.json
# 6. Repeat until timing is perfect