近年、カーナビやロボットなど、コンピュータが音声を使って説明や案内をしてくれる事例が増えてきました。今後、音声認識と音声発信は情報コミュニケーションにおいて大きな役割を担うことでしょう。

そこで今回はTTS(Text to Speech)と呼ばれるテキスト読み上げ機能をMonacaで実装してみます。使用するCordovaプラグインは vilic/cordova-plugin-tts です。

インストール

Monaca IDEの「Cordovaプラグインの管理」画面で、vilic/cordova-plugin-tts をインポートして下さい。

サンプルコード

以下のような、ボタンが押されたらテキストエリアに入力された文字列を読み上げるアプリを作成します。UIはOnsen UIで実装しています。

HTML

JavaScript

cordova-plugin-tts の利用方法は非常に簡単です。
TTS.speak() というAPIで読み上げを実行します。第一引数には読み上げる文字列とロケールを指定し、第二、第三引数には成功時、失敗時のコールバック関数をそれぞれ指定します。


これで任意のテキストを喋らせることができるようになります。
チャットやニュースの読み上げなど、アクセシビリティを向上させるうえでTTSは使いどころが多そうです。ぜひ皆さんのアプリでも活用してみてください。

今回のソースコードはmoongift/tts-with-monacaにアップロードされています。実装される際の参考にしてください。