jpskill.com
✍️ ライティング コミュニティ

blog-audio

ブログ記事のテキストをGoogle Gemini TTSで音声ナレーションに変換し、要約版、全文読み上げ、対話形式のポッドキャストなど、30種類の声で表現豊かなMP3音声ファイルを生成するSkill。

📜 元の英語説明(参考)

Generate audio narration of blog posts using Google Gemini TTS. Supports summary narration, full article read-aloud, and two-speaker podcast/dialogue mode with 30 voice options. Outputs MP3 with HTML5 audio embed code. Works standalone via /blog audio or internally from blog-write. Falls back gracefully when API key is not configured. Use when user says "blog audio", "narrate blog", "audio version", "text to speech", "tts", "podcast mode", "read aloud", "audio narration", "voice", "narration", "generate audio".

🇯🇵 日本人クリエイター向け解説

一言でいうと

ブログ記事のテキストをGoogle Gemini TTSで音声ナレーションに変換し、要約版、全文読み上げ、対話形式のポッドキャストなど、30種類の声で表現豊かなMP3音声ファイルを生成するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o blog-audio.zip https://jpskill.com/download/10511.zip && unzip -o blog-audio.zip && rm blog-audio.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/10511.zip -OutFile "$d\blog-audio.zip"; Expand-Archive "$d\blog-audio.zip" -DestinationPath $d -Force; ri "$d\blog-audio.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して blog-audio.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → blog-audio フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Blog Audio -- ブログ記事用の Gemini TTS ナレーション

Google の Gemini TTS を使用して、ブログコンテンツのプロフェッショナルなオーディオナレーションを生成します。 3 つのモード: 要約 (200〜300 語の音声による概要)、記事全文の読み上げ、 または 2 人のスピーカーによるポッドキャスト形式の対話。30 の音声、80 以上の言語、HTML5 埋め込み出力。

クイックリファレンス

コマンド 説明
/blog audio generate <file> ブログ記事のオーディオナレーションを生成します
/blog audio voices 利用可能な音声とその特性を表示します
/blog audio setup Gemini TTS の API キーを確認/設定します

前提条件

  • Python 3.11+ (run.py によって venv が自動的に管理されます)
  • GOOGLE_AI_API_KEY 環境変数 (blog-image で使用されるキーと同じ)
  • FFmpeg (WAV から MP3 への変換用。ない場合は WAV にフォールバック)

常に run.py ラッパーを使用する

# 正しい例:
python3 scripts/run.py generate_audio.py --text "..." --voice Charon --json

# 間違いの例:
python3 scripts/generate_audio.py --text "..."  # venv なしでは失敗します

API キーの確認 (ゲートパターン)

オーディオを生成する前に、API キーを確認してください。

echo $GOOGLE_AI_API_KEY
  • 設定されている場合: 生成に進みます
  • 設定されていない場合: ユーザーをガイドします: "オーディオ生成には Google AI API キーが必要です。https://aistudio.google.com/apikey で無料で入手できます。 次に、export GOOGLE_AI_API_KEY=your-key を設定します。 これは /blog image で使用されるキーと同じです。画像生成が機能する場合、オーディオも機能します。"
  • 内部から呼び出された場合 (blog-write から): キーがない場合は、何もせずに戻ります。 書き込みワークフローをブロックしないでください。

セットアップ

/blog audio setup の場合:

  1. GOOGLE_AI_API_KEY が環境変数に設定されているかどうかを確認します
  2. blog-image が設定されている場合 (.mcp.json を確認)、キーはすでに利用可能です
  3. そうでない場合は、https://aistudio.google.com/apikey にユーザーを誘導します
  4. ドライランで検証します: python3 scripts/run.py generate_audio.py --text "Test" --dry-run --json

音声の選択

/blog audio voices の場合:

references/voices.md をロードし、音声カタログをユーザーに提示します。

