search
LoginSignup
2

More than 3 years have passed since last update.

posted at

updated at

Organization

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

この記事は スマートスピーカー 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 でメリークリスマス :christmas_tree:

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

システム構成

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

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

出来たもの

ブラウザ側はこんな感じ

実際に 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!
手軽に百均アイテムと連携できた!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2