Webブラウザ(+ jQuery)だけでテキストトゥスピーチをやってみたよ

Web開発/デザインjavascript

ども、今回はCordovaアプリを作っていてテキストトゥスピーチ(Text to Speech(以降 TTS))を利用したくなったのでやります。というわけで、今回はCordovaアプリなのでwebブラウザ上で動作するものを探しました。

探してみるとあるもんですね。全く知りませんでしたが、W3Cで制定されているみたいですね。というわけで、今回は”Web Speech API”のTTSを使ってみましたので備忘録的にまとめようと思います。ちなみにこのAPIでは音声認識も提供されているみたいです。ほんと至れり尽くせりですね。


1. 簡単にテストしてみる

では早速使ってみましょう。ここでは極めてシンプルに文字を読んでもらいます。というわけで、テストしたのが以下のコードです。

これをHTMLに記述してブラウザで開くと「Hello World」と読んでくれます。コードを見てくださるとわかると思いますが、SpeechSynthesisUtteranceのインスタンスを作成する際に読み上げてほしい文字列を渡しています。そしてその後speakで読み上げてもらっています。余談ではありますが、本サイトの名前である「Foolean」という造語も一応それっぽく読み上げてくれました。

2. 読み上げの設定

さて、上記ではただ文字列を読み上げるということだけをしていますが、音量や読み上げの速さなどいくつか設定することができる項目があります。詳しくはリファレンスを読んでいただきたいのですが、以下にそれっぽく設定しているコードを載せておきます。

ここでは、読む速さ(レート)の値を少し大きくしました。こうすることにより、先ほどより少し早く文字列を読んでもらえます。他にも音量を変えたかったらボリューム、声の高さを変えたければピッチの値を変更すれば大丈夫です。また、先程はSpeechSynthesisUtteranceのインスタンスを作成する際に文字列を与えていましたが、今回は後からテキストをセットしています。ここで入れる文字列を変えることで動的に読ませたい文章を変えることができます。

おわりに

さて、今回は簡単にTTSさせる方法を学びました。先ほども言いましたが、ほんと至れり尽くせりですね。正直あまり勉強になっている気がしませんが、自分のようなエンジョウイ勢には大変ありがたい限りです。