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

「HTML5のSpeech Recognitionでteratailと対話してみた!」のLTスライドを公開しました

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

6月頃ですが集まっtailにてLT登壇させていただき、teratail APIHTML5のSpeech Recognitionを使用したデモを行いました。

前回登壇させていただいた時は、Web Speech APIのSpeech Synthesisを使用して、teratailを喋らせるといったデモを行いました。今回はSpeech Recognitionを用いて形式的な対話を行うことができる、擬似的なAIを実現しました。

スポンサーリンク

HTML5 Speech Recognitionとは

Speech Recognitionとはマイクから音声入力・文字認識を行うAPIです。対応しているブラウザであればマイクから入力を行うことができ、単語の変換を行った上で文字列として取得することができます。単語変換は非常に優秀で、多少長い言葉を話しても英単語や漢字の変換を高い精度で行ってくれます。文字列さえ取得できてしまえば、あとはAjaxなどでサーバに投げて形態素解析などをすることで様々なことに応用することができるかと思います。

Speech Recognitionを使う上での注意点

Can I useによると、対応しているブラウザはChromeとOperaのみです。利用できる環境が限られてしまうため、実戦投入する上では気をつけて扱う必要があります。

HTML5のSpeech Recognitionでteratailと対話してみた!

今回のデモには前回同様teratailAPIを使用しています。teratailの技術タグを取得するAPIからデータを取得し、タグ説明の読み上げを行っています。teratailのタグ情報は非常に充実しており、技術用語は数多くカバーできるため、今回のような擬似AIを作成することができました。

デモで使用したページは以下です。
HTML5のSpeech Recognitionで擬似的なAIを作成してみた

PC版ChromeとAndroid版Chromeで動作確認しています。また、一部の端末では日本語音声出力に対応していないため、その場合はエラーとしています。
スポンサーリンク

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

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

イケてないコード - Webエンジニアのブログの
最新情報をいいねしてチェックしよう!