この記事は スマートスピーカー 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 と繋げるとこんな感じ
ソースコード
<!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！
手軽に百均アイテムと連携できた！