VUI×obniz でメリークリスマス (VUI編) #WebSpeechAPI

この記事はスマートスピーカー Advent Calendar 2018 の24日目の記事になります。

24日ということで、クリスマスに関連する記事を書きます。

また、先日 Obniz Advent Calendar 2018 の24日目が空いていることを発見してしまい、
つい、うっかり、ポチってしまったため、
「obniz×VUI でメリークリスマス (obniz編)」にて obniz 側を書いております。

はじめに

VUI と筆者

2016年11月：特大ペッパソン2016(ハッカソン) にて
- Google Speech API β版 (正式名忘れた) に触れる
- Watson Speech To Text に触れる
2017年10月：ハママチューン(ハッカソン) にて
- Web Speech API に触れる
2017年10月： Google Home mini 購入
- Actions on Google / Dialogflow / Firebase でアクションを作り始める
2017年12月：Advent Calendar にて
- 神龍を呼び出す (こちら)
2018年3月： Amazon Echo Dot 購入
- Alexa Skills Kit / AWS でスキルを作り始める
2018年7月： Amazon Echo Spot 購入
2018年7月： LINE CLova Frends mini 購入
- Clova Extensions kit でスキルを作り始める

Speech To Text

では早速、VUI でメリークリスマス

スマートスピーカーの Advent Calendar といいつつ VUI ということで、
今回は、お手軽な Web Speech API で、
音声をハンドリングして「こちら」で用意した PIKA PIKA API を叩こうと思います。

システム構成

[※]
obniz は SDK を用いることで、
ブラウザから直接 obniz を操作することができますが、
今回は Node.js 作った API から obniz を操作しています。

理由はブラウザ以外からも操作したかったため。

出来たもの

Advent Calendar 用 pic.twitter.com/zJjX6ME6NH
— ちび (@ibihc929) 2018年12月23日

ブラウザ側はこんな感じ

Advent Calendar 用 pic.twitter.com/SOXMlGZBCU
— ちび (@ibihc929) 2018年12月23日

実際に obniz と繋げるとこんな感じ

ソースコード

index.html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <h1>SpeechRecoWrapper Example</h1>
    <p>Error State: <span id="error-state"></span></p>
    <p>Reco State: <span id="reco-state"></span></p>
    <div id="result" style="height: 300px; border: solid 1px #000000"></div>

    <script>
     const errorStateElement = document.getElementById('error-state');
     const recoStateElement = document.getElementById('reco-state');
     const resultElement = document.getElementById('result');

     const SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
     const speechReco = new SpeechRecognition();
     speechReco.continuous = true;
     speechReco.interimResults = true;
     speechReco.lang = 'ja-JP';

     speechReco.onresult = evt => {
       recoStateElement.innerHTML = 'onResult';
       console.log("onResult");

       for (let i = evt.resultIndex; i < evt.results.length; ++i) {
         const result = evt.results[i];
         if (result.isFinal) {
           resultElement.innerHTML = result[0].transcript;
         } else {
           resultElement.innerHTML = '[途中経過]' + result[0].transcript;

           // 音声認識結果に「メリークリスマス」という文言が入っていたら API を叩く
           if (new RegExp('メリークリスマス').test(result[0].transcript)) {
             axios.get('https://xxxxxxxx.ngrok.io/on').then(res => {
               console.log(res.data);
             });
           }
         }
       }
     };

     speechReco.start();
    </script>
  </body>
</html>

※エラー処理は一切しておりません。
※また onresult のみハンドリングしています。

詳しくは https://developer.mozilla.org/ja/docs/Web/API/SpeechRecognition にて。

最後に

Speech To Text が手軽！
Lambda とか、Cloud Functions 不要なのでチャラっと試したいときに便利！

そして obniz！
手軽に百均アイテムと連携できた！