入力したテキストを四国めたんが読み上げるフローを完全ローカルで構築

公開日: 2026/03/25 / 更新日: 2026/03/28

WEB

ブラウザで入力された文章を、PC内のVOICEFOXサーバーと連携して、完全ローカルで読み上げ機能を実装する。

VOICEVOXをPCにインストールする。

方法は２つあって、公式サイトからデスクトップアプリをダウンローするか、Dockerイメージをダウンロードするか。今回はAPIにしか用事がないためDockerでいく。

Dockerを起動する ↓

open -あ Docker

以下のコマンドを入れる ↓

docker pull --platform linux/amd64 voicevox/voicevox_engine:cpu-ubuntu20.04-latest
docker run --rm -p 50021:50021 --platform linux/amd64 voicevox/voicevox_engine:cpu-ubuntu20.04-latest

これで、 http://localhost:50021にて、四国めたんやずんだもんなど全員が聞き耳を立てて待機してくれるようになる。試しに、http://localhost:50021/docsにアクセスしてみるとFastAPIのSwagger UIが表示される。

WEBアプリ実装

シンプルに単一htmlファイルで ↓

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>四国めたん音読</title>
</head>
<body>
    <h1>四国めたん音読</h1>
    <input type="text" id="inputText" placeholder="文章を入力" size="50">
    <button onclick="playVoice()">再生</button>

    <script>
        async function playVoice() {
            const text = document.getElementById('inputText').value;
            const speakerId = 2; 

            if (!text) {
                alert("空欄です");
                return;
            }

            try {
                const queryRes = await fetch(`http://localhost:50021/audio_query?text=${encodeURIComponent(text)}&speaker=${speakerId}`, {
                    method: 'POST'
                });
                const queryJson = await queryRes.json();

                const synthRes = await fetch(`http://localhost:50021/synthesis?speaker=${speakerId}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(queryJson)
                });
                const audioBlob = await synthRes.blob();

                const audioUrl = URL.createObjectURL(audioBlob);
                const audio = new Audio(audioUrl);
                audio.play();

            } catch (error) {
                console.error("エラー:", error);
                alert(error + "のエラー");
            }
        }
    </script>
</body>
<div>提供：VOICEVOX:四国めたん</div>
</html>

入力されたtextとspeakerId（四国めたんは２番！）を定義しておく。API通信は２段階に分けて行う。クエリ作成と音声合成の順だ。まず、audio_queryというクエリ作成エンドポイントにtextとspeakerIdを送ることで、このテキストをこのキャラクターが読んだ時の、アクセントやイントネーションをどうするかについて決めたデータを作ってもらい、そのデータをqueryJsonに保存する。次に、synthesisという音声合成エンドポイントにqueryJsonを送りつけて音声データを返してもらう。あとは、これをブラウザで再生することで音読アプリの完成だ。（利用規約に従って、クレジット表記も入れてある。）

実際に使ってみると、本物とアナウンスと聞き間違えるくらいに滑らかで心地がいい。ただ、再生ボタンを押してから実際に再生されるまでの時間は文章の長さによって大きく差が出る。例えば、上の画像の場合は７秒くらいかかるが、”あ”なら２秒程度で再生される。とはいえ、完全ローカル環境でここまで中品質な体験ができるのは素晴らしいことだと思った。