ObnizとSpotifyAPIでカップラーメンタイマーを作る

この記事はプロトアウトスタジオ Advent Calendar 2020 23日目の記事です！

先日卒業制作のプレゼンターとして参加させていただいたHLオンライン2020 決勝 & ProtoOut Studio DemoDay
でふと見かけたLINE賞の受賞作品が目に留まりました。

Osumen - あなたの3分を変えるカップ麺タイマー

カップラーメンを待つ時間を有効利用しようというアイデアがとても素晴らしいと思いましたので自分も何か似たようなことができないかなと思い、

手持ちの知識とデバイスからobnizとSpotifyAPIを使ってカップラーメンタイマーを作ることにしました。

##用意するもの
カップラーメン（待ち時間３分）
obniz
Spotifyプレミアムアカウントと再生時間が2:58〜3:02くらいの曲で構成されたプレイリスト

仕様

仕組みはスーパーシンプルです。
obnizのボタンを一回押したらプレイリストの曲が流れます。
再生時間が約3分の曲がランダムで流れるので、その曲聴き終えたら３分が経過している。というものです。

今回使用したエンドポイントがこちらです。

obniz	動作	httpメソッド	URL	query	option
push	再生	PUT	https://api.spotify.com/v1/me/player/play	-	{'context_uri':'spotify:playlist:xxx'}
push	停止	PUT	https://api.spotify.com/v1/me/player/pause	-	-
push	シャッフル	PUT	https://api.spotify.com/v1/me/player/shuffle	state={bool}	-

ちなみに軽く調べてプレイリストには今のところ下記のようになっています。

| 曲名| アーティスト|再生時間|
| :--- | :--- | :--- | :--- |
| monolith| 04 Limited Sazabys |2:59|
| アブノーマルが足りない| アルカラ| 2:59|
| カップラーメンができるまで|SUSURU TV.| 3:00|
| 能動的三分間| 東京事変 | 3:00|
| motto| JUDY AND MARY | 3:02|

コードも載せておきます。

app.js

require('dotenv').config();
const axios = require("axios");
// spotify関連
const access_token=process.env.ACCESS_TOKEN;
const client_id = process.env.CLIENT_ID;
const client_secret = process.env.CLIENT_SECRET;
const redirect_uri = process.env.REDIRECT_URI;

// obniz関連
const obniz_id = process.env.OBNIZ_ID;
const Obniz = require('obniz');
const obniz = new Obniz(obniz_id);

const headers = {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${access_token}` 
};
// obnizスタート
obniz.onconnect = async function () {
  var is_playing  = false
  // ディスプレイ処理
  obniz.display.clear();
  obniz.display.print('hello noodle!!');
  obniz.switch.onchange = function(state) {
    if (state === 'push') {
      if (!is_playing) {
        setTimer();
        is_playing = true;
      } else {
        stopTimer();
        is_playing = false;
      }
    }
  }
}

function setTimer() {
  // シャッフル
  axios.put('https://api.spotify.com/v1/me/player/shuffle?state=true',
    '',
    { headers: headers })
  .then(response=>{console.log(response.data)})
  .catch(err=>(console.log(err)));
  // 再生
  axios.put('https://api.spotify.com/v1/me/player/play',
    { "context_uri": "spotify:playlist:xxxxxxxxxxxxxxxx"},{headers: headers})
  .then(response=>{console.log(response.data)})
  .catch(err=>(console.log(err.message)));
}

function stopTimer() {
  // シャッフル解除
  axios.put(
    'https://api.spotify.com/v1/me/player/shuffle?state=false',
    '',{headers: headers})
  .then(response=>{console.log(response.data)})
  .catch(err=>(console.log(err)));
  //　停止
  axios.put(
    'https://api.spotify.com/v1/me/player/pause',
    {},
    {headers: headers})
  .then(response=>{console.log(response.data)})
  .catch(err=>(console.log(err.message)));
}

【obniz】IoTでSpotifyライフを充実させよう【node.js】

以前にもSpotifyとobnizで記事を書きましたが今はaxiosを使ってシンプルに書けました。
ただ今回のAPIは全てPUTメソッドのものだったんですけど、axiosでPUTメソッドのことを調べても情報が少なくて書き方に難儀しました。
調べ方が悪いのですかね・・・。

function setTimer() {
  // シャッフル
  axios.put('https://api.spotify.com/v1/me/player/shuffle?state=true',
    '',
    { headers: headers })
  .then(response=>{console.log(response.data)})
  .catch(err=>(console.log(err)));
  // 再生
  axios.put('https://api.spotify.com/v1/me/player/play',
    { "context_uri": "spotify:playlist:xxxxxxx"},{headers: headers})
  .then(response=>{console.log(response.data)})
  .catch(err=>(console.log(err.message)));
}

あとaxiosのインデントってどう書いていいか良くわからないです・・・。

今後は1−５分くらいの範囲でプレイリストを流せるようになればでラーメンに限らず汎用的に作れそうなのでいずれやってみようと思います！

デモ動画

Spotify APIとobnizでカップラーメンタイマーをつくりました。
28分59秒のX JAPANのART OF LIFE
からボタン一つで2分59秒のアルカラのアブノーマルが足りないに切り替わって聴き終えたらカップラーメンの出来上がりです！#protoout pic.twitter.com/1L4AGkmUYR

— ウーリズム (@Uh_rhythm) December 23, 2020

卒業制作以来、久しぶりに企画開発発信までやりました。
こういうのすごくプロトアウトスタジオっぽくて良いな〜。
久々のQiita楽しかったです。

それでは。
クリスマス・イブは canonno さんが登場です！
いつかのメリークリスマス！