TTS

ブラウザで扱える日本語TTSの選択肢を整理した — Web Speech API / Piper / VOICEVOX / クラウド

ブラウザで扱える日本語TTS — 選択肢比較のイメージイラスト
ブラウザから呼べる日本語TTSの選択肢を整理

なにを調べたか

個人開発中のとあるアプリで、日本語の読み上げを入れたくなりました。どんなアプリかは完成したら改めて書きますね。

「ブラウザから呼び出せて、日本語をそれなりに自然に読み上げてくれる方法」という条件で、候補になりそうな選択肢を並べて調べたので、選定用の比較メモとして残しておきます。

前提として、実際に触ったのは Web Speech API と Piper (つくよみちゃんモデル) の 2 つだけです。それ以外は公式ページとサンプル音声ベースの机上調査なので、その前提でどうぞ。

先に見取り図を置いておきます (料金は執筆時点の公式ページベース、詳細は本文で)。

方式音質料金オフラインデータの送信先
Web Speech API (SpeechSynthesis)OS/ブラウザ依存無料○ (OS音声)△ (ネット音声の場合あり)
Piper TTS (onnxruntime-web)中無料◎送信なし
VOICEVOX (自ホスト)高サーバー代○自前サーバー
Google Cloud TTS Neural2高$16 / 1M 文字×Google
Amazon Polly Neural高$16 / 1M 文字×AWS
Azure Speech Neural高$16〜22 / 1M 文字×Microsoft
OpenAI TTS中〜高$15 / 1M 文字〜×OpenAI
ElevenLabs Multilingual v3非常に高$0.12 / 1k 文字前後×ElevenLabs

順番に見ていきます。

1. Web Speech API (SpeechSynthesis)

ブラウザ標準の TTS です。これで済むなら一番楽です。

const utter = new SpeechSynthesisUtterance('こんにちは、世界');
utter.lang = 'ja-JP';
utter.rate = 1.0;
utter.pitch = 1.0;
speechSynthesis.speak(utter);

日本語ボイスを選びたいときは、getVoices() を voiceschanged イベント待ちで取る必要があります。ここを忘れると初回ロードで空配列が返ってくるので、地味にハマりやすいです。

function getJaVoices() {
  return new Promise((resolve) => {
    const voices = speechSynthesis.getVoices().filter(v => v.lang.startsWith('ja'));
    if (voices.length > 0) return resolve(voices);
    speechSynthesis.addEventListener('voiceschanged', () => {
      resolve(speechSynthesis.getVoices().filter(v => v.lang.startsWith('ja')));
    }, { once: true });
  });
}

嬉しいところ

  • 無料、API キー不要、即時再生
  • OS 音声ならオフラインで動く

つらいところ

  • OS とブラウザの組み合わせでボイスの傾向が違う
    • macOS Safari: Kyoko
    • Windows Chrome: Haruka など
    • Android Chrome: Google 日本語 (ネット音声)
    • iOS Safari: Kyoko / Siri 音声
  • Chrome ではネット経由の音声を取りに行くことがあって、完全オフラインとは言い切れない
  • SSML が使えないので、間の制御や「ここだけピッチ上げて」みたいな微調整が難しい
  • ブラウザによっては長めの入力で途中で切れるケースがあるので、長文は適度に区切って speak() を連打するのが無難

実際に触った感想

名前の並びを見て「音質バラつきそう」と勝手に身構えていたのですが、触ってみるとそこまで悪くなかったというのが正直なところです。

等速だと少し機械的に感じても、1.2倍速ぐらいに上げると、ゆっくりめの動画を見るときの感覚でそれなりに聞けます。プロトタイプはもちろん、用途によってはプロダクトに乗せる選択肢にも十分入ってきそうな手応えでした。

2. Piper TTS (ブラウザ完結 / onnxruntime-web)

Piper は Rhasspy 発の軽量ニューラルTTSで、ONNX モデルを onnxruntime-web で動かすとブラウザ内だけで完結します。

