Web開発音声読み上げ

Svelteに音声読み上げを追加する方法

TTS2Goを使って、ブラウザTTSによるフォールバックとAI音声を組み合わせ、Svelteアプリに低コストで高品質な音声読み上げを追加する方法を解説します。

Anthony Morris·
Svelteに音声読み上げを追加する方法

Svelteはシンプルさとパフォーマンスを重視して作られており、Svelteアプリへの音声読み上げ（TTS）の追加も同じくらい簡単です。

コンテンツのアクセシビリティを高めたい、音声で読む体験を作りたい、音声フィードバックを加えたい。どんな目的でも、TTSは数分で組み込めます。このガイドでは、ブラウザの音声合成の仕組み、TTSの各アプローチのトレードオフ、そしてSvelteプロジェクトでTTS2Goを動かす方法を解説します。

ブラウザの音声合成の仕組み

最近のブラウザにはWeb Speech APIが搭載されており、window.speechSynthesis.speak() に SpeechSynthesisUtterance を渡して呼び出すことで、テキストを読み上げられます。

主な特徴：

  • 依存関係なし：すべてブラウザ内で動作します。
  • APIキーもサーバー呼び出しも不要：バックエンドとの連携は必要ありません。
  • 費用なし：システムに組み込まれた音声を使います。

ただし、トレードオフもあります。

  • ロボットのような、ばらつきのある品質：声が合成音声らしく聞こえることが多い。
  • プラットフォーム依存：ChromeとFirefox、macOSとWindowsで声が異なる。
  • 限られたボイスの選択肢：最新のAI TTSに比べ、対応言語やスタイルが少ない。

AI生成音声の台頭

ニューラル音声読み上げモデルは、リアルなイントネーションとテンポを備えた自然な音声を生成します。多くの言語、アクセント、話し方のスタイルに対応しており、本番品質のナレーションや音声体験に最適です。

トレードオフ：

  • メリット：
  • 高品質で自然な音声
  • 幅広い言語とボイスに対応
  • デバイスやブラウザを問わず一貫した音質
  • デメリット：
  • コスト：生成した音声の文字数または秒数に応じて課金される。
  • API呼び出し：サーバー側、または認証付きのクライアント側での連携が必要。

ここで設計上の問いが生まれます。音声品質と生成コストのバランスをどう取り、音声をいつ作成するかをどう制御すればよいのでしょうか。

音声の事前生成

ひとつの方法は、すべてのコンテンツの音声を事前に生成し、CDNでホストすることです。

仕組み：

  • すべてのテキストコンテンツを事前に音声ファイルへ変換する。
  • そのファイルをアップロードしてCDNから配信する。
  • ユーザーは生成の待ち時間なしに即座に再生できる。

メリット：

  • すべての訪問者がすぐに再生できる
  • 一貫した高品質な音声
  • 実行時の動作がシンプル（ファイルを再生するだけ）

デメリット：

  • 一度も再生されないかもしれないコンテンツの音声生成にも費用がかかる。
  • すべてのコンテンツを事前に把握しておく必要がある。
  • コンテンツを変更するたびに再生成が必要になる。
  • ストレージとCDNのコストがコンテンツ量に比例して増える。

動的なコンテンツや頻繁に更新されるコンテンツの場合、この方法はすぐに高コストになり、運用の負担も大きくなります。

オンデマンドの遅延生成

別の戦略として、ユーザーが実際に再生ボタンを押したときにだけ音声を作成する、オンデマンド（遅延）生成があります。

仕組み：

  • ユーザーがあるコンテンツの音声をリクエストしたら、TTS APIを呼び出す。
  • 生成された音声をキャッシュまたは保存する。
  • 以降のリクエストでは、キャッシュされた音声を再利用する。

メリット：

  • はるかに費用対効果が高い：ユーザーが実際に聴いたコンテンツの分だけ支払えばよい。
  • 動的なコンテンツやユーザー生成コンテンツにも自然に対応できる。
  • 使われないコンテンツのための無駄な生成を減らせる。

課題：

  • 制御がなければ、誰もが高額な音声生成を引き起こせてしまう。
  • どのコンテンツに、いつ音声を付けるかを制限する仕組みが必要。
  • ユーザー体験（最初の待ち時間）と予算管理のバランスを取る必要がある。

TTS2Goによる解決策

TTS2Goは、ブラウザTTSとAI TTSを組み合わせることで、品質・コスト・シンプルさのバランスを実現します。

主な考え方：

  1. クライアント側に置いても安全なキー
  • フロントエンド用のAPIキーを使って、サイトにTTS2Go SDKを追加します。

ステップ1：SDKをインストールする

TTS2GoのSvelteパッケージをインストールします。


npm install @tts2go/svelte

このパッケージはSvelte 5に対応しており、Svelteのリアクティビティモデルと自然に連携します。

ステップ2：クライアントを作成する

プロジェクトの認証情報を使ってTTS2Goクライアントを初期化します。Svelteでは、コンポーネント内で直接作成することも、共有モジュールで作成することもできます。



import { createTTS2GoClient } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});
  • apiKey：フロントエンドに置いても安全な、公開用のTTS2Goキー。
  • projectId：生成、承認、分析に使用するTTS2Goプロジェクトを識別します。

ステップ3：Svelteで音声読み上げを追加する

createTTSを使うと、再生コントロールとステータスを備えたリアクティブなストアが得られます。



import { createTTS2GoClient, createTTS } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});

const VOICE_ID = "your-voice-id";

const text = "Hello from TTS2Go in Svelte!";

const tts = createTTS(client, text, VOICE_ID);

let status = $state("idle");

const unsubscribe = tts.status.subscribe((s) => (status = s));

function handleClick() {

if (status === "playing" || status === "fallback") {

tts.stop();

} else {

tts.play();

}

次のステップ

ここからは、次のようなことができます。

  • ブランドやコンテンツの種類に合わせてボイスの選択を検討する。
  • SSMLを使って、発音、間、強調を細かく制御する。
  • テキストハイライトAPIを組み込み、テキストと読み上げ音声を同期させる。

Svelteの完全なドキュメントと高度なサンプルについては、こちらをご覧ください。

  • https://tts2go.com/docs/svelte
記事一覧に戻る