ユーザーに好みの音声を選択させるか、コンテンツの種類に基づいて推奨します:

  • 記事のナレーション: Charon (Informative) または Sadaltager (Knowledgeable)
  • チュートリアル/ハウツー: Achird (Friendly) または Sulafat (Warm)
  • ニュース/分析: Rasalgethi (Informative) または Schedar (Even)
  • ライフスタイル/ウェルネス: Aoede (Breezy) または Vindemiatrix (Gentle)
  • 対話のホスト: Puck (Upbeat) または Laomedeia (Upbeat)
  • 対話のエキスパート: Kore (Firm) または Charon (Informative)

生成ワークフロー

/blog audio generate <file> の場合:

ステップ 1: ブログ記事を読み込む

ファイルを読み込み、以下を抽出します:

  • タイトル (H1 または frontmatter から)
  • 全コンテンツ (markdown 本文)
  • おおよその単語数

ステップ 2: モードを選択する

ユーザーに尋ねるか (または --mode が指定されている場合は自動選択):

モード 使用するタイミング 出力
Summary 簡単なオーディオ概要 (1〜2 分) 200〜300 語の音声による要約
Full 完全な読み上げ (5〜15 分) 記事全文を自然な音声で
Dialogue ポッドキャスト形式 (3〜8 分) 記事に関する 2 人の会話

ステップ 3: テキストを準備する

重要: Claude がテキストを準備します。スクリプトは TTS のみを行います。

Summary モード: 記事の 200〜300 語の音声による要約を作成します。ルール:

  • 書き言葉ではなく、自然な話し言葉として書く
  • 記事の重要な発見または答えで始める
  • 3〜5 個の主要なポイントを取り上げる
  • 実用的なアドバイスで締めくくる
  • markdown、"この記事では..."、メタ解説は不要
  • 会話的なトランジションを使用する ("重要なことは...", "主な発見は...")

Full モード: markdown コンテンツを削除して、きれいな話し言葉のテキストにします:

  • 見出しは自然なトランジションになる ("次に、...を見てみましょう")
  • リンクはプレーンテキストになる (URL を削除し、アンカーテキストを保持)
  • 画像とグラフ: 省略するか、簡単に説明する ("データが示すように...")
  • コードブロック: 口頭で説明する ("コードは for ループを使用して...")
  • リスト: 自然な文章に変換する
  • frontmatter、スキーママークアップ、HTML タグを削除する
  • 簡単な紹介を追加する: "これは [title] で、[date] に公開されました。"

Dialogue モード: 記事に関する 2 人の会話スクリプトを作成します:

  • Speaker1 = ホスト (好奇心旺盛で、良い質問をする)
  • Speaker2 = エキスパート (知識が豊富で、明確な答えを出す)
  • 各行を [Speaker1] ここでの重要なポイントは何ですか? のようにフォーマットする
  • 記事の要点を会話形式でカバーする
  • 15〜25 回のやり取り (~3〜8 分)
  • 不自然ではなく、自然な会話 ("研究が示すように、確かに" ではなく "それは素晴らしいポイントです")

ステップ 4: 音声を選択する

ユーザーが音声を選択した場合は、それを使用します。それ以外の場合は、モードに基づいて推奨します:

  • Summary/Full: デフォルトは Charon (Informative)
  • Dialogue: デフォルトは Puck (Host) + Kore (Expert)

ステップ 5: オーディオを生成する

準備されたテキストを一時ファイルに書き込み、次を呼び出します:

# シングルボイス (summary または full モード)
python3 scripts/run.py generate_audio.py \
  --text-file /tmp/blog_audio_prepared.txt \
  --voice Charon \
  --model flash \
  --output /path/to/audio/post-slug.mp3 \
  --json

# 2 つの音声 (dialogue モード)
python3 scripts/run.py generate_audio.py \
  --text-file /tmp/blog_audio_dialogue.txt \
  --voice Puck \
  --voice2 Kore \
  --model pro \
  --output /path/to/audio/post-slug-dialogue.mp3 \
  --json

Model の選択:

  • flash (デフォルト): 高速、安価。要約や標準的なナレーションに適しています。
  • pro: 高品質。dialogue モードまたはプレミアムコンテンツに使用します。

ステップ 6: 配信する