日本語モデルは公式の Piper 本家には無いのですが、piper-plus などのコミュニティプロジェクトで日本語対応モデルが配布されています。@mintplex-labs/piper-tts-web のような npm パッケージもあるので、フロントエンドにそのまま組み込めます。

嬉しいところ

  • テキストが一切外に出ない (ブラウザ内完結)
  • API キーもサーバーも不要
  • 追加料金ゼロ

つらいところ

  • モデルが数十MB〜数百MB、初回ダウンロードが重い
  • 日本語の自然さ (特に固有名詞・アクセント) はモデル次第なので、候補モデルの公開サンプルを聞いて選ぶ必要あり
  • 初回のモデル初期化で端末スペックに差が出る

実際に触った感想 (つくよみちゃんモデル)

公開されているつくよみちゃんの Piper モデルで試しました。

  • 声質自体は良い。想像よりしっかり自然で、キャラっぽさもちょうどいい感じ
  • ただ、等速でも読み上げがやや早めに感じる場面があって、聞いていて少し詰まって聞こえるときがありました
  • 合成時のパラメータ (length_scale 相当) で調整できるはずなので、ちゃんとチューニングすればかなり気持ちよく聞けそう、という手応えです

機密性の高いテキストを読み上げたい用途 (社内メモの読み上げとか) では一番安心な選択肢ですね。モデルとパラメータの組み合わせで詰めてナンボ、という印象でした。

3. VOICEVOX

VOICEVOX はずんだもん・四国めたんなどでおなじみの、無料で使える国産TTSエンジンです。音質はかなり高く、動画ナレ用途だと定番ですね。

ローカルエンジン運用

PC 上の VOICEVOX を立ち上げると http://localhost:50021 で HTTP API が開きます。

// 1. クエリ生成
const q = await fetch(
  `http://localhost:50021/audio_query?text=${encodeURIComponent(text)}&speaker=1`,
  { method: 'POST' },
);
const query = await q.json();

// 2. 音声合成
const r = await fetch('http://localhost:50021/synthesis?speaker=1', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(query),
});
const wav = await r.arrayBuffer();

利用者のPCで VOICEVOX が立ち上がっている前提なので、一般公開する Web アプリでは現実的ではないです。動画制作者向けとかなら別ですが。

サーバー側で運用する

Docker イメージが公式で配布されているので、サーバー側で常駐させて自分でAPIを叩くパターンもあります。

docker run --rm -p '127.0.0.1:50021:50021' voicevox/voicevox_engine:cpu-latest

CPU 版でも動きますが、長文合成はそこそこ重めで、同時アクセスが増えると CPU / メモリを食います。個人開発でずっと立ち上げっぱなしにするとランニング代がかかってきます。

クレジット表記

VOICEVOX の音声キャラごとに「VOICEVOX:ずんだもん」のようなクレジット表記が必須です。キャラごとに利用規約が違うので、公式の利用規約 は都度確認してください。商用利用には別途ライセンスが必要なキャラもあります。

4. クラウドTTS

音質と安定性を取るなら、結局ここになります。

Google Cloud Text-to-Speech

  • WaveNet / Neural2 / Studio / Chirp3 系列
  • 日本語 Neural2 ボイス: ja-JP-Neural2-B (女) / ja-JP-Neural2-C (男) / ja-JP-Neural2-D (男)
  • 料金: Neural2 は $16 / 100万文字、月100万文字までの無料枠あり
  • SSML 対応、Google Cloud 全般の認証に乗せやすい

Amazon Polly

  • Neural 日本語ボイス: Takumi (男)、Kazuha (女)、Tomoko (女)
  • 料金: Neural で $16 / 100万文字
  • 音声ストリーミング API あり、long-form は現状英語のみ

Azure AI Speech

  • Neural 日本語ボイス: ja-JP-NanamiNeural (女) / ja-JP-KeitaNeural (男) ほか多数
  • 料金: Neural で $16 / 100万文字、Neural HD は $22 / 100万文字 くらい
  • SSML のスタイル制御 (chat / cheerful / customerservice) やプロソディ細かめで一番表現力あり

