「HTML5でteratailが喋った！」のLTスライドを公開しました

第4回 teratail MeetUpの集まっtailにてLT登壇をしました。今回はHTML5のSpeech Synthesis APIとteratail APIを使ってブラウザからteratailを喋らせてみました。

Speech Synthesis APIとは

Speech Synthesis APIとはHTML5のWeb Speech APIの一種で、ブラウザから文字の読み上げを行うことができるAPIです。javascriptで声や声量、高さなどを設定し、任意の文字を喋らせることが可能です。Web Speech APIには他にもマイクから音声を取得して文字列で取得するAPIなどもあります。
これらを上手く利用してAjaxでやり取りができれば、喋るAIのようなものを作ることもできそうですね！

Speech Synthesis APIを使用する上での注意点

Can I useによると、Speech Synthesis APIに対応しているブラウザは少なく、対応しているブラウザでも日本語音声に対応していなかったりする問題があります。その為、実際に使用するには難しいのが現状です。
また、長い文章になると読み上げを中断してしまうなどの問題があり、発表で使用したデモでは文章の中から1文だけ正規表現で取り出して読み上げを行っています。

Speech Synthesis APIを使用してteratailを喋らせてみた！

デモで使用したページは以下です。
Web Synthesis APIでteratailを喋らせてみた

ブラウザによっては英語文字のみ読み上げたり、全く喋らなかったりします！
Xperia Z5 premiumのChromeとWindows7のChromeで動作確認済みです。