このエントリーが役に立ったらシェアをお願いします!

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

このエントリーが役に立ったらシェアをお願いします!

第4回 teratail MeetUpの集まっtailにてLT登壇をしました。今回はHTML5のSpeech Synthesis APIteratail 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で動作確認済みです。

スポンサーリンク

このエントリーが役に立ったらシェアをお願いします!

1この記事を書いた人
ShoheiTai
フロントエンド志向のWebエンジニア。
HTML5やWeb高速化、SEO等のフロントエンド開発が大好物。
バックエンドではCakePHP,Wordpress開発を主戦場としています。
Web開発のスパイスファクトリー株式会社創業メンバー。

「HTML5でteratailが喋った!」のLTスライドを公開しました
イケてないコード - Webエンジニアのブログの
最新情報をいいねしてチェックしよう!