JavaScript と Node.js でテキスト読み上げ

JavaScript から話す2つの方法

ちょっとした読み上げボタンなら Web Speech API で十分。製品の声ならエンジンを使いましょう。

• Web Speech API：ブラウザーで1行、speechSynthesis.speak(new SpeechSynthesisUtterance("Hello!"))。OS やブラウザーの声を使います。
• 声は Windows、macOS、Android、ブラウザーごとに異なり、一部はオンラインサービスで、音声をファイルに保存できません。
• SuperClonica：どの端末でも同じ自然な声、キャラクターの声や独自の声、保存やキャッシュができる WAV ファイルを返すローカルサーバー。
• 31言語を話します。中国語はまだ対応していません。

エンジンの声を無料で聴く

コードを書く前に、どれかの声のページで30〜100文字のフレーズを入力し、言語を選んで生成ボタンを押しましょう。数秒で、アプリに持たせられる声を聴けます。アカウントは不要です。

ローカル音声サーバーを起動

NVIDIA のグラフィックカードがあれば cuda イメージで速くなりますが、必須ではありません。

• どのCPUでもサーバーを起動：docker run -d -p 8000:8000 -v superclonica-models:/models superclonica/superclonica:cpu。
• 初回起動で Supertonic 3 モデル（約385 MB）をボリュームにダウンロードします。準備ができたかは GET /health でわかります。
• POST /synthesize は text、voice、lang、seed、normalize を含む JSON を受け取り、16ビットモノラルの WAV を返します。
• voice は標準名 M1〜M5、F1〜F5、または声のファイルを読み込んだ中身です。

Node.js とブラウザーから呼び出す

Node.js 18 以降では fetch が組み込みなので、fs を読み込めばリクエストは数行です：const voice = JSON.parse(fs.readFileSync("voice.json", "utf8")); const res = await fetch("http://localhost:8000/synthesize", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text: "Node からこんにちは！", voice, lang: "ja", seed: 7 }) }); fs.writeFileSync("hello.wav", Buffer.from(await res.arrayBuffer())); Web アプリでは音声サーバーを非公開にし、自前のバックエンドから呼び出します。ページは音声を blob として受け取り、new Audio(URL.createObjectURL(blob)).play() で再生します。同じテキスト、声、seed なら常に同じファイルになるので、繰り返し使うフレーズの音声はキャッシュしましょう。

本番運用のコツ

ポート 8000 をそのままインターネットに公開しないでください。SUPERCLONICA_API_KEY を設定して Bearer トークンとして送るか、HTTPS のリバースプロキシの後ろに置くか、プライベートネットワーク内に置きましょう。同時リクエストが多いなら SUPERCLONICA_LANES でモデルのコピーを増やし、自分のハードウェアで計測してください。私たちのテストでは短いフレーズが RTX 5070 Ti で 0.12 秒、CPU 4スレッドで 0.43 秒でした。