Spotifyのapiはダンサーの味方だった #JavaScript

はじめに

どうしても手放したくないアプリって皆さんありますか？
デスクトップでもスマホでもWebでもなんでも大丈夫なんですけど、無いと生きているのがしんどくなってしまうような、そんなアプリやツールは誰しも一つや二つありますよね！

僕の場合は Spotify がそれにあたります。
外出先でイヤホンを忘れ、Spotifyで音楽を聴けなくなってしまった。そんな日は一日中ストレスが溜まっていき、とにかく落ち着かないです。
大学時代からストリートダンスが趣味で、音楽を耳に垂れ流すという行為がどうやら生活の一部になっているようです。

最近知ったのですが、Spotifyにもapiがあるようで、データ分析してる例とかもあって結構面白そうです。真のSpotifyユーザーを目指す人にとっては見逃せません。
今回は、このapiを使ってちょっとしたツールを開発してみたので、その完成までの様子をご覧ください。

調査してみる

・Spotify for Developer
まずはざっくり調査ということで、とりあえず少しでも理解を深めるために公式のドキュメントを回遊。

api があるって時点でなんとなく、イメージは出来ていたのですが、

アーティストやプレイリストの検索
中身の曲の一覧を取得
自分のプレイリストを色々編集

などは一通り出来そうな気がします！
Web APIだけではなく、iOSやAndroidのSDKもあり、全体的に色々出来そうな印象があります。(Spotifyのドキュメントなんか見た目がカッコイイ)

曲の情報とか何が取れるんだろう？とふと調べてみると

、、、、!!!!!!!

Danceability describes how suitable a track is for dancing based on a combination of musical elements including tempo, rhythm stability, beat strength, and overall regularity.
【訳】
ダンスアビリティは、テンポ、リズムの安定性、ビートの強さ、全体的な規則性などの音楽要素の組み合わせに基づいて、トラックがダンスにどの程度適しているかを示します。

【その時の僕】
そんな、、danceability、、だって、、、
そんなことって、、
こんなピンポイントの需要ってこの世にあるの？

この時は本当にびっくりしました。。
流石Spotifyさん、DJソフトとも連携できるだけあって着眼点が素敵。
本来躍りやすい曲かそうで無いかって、直接聴いて確認してみる他無いですが、この情報を使えば今までよりも圧倒的に曲探しが捗ってしまいます！
実際に躍る人目線で曲をレコメンドしてくれるような、そんなダンサー需要しかないツールのアイデアが舞い降りた瞬間でした。

開発してみる

1:作りたいモノを考える

検索窓にアーティストや曲名の名前を入れる
ヒットしたモノのを何件かピックアップ
その中から踊りやすい曲をソートして教えてくれる

とりあえずは最小構成で、上の三つが出来るものを作っていけたらと思ってます！

2:APIを使える状態にする

・公式(Spotify for Developer)
https://developer.spotify.com/

・Web API Tutorial
https://developer.spotify.com/documentation/web-api/quick-start/

・Authorization Guide
https://developer.spotify.com/documentation/general/guides/authorization-guide/#authorization-code-flow

上のTutorialとGuideのおかげでアクセストークンを取得するところまではかなり軽快に進むことができました。
言語はJavaScriptを使用。
Spotifyのライブラリも提供されているようだったので、今回はそちらからAPIを叩きました！
ライブラリ使用にあたっての基本的な設定は以下のような感じで書いていきます。

npm install spotify-web-api-node --save


var SpotifyWebApi = require('spotify-web-api-node');

// credentials are optional
var spotifyApi = new SpotifyWebApi({
  clientId: 'クライアントID',
  clientSecret: 'クライアントシークレット',
  redirectUri: 'http://localhost:8888/' // Spotify Developer で設定したリダイレクトURL
});
spotifyApi.setAccessToken('<your_access_token>');

3:使用するAPIを洗い出す

調べてみると今回はこちらの三つのAPIで事足りそうでした。

4:いろいろ頑張る

非同期処理に何度かつまづく。。

とりあえず完成

最近ハマりの「King Gnu」で検索をかけてみると、danceabilityの値が大きい順(踊りやすい曲順)に一覧を出してくれる。どうやらヒットした曲の中では「It`s α small world」という曲が踊りやすいらしいです。
※検索結果はデフォルトで20件まで返し、曲の人気度などにによって重みづけされてるみたいです。

とりあえず、上位三曲くらいをちょい踊りしてみましたが、良い感じです！笑
King Gnu最高

まとめ

正直、音楽関係のソフトウェアの力を少し舐めていました。。
「踊りやすさ」なんて観点からも曲を解析しているのですね。。
普段なんとなく恩恵を受けているレコメンド機能の裏側を見れた気がして面白かったです。いつか Spotify でデータ分析とかもしてみたい。

それから、自分が欲しいものを作れるって純粋に楽しいですね。ものづくりの良さを改めて感じました。とりあえず今回作ったものは改修して(特に見た目)、自分だけでも満足して使えるようなものにしたいです。

最後にSpotifyさん、、、これからも宜しくです。