Html5のSpeechRecognitionでteratailと対話してみた！

第五回 集まっtail LT:5分
前回はWebSpeechAPIのSpeechSynthesisを使ってブラウザからteratailに喋ってもらいました。
https://speakerdeck.com/shoheitai/html5deteratailgadie-tuta

今回は更にSpeechRecognitionを使用してteratailAPIとの対話をしています。マイクから音声を拾い、ajaxでteratailAPIに問合せを行って技術用語の解説をしてもらっていました。

デモで使用したページ：http://tech-style.info/lab/speech-recognition/
ChromeのPC/Android版で動作します。
iOSのChromeは未確認ですが、恐らく動作しないかと思います。

Transcript

1. HTML5でteratailと対話してみた！ 泰昌平 @ShoheiTai
2. 自己紹介 泰昌平 スパイスファクトリー株式会社 メディアインテグレーション事業部 事業部長 ・平成生まれ ・ペチパー。CakePHP、Phalconなど ・フロントエンドの開発、最適化が好き ・趣味はダーツ（ハード・ソフト）とバイク
3. teratail2周年 おめでとうございます！
4. 前回の発表でteratailが喋りました
5. teratail API
6. teratail API • 昨年リリースされたAPI • 質問やタグ、ユーザ情報を取得できる • アクセストークン発行で1時間に300リクエスト • これでツールを作ればエンジニア生活が捗る！
7. ユーザがteratailに もっと親しみやすくなるもの を作ろう！
8. 前回はこんな例を挙げました
9. 前回の課題 • ボタンを押したら喋るといった簡単なもの • WebSpeechAPIの機能を使いきれていない • もう少しteratailアシスタント的なものを作りたい
10. Speech Recognition • Web Speech APIの一つ • マイクから音声認識をして文字列を取得する • きちんと単語を変換してくれる ex)じゃばすくりぷと→javascript • 簡単なjavascriptの実装で利用可能
11. 対応ブラウザは少ない・・・！
12. 皆さんChromeをご準備ください
13. teratail × Speech API teratailにIT用語を聞いてみた http://tech-style.info/lab/speech-recognition/
14. 最後に • SpeechRecognitionAPIの認識精度、単語変 換は予想以上に高性能で実用的だった。 • Yahooのテキスト解析APIを使うともっと色々 できそう！ • バックエンドを作りこめば面白い事ができる！
15. THANKS! Any questions? You can find me at ✘ facebook: shouhei.tai ✘ Twtter: @ShoheiTai
16. Credits Special thanks to all the people who made and released these awesome resources for free: ✘ Presentation template by SlidesCarnival ✘ Photographs by Unsplash