今回は、「ボタンをクリックするとWebページのテキストを音声で読み上げる」機能が実装されたHTMLを例に、Web Speech APIの基本的な使い方や仕組みをやさしく解説していきます！
音声読み上げの仕組みは、アクセシビリティ対応や、情報の多いページを“ながら聞き”したいときにとても役立ちます。さっそく、そのしくみを見ていきましょう！
このアプリでできること
このサンプルでは次のようなことが可能です。
| 機能 | 説明 |
|---|---|
| ページ内の文章を音声で再生 | <div>内のテキストを自動音声で読み上げ |
| 読み上げの一時停止・再開 | ユーザーが一時停止と再開を自由に切り替えられる |
| 読み上げの停止 | 「読み上げる」ボタンをもう一度押すと停止 |
読み上げの仕組みをざっくり理解しよう！
読み上げには SpeechSynthesisUtterance というWeb Speech APIのオブジェクトを使います。
🗣️ SpeechSynthesisUtterance（スピーチシンセシス・アタランス）とは？
読み上げるテキストや音声の速さ、ピッチ、言語などを設定できる「読み上げの指示書」です。
HTML部分の構造
<div id="text">
<p>吾輩は猫である。名前はまだ無い。</p>
...
</div>
<button id="speakToggleButton">読み上げる</button>
<button id="pauseToggleButton">読み上げ一時停止</button>#text：読み上げたい内容が入っている場所#speakToggleButton：読み上げ開始・停止の切り替えボタン#pauseToggleButton：一時停止・再開の切り替えボタン
JavaScriptでの読み上げ制御の流れ
1. 読み上げ開始／停止
if (speakToggleButton.textContent === '読み上げる') {
const text = textElement.textContent;
utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'ja-JP';
...
window.speechSynthesis.speak(utterance);
speakToggleButton.textContent = '読み上げ停止';
} else {
window.speechSynthesis.cancel();
speakToggleButton.textContent = '読み上げる';
}
| 操作 | 解説 |
|---|---|
SpeechSynthesisUtterance(text) | 読み上げるテキストをオブジェクトに変換 |
lang = 'ja-JP' | 読み上げの言語（日本語）を指定 |
speak() | 読み上げスタート！ |
cancel() | 途中でも読み上げを完全に止める |
2. 読み上げの一時停止・再開
if (pauseToggleButton.textContent === '読み上げ一時停止') {
window.speechSynthesis.pause();
pauseToggleButton.textContent = '読み上げ再開';
} else {
window.speechSynthesis.resume();
pauseToggleButton.textContent = '読み上げ一時停止';
}
| 関数名 | 意味 |
|---|---|
pause() | 読み上げをその場で一時停止する |
resume() | 一時停止していた読み上げを再開する |
よくある質問と注意点
Q. 「読み上げが始まらないんだけど…？」
- → ブラウザが Web Speech API をサポートしているか確認しましょう。
- Chrome や Edge はサポートしていますが、Safariや一部のスマホブラウザは対応が不完全な場合があります。
Q. 声が変えられますか？
- 可能です！次のようにして利用可能な声を取得できます。
speechSynthesis.getVoices(); // すべての音声オプションを取得
このリストから好みの声を選んで utterance.voice に設定することも可能です。
今後のステップアップには？
このサンプルを基に、以下のような拡張ができます！
| 機能 | 内容 |
|---|---|
| 選択した文だけ読み上げる | window.getSelection().toString() を使う |
| 読み上げ履歴を残す | localStorage への保存機能を追加 |
| 音声設定のカスタマイズUI | スライダーで rate や pitch を調整 |
| 読み上げ中のハイライト表示 | 読み上げ進行に応じて文章を強調表示 |
まとめ
Web Speech APIを使うと、たった数行のJavaScriptでテキストを音声に変換できてしまいます。
アクセシビリティ対応にもぴったりで、ナレーションつきの記事やWeb教材など、工夫次第でいろんな場面に応用できます！
次は「選択した部分だけを読み上げる」機能や、「複数言語に対応した読み上げ」などにも挑戦してみましょう。
何か応用してみたい機能があれば、ぜひ聞いてくださいね！
(Sample)