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

feedbackHTML5

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で動作確認しています。また、一部の端末では日本語音声出力に対応していないため、その場合はエラーとしています。
HTML5javascriptスライド
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
この記事を書いた人

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

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

コメント

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