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

Speech Synthesis APIHTML5

第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で動作確認済みです。

HTML5javascriptスライド
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
この記事を書いた人

スパイスファクトリー株式会社 Webエンジニア。フロントエンドやWebサイトの高速化が得意です。インフラ・バックエンドも一通りやってます。
個人的なお仕事のご依頼や情報交換などはお問い合わせまたはTwitterにメンションをお願いします。

ShoheiTaiをフォローする
このエントリーが役に立ったらシェアをお願いします!
イケてないコード – Webエンジニアのブログ

コメント

タイトルとURLをコピーしました