株式会社グローバルゲート公式ブログ
Web Speech APIを使ってブラウザを喋らせる
こんにちは。株式会社グローバルゲートのモーリーです。
本日より新年度！
令和も4年度に突入しました。今上天皇の即位式がつい最近のことに思えますね…。波乱すぎる令和もそろそろ落ち着いてほしいものです。
なお、本日は4月1日ですが特にエイプリルフール 企画などは行っておりませんので当記事に嘘はございません。
さて、今回はブラウザのWeb Speech APIを使い、ブラウザだけで音声の読み上げをやってみようと思います。
ブラウザを喋らせる「Web Speech API」とは
現代のブラウザは音声を扱う機能としてWeb Speech APIが搭載されています。
これは音声合成（つまり読み上げ）と音声認識の2つの機能が提供されています。
詳しくはこちら
今回はこのうちの「音声合成」を実際に動かしてみたいと思います。
以前からホームページ上のテキストを音声に変換する方法としては
・専用の読み上げブラウザやソフトを使用する（主に視覚障害者向け）
・外部APIを使用する（テキストデータを外部サーバーに送信し、音声データに変換されたものを受け取って再生する）
のいずれかがありますが、Web Speech APIのおかげでブラウザだけでも最低限の音読が可能となりました。
もっとも、視覚障害者向けとしては専用のソフトのほうが機能は優秀ですし、読み上げの自然さや感情表現、声色のバリエーションは外部APIにはかないません。
ブラウザによる読み上げ機能はOSや各ブラウザによる差異も大きく、まだまだ発展途上と言えます。
実際にやってみる
テキストを入力し、その入力したテキストを音読させるデモを作成しました。
デモページ
声色はデフォルト（ブラウザやOSによって異なる）、ボリュームは固定としました。
読み上げる文章や声の定義
Web Speech APIはJavascriptを使って動作させることができます。
発声させるところまでは短いコードでできるので比較的簡単です。
まずはSpeechSynthesisUtteranceというクラスで文章・言語・声の高さ・速さ・声量を定義します。
//SpeechSynthesisUtteranceクラスをつくり、そのパラメータで設定
const param = new SpeechSynthesisUtterance();
param.text = elem.text; //読み上げる文章
param.lang = elem.lang; //言語
param.rate = elem.rate; //速度
param.pitch = elem.pitch; //声の高さ
param.volume = elem.volume; //音量
そしてspeak()という関数で実際に発生します。
speechSynthesis.speak(param)
ホームページで使用する場合、ボタンを押したら指定エリアの文章を音読してくれるとか青空文庫を読み上げさせるとか…でしょうか？
もう少し進化すればエンタメ的な使い方もできそうな気がしますが、今はまだ専用のアプリやAPIのほうがよさそうです。
ブラウザだけでゆっくり解説ができることを夢見つつ…。
【関連記事】
