Web Speech APIとは？

Web Speech APIは、ブラウザで音声データを扱うためのAPIです。大きく分けて2つの機能があります。

SpeechSynthesis（音声合成）: テキストを音声として読み上げる（Text-to-Speech）。
SpeechRecognition（音声認識）: 話した言葉をテキストに変換する（非同期音声認識）。

今回は、導入が非常に簡単な SpeechSynthesis（読み上げ機能） に絞って紹介します。

この機能のメリット

登録・認証が不要: APIキーの取得やユーザー登録の手間がなく、すぐに使い始められます。
アクセシビリティの向上: 視覚障がいのある方や、手が離せない状況のユーザーにとっても使いやすいサイトになります。

実装の手順

準備するのは index.html と read.js の2ファイルだけです。

1. HTMLの準備

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <textarea id="read"></textarea>

    <button onclick="readText()" class="readbtn">読み上げる</button>

    <script src="read.js"></script>
  </body>
</html>

テキストを入力する textarea と、読み上げを開始するボタンを設置します。

ボタンをクリックすると readText() 関数が実行されるように設定します。

2. JavaScriptの実装

function readText() {
   let textToRead = document.getElementById('read').value;
   let speechSynthesis = window.speechSynthesis;

   let utterance = new SpeechSynthesisUtterance(textToRead);

   speechSynthesis.speak(utterance);
}

読み上げのロジックは、以下の4ステップで完了します。

テキストの取得: テキストエリアに入力された値を変数に格納します。
インターフェースの取得: Web Speech APIの speechSynthesis を呼び出します。
読み上げオブジェクトの作成: 読み上げたい内容や設定を保持するオブジェクトを作成します。
実行: speak() メソッドを呼び出して読み上げを開始します。

カスタマイズオプション

Web Speech APIでは、声の性質を簡単に調整することができます。

言語設定 (lang): 出力する音声の言語を指定します（例: 日本語なら ja-JP）。
発声速度 (rate): 話すスピードを調整できます。
音量設定 (volume): 音声の大きさを指定できます。

まとめ

Web Speech APIを利用すれば、JavaScriptの基礎知識だけで高機能な読み上げシステムを構築できます。

ユーザーにとってより優しいサイト作りの一環として、ぜひ活用してみてください。

Web Speech APIでテキスト読み上げ機能を実装する方法