google-ai-studio-tts

Google AI Studio TTS（ブラウザー操作）

概要

このスキルは、ユーザーがすでに開いている Chrome で https://aistudio.google.com/generate-speech を（claude-in-chrome MCP ツール経由で）操作し、Gemini Flash TTS で音声を生成します。ユーザーは Chrome で Google AI Studio にすでにサインインしている必要があります。アカウントの作成、パスワードの入力、認証情報の共有は決して行わないでください。

UI には 2 つの入力モードがあります。ユーザーの依頼に応じて選択してください。

ユーザーの意図	モード	理由
ナレーター 1 人、独白、または短いナレーション	Text	テキストエリアが 1 つで、最も手早く操作できます。
Speaker 1: … のようなシンプルな行で構成された複数話者の会話	Text	テキストエリアは同じく 1 つです。各行の先頭に Speaker 1:、Speaker 2: を付けます。
行ごとに話者チップを設定したい、より細かく制御したい、簡単に編集したい複数話者の会話	Composer	発話ごとにブロックが 1 つあり、それぞれに独自の音声チップがあります。
ユーザーが「scene」「sample context」「director's note」に明示的に言及する場合、または話者チップを表示したい場合	Composer	ユーザーが言及している UI 要素が表示されます。

どちらのモードでも、Scene と Sample Context のフィールド、および右側の Speaker settings パネルを使用します。

必須ツール

開始する前に、ToolSearch で以下の claude-in-chrome MCP ツールを読み込んでください。

select:mcp__claude-in-chrome__tabs_context_mcp,mcp__claude-in-chrome__tabs_create_mcp,mcp__claude-in-chrome__navigate,mcp__claude-in-chrome__find,mcp__claude-in-chrome__form_input,mcp__claude-in-chrome__javascript_tool,mcp__claude-in-chrome__computer

最初から最後までのワークフロー

1. ページを開く

tabs_context_mcp({ createIfEmpty: true })
navigate({ tabId, url: "https://aistudio.google.com/generate-speech?model=gemini-3.1-flash-tts-preview" })

選択したモデルが利用できず、AI Studio が別のモデル（例：gemini-3.1-flash-tts-preview）に自動で切り替えたことを示すバナーが URL に表示されている場合は、そのまま受け入れてください。リダイレクトを無理に変更しないでください。続行する前に、バナーの閉じる（「X」）ボタンをクリックして閉じてください。閉じないと Run コントロールが隠れてしまいます。

2. モードを選択する

2 つの切り替えボタンは、プレイグラウンドの右上にあります。

// Switch to Composer
document.querySelectorAll('button.toggle-button').forEach(b => {
  if (b.innerText.trim().endsWith('Composer')) b.click();
});
// or for Text
document.querySelectorAll('button.toggle-button').forEach(b => {
  if (b.innerText.trim().endsWith('Text')) b.click();
});

選択中の切り替えボタンには ms-button-active クラスが付いています。

3. 共通フィールドに入力する

どちらのモードでも、以下を使用します。

• Scene（音響的・状況的な枠組みを設定）：textarea[aria-label="Scene"]
• Sample Context（モデルにトーンの参考情報を与える）：textarea[aria-label="Sample Context"]

これらは Angular のテキストエリアです。単に el.value = ... を実行しても Angular のフォームバインディングは作動しません。references/selectors.md のヘルパーを使うか、find で取得した ref を使って form_input MCP ツールを使用してください。

ユーザーから scene / sample context が提供されていない場合は、これらのフィールドを空のままにしてください。これらは任意です。

4a. 入力する — Text モード

テキストエリアは 1 つです：textarea[aria-label="Enter a prompt"]。

書式の慣例（UI では検証されませんが、モデルの学習で使用されている形式です）：

• ナレーター 1 人：テキストをそのまま入力します。任意で、例のようにインラインタグを先頭に付けることもできます：[warm] 本日のエピソードへようこそ。
• 複数話者：各行の先頭に Speaker 1:、Speaker 2: などを付けます。

Speaker 1: [enthusiastic] Welcome back to the show!
Speaker 2: [agreement] Thanks, glad to be here.

インラインタグの一覧については、references/audio-tags.md を参照してください。

4b. 入力する — Composer モード

Composer では、発話ごとに speech block が 1 つ表示されます。各ブロックには以下があります。

• 話者チップ：button.voice-chip.ms-button-filter-chip（表示テキストは Speaker N - VoiceName）
• テキストエリア：textarea[aria-label="Speech block text"]

