セットした文字列を読み上げてくれる「Speech Synthesis API」

ニコニコ生放送で視聴者が打ち込んだコメントを次々に読み上げていく「棒読みちゃん」というソフトがありますが、遂にこれをJavaScriptで簡単に実装できるようになりました。英語、日本語、フランス語など対応言語は様々です。

以下のサンプルは、セットした文字列を英語(米：女性)で読み上げます。

speechSynthesis.speakメソッドを使うことで読み上げを可能にします。そしてnew SpeechSynthesisUtteranceで読み上げ用のオブジェクトを作成し、その中に文字列をセットすれば完成です。

以下のサンプルは、音声の再生、一時停止、再開ボタンを実装しています。

音声には地域や性別で区別された様々な種類が用意されています。以下のサンプルの「取得」を押すと一覧が表示されます。なお、MacとWindowsでは種類に違いがあります。

音声の種類一覧の取得方法は様々ですが、今回はgetVoices()をforEach()という見慣れないループで取得しています。挙動としては、まずgetVoices()が実行され音声種類の一覧が配列で返されます。そしてこの配列をforEachで回しているというだけの話です。

注意点としては、speechSynthesis.speak()で一度音声を読ませてからでないとうまく一覧を取得できないようです。今後の対応に注目です。

SpeechSynthesisUtteranceというオブジェクトに速度やピッチといった属性をセットすることができます。以下のサンプルはその全ての属性をセットしています。

これらの属性をSpeechSynthesisUtteranceオブジェクトを格納した変数に繋げてあげれば適用されます。サンプルのJSタブを開いて具体的なプログラムを確認してください。

対応している言語での読み上げを以下のサンプルに載せています。

HTMLに各言語コードと文字列を埋め込んでいます。そして各ボタンがクリックされたら、JSに送って読み上げを実行しています。

読み上げが開始されたり完了したりしたときに発火させることが出来るイベントが用意されています。以下のサンプルは、読み上げ開始時と完了時のイベントを設定しています。

各イベントはaddEventListenerによって発火するようにしました。startとendイベントは正常に動作しましたが、pause、resume、boundaryイベントについては正常動作の確認がとれませんでした。mark、errorイベントについては調べていません。