結果をユーザーに提示します:

  1. ファイルパス -- オーディオが保存された場所
  2. 再生時間 -- 人間が読める形式 (例: "3:42")
  3. 埋め込みコード -- すぐに貼り付けられる HTML5 オーディオタグ
  4. コスト -- 推定 API コスト
  5. 配置の提案 -- ブログ記事に埋め込みを挿入する場所

埋め込みガイド

標準 HTML (Hugo, Jekyll, 静的サイト)

<audio controls preload="metadata">
  <source src="audio/post-slug.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

MDX (Next.js, Gatsby)

<audio controls preload="metadata">
  <source src="/audio/post-slug.mp3" type="audio/mpeg" />
</audio>
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Blog Audio -- Gemini TTS Narration for Blog Posts

Generate professional audio narration of blog content using Google's Gemini TTS. Three modes: summary (200-300 word spoken overview), full article read-aloud, or two-speaker podcast dialogue. 30 voices, 80+ languages, HTML5 embed output.

Quick Reference

Command What it does
/blog audio generate <file> Generate audio narration of a blog post
/blog audio voices Show available voices with characteristics
/blog audio setup Check/configure API key for Gemini TTS

Prerequisites

  • Python 3.11+ (venv managed automatically by run.py)
  • GOOGLE_AI_API_KEY environment variable (same key used by blog-image)
  • FFmpeg (for WAV-to-MP3 conversion; falls back to WAV if missing)

Always Use run.py Wrapper

# CORRECT:
python3 scripts/run.py generate_audio.py --text "..." --voice Charon --json

# WRONG:
python3 scripts/generate_audio.py --text "..."  # Fails without venv

API Key Check (Gate Pattern)

Before generating audio, check for the API key:

echo $GOOGLE_AI_API_KEY
  • If set: proceed with generation
  • If not set: guide the user: "Audio generation requires a Google AI API key. Get one free at https://aistudio.google.com/apikey Then set it: export GOOGLE_AI_API_KEY=your-key This is the same key used by /blog image -- if image generation works, audio works too."
  • When called internally (from blog-write): return silently if key is missing. Never block the writing workflow.

Setup

For /blog audio setup:

  1. Check if GOOGLE_AI_API_KEY is set in environment
  2. If blog-image is configured (check .mcp.json), the key is already available
  3. If not, guide user to https://aistudio.google.com/apikey
  4. Verify with a dry run: python3 scripts/run.py generate_audio.py --text "Test" --dry-run --json

Voice Selection

For /blog audio voices:

Load references/voices.md and present the voice catalog to the user.

Ask the user which voice they prefer, or recommend based on content type:

  • Article narration: Charon (Informative) or Sadaltager (Knowledgeable)
  • Tutorial/how-to: Achird (Friendly) or Sulafat (Warm)
  • News/analysis: Rasalgethi (Informative) or Schedar (Even)
  • Lifestyle/wellness: Aoede (Breezy) or Vindemiatrix (Gentle)
  • Dialogue host: Puck (Upbeat) or Laomedeia (Upbeat)
  • Dialogue expert: Kore (Firm) or Charon (Informative)

Generation Workflow

For /blog audio generate <file>:

Step 1: Read the Blog Post

Read the file and extract:

  • Title (from H1 or frontmatter)
  • Full content (markdown body)
  • Approximate word count

Step 2: Choose Mode

Ask the user (or auto-select if they specified --mode):

Mode When to use Output
Summary Quick audio overview (1-2 min) 200-300 word spoken summary
Full Complete read-aloud (5-15 min) Full article as natural speech
Dialogue Podcast-style (3-8 min) Two-person conversation about the article

Step 3: Prepare Text

CRITICAL: Claude prepares the text. The script does TTS only.

Summary mode: Write a 200-300 word spoken summary of the article. Rules:

  • Write as natural speech, not written text
  • Open with the article's key finding or answer
  • Cover 3-5 main takeaways
  • Close with actionable advice
  • No markdown, no "In this article...", no meta-commentary
  • Use conversational transitions ("Here's what matters...", "The key finding is...")

