Edited at

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!

手軽に百均アイテムと連携できた!