Web開発音声読み上げ

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

ブラウザの音声合成の仕組みと、Reactアプリに TTS2Go を組み込み、コストを抑えながら高品質な音声読み上げを実現する方法を解説します。

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

音声読み上げは、現代のWebに欠かせない機能になりつつあります。アクセシビリティのため、エンゲージメント向上のため、あるいは単にユーザーにコンテンツを楽しむ別の手段を提供するためでも、Reactプロジェクトに音声を追加するのは思ったより簡単です。このガイドでは、ブラウザの音声合成の仕組み、各アプローチのトレードオフ、そしてReactアプリにTTS2Goを組み込む手順をステップごとに解説します。

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

最近のブラウザにはすべてWeb Speech APIが搭載されています。window.speechSynthesis.speak() に SpeechSynthesisUtterance を渡して呼び出せば、外部サービスなしでテキストを読み上げられます。無料でAPIキーも不要、すべてクライアント側で動作します。

問題は品質です。ブラウザの音声はロボットのように聞こえ、OSやブラウザによって異なり、選べる声も限られています。同じテキストでも、デバイスによってまったく違って聞こえることがあります。

AI生成音声の台頭

AIによる音声読み上げは、状況を一変させました。ニューラル音声モデルは、自然なイントネーション、テンポ、感情を備えた、驚くほど人間らしい音声を生成します。こうしたサービスは数十の言語と数百種類のボイスに対応しています。

その代わり、この音声の生成にはお金がかかり、APIも必要です。そこで重要な問いが生まれます。いつ、どのように生成すべきか、ということです。

音声の事前生成

ひとつの方法は、すべての音声を事前に生成し、静的ファイルとして配信することです。音声がすでにCDN上にあるので即座に再生でき、毎回一貫した品質が得られるのがメリットです。

デメリットはコストです。誰かが聴くかどうかにかかわらず、すべてのコンテンツの音声生成費用を支払うことになります。また、すべてのコンテンツを事前に把握しておく必要があるため、動的なテキストには対応できません。コンテンツを変更するたびに生成パイプラインが動き、コンテンツが増えるほどストレージコストも膨らみます。

オンデマンドの遅延生成

もうひとつの方法は、ユーザーがリクエストしたときにだけ音声を生成することです。実際に聴きたいと思われたコンテンツの分だけ支払えばよいので安く済み、動的なコンテンツにも対応できます。

ただし、生成予算を守る仕組みは依然として必要です。TTS APIに無制限にアクセスできれば、誰もが高額な音声生成を引き起こせてしまいます。誰に、いつAI音声を提供するかをコントロールする手段が必要です。

TTS2Goによる解決策

TTS2Goは、品質・コスト・シンプルさのバランスをとる賢いアプローチを採用しています。

フロントエンド用のAPIキーを使って、サイトにSDKを追加します。このAPIキーはリクエスト元ドメインによるブロックとレート制限に対応しているため、クライアント側のコードに置いても安全です。これは識別のための仕組みであり、秘密鍵ではありません。

あるコンテンツで最初の人がTTSボタンを押すと、すぐにブラウザの音声合成で読み上げが始まります。同時に、バックグラウンドでTTS2Goへ生成リクエストが送信されます。

TTS2Goのダッシュボードにログインしてそのリクエストを手動で承認することも、条件を満たすリクエストを自動承認するようAI承認システムを設定することもできます。本当に必要な音声の分だけ支払えばよいので、生成予算を完全にコントロールできます。

リクエストが承認されて音声が生成されると、以降そのコンテンツでTTSを押したすべてのユーザーは、選択したボイスによる高品質なAI音声で再生できるようになります。音声はTTS2GoのCDNにキャッシュされるため、即座に再生されます。

つまり、最初の訪問者にはブラウザTTSで十分に機能する体験を提供し、生成コストは承認によって管理し、それ以降の全員には追加費用なしでプレミアムなAI音声を届けられるのです。

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

プロジェクトのディレクトリに、TTS2GoのReactパッケージをインストールします。

npm install @tts2go/react

パッケージはgzip圧縮後15 KB未満と軽量で、React以外のピア依存関係はありません。

ステップ2：プロバイダーを設定する

コンポーネントツリーのルートで、アプリケーションを TTS2GoProvider でラップします。APIキーとプロジェクトIDをconfigとして渡します。

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { TTS2GoProvider } from "@tts2go/react";
import App from "./App";

const config = {
  apiKey: "your-api-key",
  projectId: "your-project-id",
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TTS2GoProvider config={config}>
      <App />
    </TTS2GoProvider>
  </StrictMode>
);

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

任意のコンポーネントで useTTS フックを使うと、再生・一時停止・停止のコントロールが得られます。手早くスピーカーアイコンを置きたい場合は、既製の TTSButton を組み込むこともできます。

import { TTSButton, useTTS } from "@tts2go/react";

const VOICE_ID = "your-voice-id";

export default function Article({ text }: { text: string }) {
  const { status, play, stop, pause } = useTTS(text, VOICE_ID);

  return (
    <div>
      <p>{text}</p>
      <TTSButton content={text} voiceId={VOICE_ID} />
      <button onClick={status === "playing" ? stop : play}>
        {status === "playing" ? "Stop" : "Play"}
      </button>
    </div>
  );
}

最初に再生ボタンを押したユーザーにはブラウザTTSで読み上げが行われ、同時にTTS2Goのダッシュボードへ生成リクエストが送られます。承認されれば、以降のすべてのユーザーはAI音声を聴けるようになります。

次のステップ

ボイスの選択、発音を細かく調整できるSSML対応、画面上のテキストと読み上げを同期させるハイライトAPIなどもぜひ試してみてください。

高度なパターンやサンプルについては、tts2go.com/docs/react にあるReactの完全なドキュメントをご覧ください。

記事一覧に戻る