Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

この記事は スマートスピーカー 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!
手軽に百均アイテムと連携できた!

mashandroom
会社外活動・コミュニティとして、ハッカソンや各種イベントのボランティアなどに参加。ただただ自分たちが楽しみ、結果周りの人が喜んでくれるようなアウトプットを目指しています。創造せよ!頭にキノコが生えるまで
https://mashandroom.org
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away