ALLSPICE

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

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

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

Posted by Shohei Tai | |Web

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

Shohei Tai | 2016年入社

CTO

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

何かお困りのことはありませんか?無料でご相談を承っております!