Full mode: Strip the markdown content to clean spoken text:

  • Headings become natural transitions ("Next, let's look at...")
  • Links become plain text (remove URLs, keep anchor text)
  • Images and charts: omit or briefly describe ("As the data shows...")
  • Code blocks: describe verbally ("The code uses a for-loop to...")
  • Lists: convert to natural sentences
  • Remove frontmatter, schema markup, HTML tags
  • Add brief intro: "This is [title], published on [date]."

Dialogue mode: Write a 2-person conversation script about the article:

  • Speaker1 = Host (curious, asks good questions)
  • Speaker2 = Expert (knowledgeable, gives clear answers)
  • Format each line as: [Speaker1] What's the key takeaway here?
  • Cover the article's main points conversationally
  • 15-25 exchanges (produces ~3-8 minutes)
  • Natural, not stilted ("That's a great point" over "Indeed, as the research indicates")

Step 4: Select Voice

If the user chose a voice, use it. Otherwise, recommend based on mode:

  • Summary/Full: default to Charon (Informative)
  • Dialogue: default to Puck (Host) + Kore (Expert)

Step 5: Generate Audio

Write the prepared text to a temp file, then call:

# Single voice (summary or full mode)
python3 scripts/run.py generate_audio.py \
  --text-file /tmp/blog_audio_prepared.txt \
  --voice Charon \
  --model flash \
  --output /path/to/audio/post-slug.mp3 \
  --json

# Two voices (dialogue mode)
python3 scripts/run.py generate_audio.py \
  --text-file /tmp/blog_audio_dialogue.txt \
  --voice Puck \
  --voice2 Kore \
  --model pro \
  --output /path/to/audio/post-slug-dialogue.mp3 \
  --json

Model selection:

  • flash (default): Fast, cheap. Good for summaries and standard narration.
  • pro: Higher quality. Use for dialogue mode or premium content.

Step 6: Deliver

Present the result to the user:

  1. File path -- where the audio was saved
  2. Duration -- human-readable (e.g., "3:42")
  3. Embed code -- ready-to-paste HTML5 audio tag
  4. Cost -- estimated API cost
  5. Placement suggestion -- where to insert the embed in the blog post

Embedding Guide

Standard HTML (Hugo, Jekyll, static sites)

<audio controls preload="metadata">
  <source src="audio/post-slug.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

MDX (Next.js, Gatsby)

<audio controls preload="metadata">
  <source src="/audio/post-slug.mp3" type="audio/mpeg" />
</audio>

WordPress

[audio src="audio/post-slug.mp3"]

Placement

Insert the audio player after the introduction (below the first H2) or at the very top of the article with a label: "Listen to this article" or "Audio version".

Internal API (for blog-write)

When invoked internally from blog-write:

Input:

  • text: Prepared text (already cleaned by Claude)
  • voice: Voice name (default: Charon)
  • voice2: Second voice for dialogue (optional)
  • model: flash or pro
  • output_path: Where to save the file

Output:

### Audio Narration
- **Path:** /path/to/audio/post-slug.mp3
- **Duration:** 3:42
- **Voice:** Charon
- **Embed:** `<audio controls preload="metadata"><source src="audio/post-slug.mp3" type="audio/mpeg"></audio>`

Graceful fallback: If GOOGLE_AI_API_KEY is not set, return immediately with no error. The writing workflow continues without audio. Never block blog-write because audio generation is unavailable.

Error Handling

Error Resolution
GOOGLE_AI_API_KEY not set Get key at https://aistudio.google.com/apikey
FFmpeg not found Install: sudo apt install ffmpeg. Falls back to WAV output.
Rate limited Wait and retry. Check limits at https://aistudio.google.com/rate-limit
Text too long (>32k tokens) Split into sections, generate separately
Unknown voice name Run /blog audio voices to see valid options
API error Check key validity, model availability (preview models)
API key missing (internal call) Return silently -- writing workflow continues

Reference Documentation

Load on-demand -- do NOT load all at startup:

  • references/voices.md -- Full 30-voice catalog, recommendations by content type, dialogue pairings