休憩時間だからこそ、テンションをあげたい時に押すボタンを作った

「疲れた！」という言葉を何かのエネルギーに変えたい

リモワ中、誰もいないのをいいことについ「疲れたー！！！」と叫んだりしたことはないだろうか？私はある。実際は「つっっっっっっかれたー……」という、心の底から絞り出した渾身の「疲れた」。
この言葉を 何かのエネルギーに変換することはできないだろうか？ そう、例えば テンションをあげる何かに……

テンションをあげるものと言えば

テンションが上がるものは何か？ 氷川きよしでしょ。
完成したのがこちら。
※音声は流れません

アプリ

＜使い方＞

• マイク認証をONにして、ボタンを押す。
• 心の底から「疲れたー！」と言う。（「めっちゃ疲れた」「ちょー疲れた」でも可）
• 氷川きよしさんが煽り散らしてくれるので、こぶしを振り上げる。
  ※隠しコマンドとして「マツケン」と言うと、例のあの曲が流れます。

コード

See the Pen 休憩時間だからこそ、テンションをあげたい時に押すボタン２ by mshita (@morishitanana) on CodePen.

音声認識（認識後、判定あり）

JS

    // 音声を認識できたら
    this.recog.onresult = (event) => {
      // 認識されしだい、this.resultにその文字をいれる
      // Vueなので、文字をいれただけで画面表示も更新される
      this.result = event.results[0][0].transcript;

      //アクション1
      if(this.result.indexOf('疲れた') > -1){
        window.location.href = 'https://www.youtube.com/watch?v=2fmucSKJXxQ&t=53s';
      };
    
      //アクション2
      if(this.result.indexOf('マツケン') > -1){
        window.location.href = 'https://www.youtube.com/watch?v=XazyhnymUQo&t=64s';
      };
    };
    
    // 音声認識が終了したら
    this.recog.onspeechend = () => {
      this.recog.stop();
      this.recogButton = '停止（クリックして再開）';
    };
    
    // 認識できなかったら
    this.recog.onerror = () => {
      this.result = '（認識できませんでした）';
      this.recog.stop();
      this.recogButton = '停止（クリックして再開）';
    };
    
  },

音声認識した結果、『疲れた』『マツケン』という単語を含んでいた場合のみ指定のURLにジャンプする。
単語は完全一致ではなく、部分一致で判定している。

＜完全一致させたい場合＞
if(this.result.indexOf('疲れた') > -1){　を、if(this.result === '疲れた'){ に変更する。

Youtube動画の、再生開始箇所を指定したい場合

流したい動画の ここから！ というところで右クリックをして『現時点の動画のURLをコピー』を選択する。その箇所から再生されるURLが保存される。

まとめ

理想を言えば、仕事を開始したと同時に起動して「疲れたー」と言ったタイミングで、きよしを流したい。
が、Web Speech APIは基本的に数秒で切れてしまう。起動したままにするには、HTTPSサーバーが必要とのこと。
（参考）https://monomonotech.jp/kurage/iot/webspeechapi_voice_recognition.html
それほど時間をかけずにお手軽に作りたかったというのもあるので、今回は断念。