HTML5のWeb Speech APIで対話型の擬似AIを作ってみた！

Webエンジニアの泰です。
7月にteratailのイベントにてLTをやらせていただきました。
今回はWeb Speech API（新しいタブで開きます）を使用して擬似的な対話アプリを作ってみました。

Web Speech APIとは

Web Speech APIはブラウザから音声の処理ができるAPIです。
今回のデモでは音声入力を行うことができるHTML5のSpeech Recognition（新しいタブで開きます）と音声出力を行うことができるSpeech Synthesis（新しいタブで開きます）を使用しました。
これらのAPIはPC/SP版のChromeで動作します。

HTML5でブラウザと対話してみた

LTのスライドはSlideshareにて公開しています。

対話するまでのフローとしては以下の様な処理になっています。

1. ユーザからマイクによる音声入力を行う
2. javascriptのSpeech Recognition APIで文字列を取得
3. Ajaxで入力文字列をサーバサイドへ送信
4. サーバサイドでteratail APIにリクエストしタグ情報を取得。レスポンスとして返却。
5. 受け取ったタグ情報をSpeech Synthesis APIで読み上げる

デモページはこちら
HTML5でteratailと対話してみた！（新しいタブで開きます）

（新しいタブで開きます）