クラウド3社は音質・料金ほぼ横並びです。既存のクラウド契約がある方に寄せるのが現実解かなと。

OpenAI TTS

  • モデル: tts-1 / tts-1-hd / gpt-4o-mini-tts
  • voice: alloy echo fable onyx nova shimmer ほか
  • 料金: tts-1 で $15 / 100万文字 (執筆時点)
  • 多言語モデルなので日本語もそのまま読めます。公開サンプルを聞いた限りではニュース調の朗読はわりと自然、カジュアル会話調だと英語圏のイントネーションが残る感じはありそう

ElevenLabs

  • Multilingual v2 / Turbo v2.5 / Flash v2.5 / Multilingual v3 で日本語対応
  • 料金: Multilingual v3 でおおよそ $0.12 / 1000文字前後 (プランで変動)
  • 声の種類が圧倒的に多い、自作クローンも可
  • 1文字あたりで見ると他より一桁近く高めですが、朗読クオリティは頭ひとつ抜けてるとよく言われます。長文を小説朗読みたいに読ませたい用途ならここが第一候補になりそうです

ブラウザから呼ぶときのポイント

クラウド TTS をブラウザから直接呼ぶのはやめたほうが良いです。API キーがフロントエンドに露出します。

一般的にはこの構成です。

ブラウザ → 自分のサーバー (Workers / Lambda / Edge Functions) → クラウドTTS
         ← 音声バイナリ (ストリーミング可)

Cloudflare Workers / AWS Lambda / Vercel Edge Functions あたりに薄い中継を挟めば、

  • APIキー漏洩を防げる
  • レート制限 / 認証チェックをサーバー側でかけられる
  • 意図しない連打でコストが跳ねるのを止められる

の3つをまとめて面倒見られます。

OpenAI TTS や Google TTS はレスポンスがストリーミングで返せるので、Workers からそのまま ReadableStream でブラウザに流すと、再生開始までの体感が結構変わります。長文でも「数秒待たされる」感が減るのでおすすめです。

比較表 (改めて)

方式音質1万文字あたり概算実装コスト向いてる用途
Web Speech APIOS依存無料極小プロトタイプ / 読み上げ補助
Piper (WASM)中無料中機密テキスト / 完全オフライン
VOICEVOX 自ホスト高サーバー代中〜大キャラ音声 / 動画ナレ
Google / AWS / Azure高約25円中プロダクト用途全般
OpenAI TTS中〜高約22円小多言語 / プロトタイプ
ElevenLabs非常に高170円前後〜中朗読・長文コンテンツ

※ $1 = 150円換算、執筆時点

今の感触と、これから試したいもの

アプリ本体がまだ完成していないので、最終的にどれを採用したかは完成後の記事で改めて書こうと思います。現時点の感触をメモしておくと、

  • Web Speech API: 思っていたより実用的。1.2倍速ぐらいに上げればわりと聞けるので、候補から落とすつもりはないです
  • Piper (つくよみちゃん): 声質は良いが読み上げ速度がやや早めで、パラメータ調整次第で化けるかどうか要検証
  • VOICEVOX (ずんだもん) と Gemini 3 系の TTS も、このあと触ってみる予定
  • クラウドTTS各社は、触ってみた上で実装の手間と料金感を見て決めたい

という感じで、まだ絞り込み中です。触った結果と最終的な採用先は、アプリ公開のタイミングで書きますね。

まとめ

  • とりあえず動かすだけ なら Web Speech API で3行
  • 機密性重視 / 完全オフライン なら Piper (onnxruntime-web)
  • キャラ音声・動画ナレ なら VOICEVOX
  • プロダクト汎用 ならクラウドTTS (Google / AWS / Azure / OpenAI)
  • 朗読クオリティ振り切り なら ElevenLabs
  • ブラウザから呼ぶなら APIキーはサーバーで中継

選択肢が多くて迷うのですが、「品質・料金・データがどこに流れるか」の3点で並べると、用途ごとにだいたい1〜2個に絞れる感じでした。どなたかの参考になれば。

#TTS #JavaScript #Web API #AI #個人開発