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

この記事は[プロトアウトスタジオ Advent Calendar 2020](https://qiita.com/advent-calendar/2020/protoout) 23日目の記事です！

先日卒業制作のプレゼンターとして参加させていただいた[HLオンライン2020 決勝 & ProtoOut Studio DemoDay](https://mashupawards.connpass.com/event/196634/)
でふと見かけたLINE賞の受賞作品が目に留まりました。

[Osumen - あなたの3分を変えるカップ麺タイマー](https://protopedia.net/prototype/2022)

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

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


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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/2f697bbc-714d-eef9-7e9f-e8e67114dd4d.png" width="50%">

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

| 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|

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

```javascript: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】]('https://qiita.com/UhRhythm/items/338091aa26d3919f8fa3')

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

```javascript
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−５分くらいの範囲でプレイリストを流せるようになればでラーメンに限らず汎用的に作れそうなのでいずれやってみようと思います！

# デモ動画

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Spotify APIとobnizでカップラーメンタイマーをつくりました。<br>28分59秒のX JAPANのART OF LIFE<br>からボタン一つで2分59秒のアルカラのアブノーマルが足りないに切り替わって聴き終えたらカップラーメンの出来上がりです！<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/1L4AGkmUYR">pic.twitter.com/1L4AGkmUYR</a></p>&mdash; ウーリズム (@Uh_rhythm) <a href="https://twitter.com/Uh_rhythm/status/1341763117852708865?ref_src=twsrc%5Etfw">December 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

それでは。
クリスマス・イブは [canonno](https://qiita.com/canonno) さんが登場です！
いつかのメリークリスマス！