🐡
ブラウザ完結でChatGPTの応答をVOICEVOXで喋らせたい
ブラウザ完結というタイトルですがVOICEVOXサーバーはローカルPC上の別プロセスで動作してます。
動作環境
- Mac (M1)
- Chrome
- VOICEVOX Engine
成果物
以下で公開してます。
見た目はこんな感じです。
以下、ポイントの抜粋です。
VOICEVOXの起動
以下の記事を参考にしました。
VOICEBOX Engineをダウンロードしてきて起動するだけです。
起動コマンドは以下。ブラウザから呼び出すのでCORSを許可してもらう必要があります。
./run --cors_policy_mode all
起動していれば以下のURLをブラウザ開けばAPI仕様が見れます。
ChatGPTを呼び出す（ストリーミングで）
以下の記事を参考にしました。
VOICEVOXに喋ってもらう
先程のストリーミング処理をしながら、文章の区切りで逐次音声合成します。
句読点や「！」「？」などが登場すると、そこで一度VOICEVOXに投げます。
const finishChars = ["。", "、", "!", "！", "?", "？", "\n"];
あまり綺麗なプログラムにはなっていないかもしれませんが、注意点としては文章の長さで音声合成にかかる時間が変わるため、何も考えずに処理すると追い抜きが発生してしまいます。発声順が狂わないようにして上げる必要があります。
以上
APIキーの部分を書き換えて、HTMLファイルをブラウザで開けば動くはずです。
Authorization: `Bearer ここにAPIキーを書く`,
もっとこうした方が早い、もっとこうした方が発声が自然になる、などあれば教えて下さい。
Discussion