新しいブロックを追加するには、button.add-speech-block-button をクリックします。新しいブロックには、デフォルトで直前のブロックの話者が引き継がれます。

スクリプトから Composer に入力するには：

1. 既存のブロックが必要な内容と一致していることを確認します（必要であれば、ブロックごとの「×」ボタンで余分なブロックを削除します）。
2. スクリプトの各行に対応するブロックがあることを確認します。必要に応じて「add speech block」をクリックし、ブロックを追加します。
3. 各ブロックのテキストを設定します（DOM 順に並んだ textarea[aria-label="Speech block text"]）。
4. ブロックごとに話者チップを設定します（ステップ 5 を参照）。

5. 音声を選択する

右側のSpeaker settingsパネルには、アクティブなスピーカーごとにカードが表示されます（Speaker 1、Speaker 2、…）。カードをクリックすると、32種類の音声が揃った音声選択ドロワーが開きます。各音声の特徴については、references/voices.mdの全カタログをご覧ください。

音声選択ドロワーでは、次の操作ができます。

• Audio Profile — 自由記述欄です。例：「権威あるメインニュースキャスター」
• Director's note — 3つのドロップダウンがあります。Style（例：Vocal Smile）、Pace（例：Rapid Fire）、Accent（例：American (Gen)）を選択します。
• Voice — 検索可能なリストです。音声をクリックして選択します。

操作が終わったら、ドロワーの右上にある×をクリックして閉じます。プレイグラウンドのアクティブな音声カードには、クラスactive-voice-cardが設定されています。

Composer モードでは、各ブロックの音声チップを個別に変更できます。チップをクリックするとポップオーバーが開き、そのブロックに Speaker 1、Speaker 2、…を割り当てるか、新しいスピーカーを追加できます。

6. （任意）Temperatureを調整する

「Model settings」を展開すると（右側のパネルのSpeaker settingsの上）、Temperatureが表示されます。範囲は0～2、デフォルトは1です。数値入力欄は、「Temperature」ラベルの近くにあるinput.slider-number-inputです。値が高いほど、読み上げ方のバリエーションが増えます。ユーザーから依頼された場合に限り、変更してください。

7. 生成を実行する

右下にあるbutton.ctrl-enter-submits（「Run Ctrl ↵」ボタン）をクリックするか、プロンプトエリアにフォーカスがある状態でCtrl+Enterを押します。

document.querySelector('button.ctrl-enter-submits').click();

生成には通常、長さに応じて5～30秒かかります。音声プレーヤーの長さカウンター（右側の0:00 / X:XX）がレンダリング完了後に更新されるか、ダウンロードアイコンが有効になるのを確認して、完了を待ちます。

8. 引き渡し／ダウンロード

音声の準備ができたことをユーザーに伝え、再生コントロールを案内します。ダウンロードするかどうかはユーザーが決めます。ユーザーからファイルを求められた場合に限り、ダウンロード（雲と矢印）アイコンをクリックしてください。

プロンプト作成のスタイルガイド

• インラインタグはスピーカーの行に含めます。例：Speaker 1: [whispers] don't tell anyone。複数行にまたがって適用されることはありません。
• Sceneには音響と設定を記述し、台本は記述しません。悪い例：「Speaker 1 says hi」。良い例：「静かなキッチン、朝の光、残響は最小限。」
• Sample Contextには読み上げのトーンを記述します。例：「ポッドキャスト風。テンポが速く、やや発話が重なり、活気があり温かい雰囲気。」
• 2人ホストのポッドキャストでは、Puck（明るく弾む／中音域）とZephyr（明るい／高音域）がAI Studioのデフォルトであり、無難な組み合わせです。別の候補については、references/voices.mdをご覧ください。

やってはいけないこと

• サインイン、新しい利用規約への同意、アカウント設定の変更はしないでください。これらは禁止されています。
• ユーザーから明示的に依頼されない限り、生成した音声をダウンロードしないでください。
• レンダリング中にAI Studioのタブから移動しないでください。
• 存在しない音声名を作らないでください。カタログには32種類の音声が登録されています（references/voices.mdを参照）。ユーザーがリストにない音声を求めた場合は、最も近い音声を提案してください。
• inputイベントとchangeイベントを発生させずに、Angularのテキストエリアでel.value = "…"を実行しないでください。フォームの値が元に戻ります。references/selectors.mdのヘルパーまたはform_inputを使用してください。