ALLSPICE

スパイスファクトリー株式会社のメンバーが運営するWeb開発メディア

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

Posted by 泰 昌平 | |Web
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と対話してみた!

About The Author

泰 昌平 | 2016年入社

メディアインテグレーション事業部 事業部長

Webエンジニア。仕事ではWebサービスやポータルサイトの開発、運営をしています。フロントエンドの開発、高速化、SEOが得意です。外部のイベントでたまにLTをやっています。趣味はダーツ(ハード・ソフト)とバイク。