Spotify API

HTML を使ってキーワードに応じた音楽を鳴らす需要があったので Spotify Web API を調べてみた。以下の要件を満たせればだいたい良い。

• 曲名を検索して音楽を鳴らす。
• アルバムアートの表示
• プログレスバーの表示
• 停止と再生

まず、チュートリアル の通りに作業する。

アカウントを作る

• https://www.spotify.com/ にアクセスしてアカウントを作る。
• https://developer.spotify.com/my-applications に行ってログイン
  • Create an Application に Application Name と Description を入れると更に情報が出る。
  • Redirect URIs とは、認可に使う物らしい。とりあえず http://localhost:8888/callback
  • Client ID と Client Secret を控えておく。

Authorization Code 認可を試す

[Spotify Accounts Authentication Examples]https://github.com/spotify/web-api-auth-examples を使って認可を試す。

git clone [e-mail]:spotify/web-api-auth-examples.git
cd web-api-auth-examples
npm install

app.js を編集

var client_id = 'ここに Client ID を入れる'; // Your client id
var client_secret = 'ここに Client Secret を入れる'; // Your secret
var redirect_uri = 'http://localhost:8888/callback'; // Your redirect uri

実行

node app.js

このプログラムは以下のように動く。

• HTML は２つの状態を持つ
  • 起動時: #login だけ表示。Log in with Spotify ボタンの表示。
  • ログイン時: #loggedin だけ表示。ユーザ情報を表示。
• Log in with Spotify を押すと /login に遷移。app.js が必要な情報を埋めて https://accounts.spotify.com/authorize にリダイレクト。
  • client_id: Client ID
  • scope: 'user-read-private user-read-email' などアプリで使いたい情報
  • redirect: 認可が終わった後リダイレクトする URL
  • state: ランダムな文字列。クッキーにも入れておいて後でリダイレクトから戻ってきた値と比較する。
• https://accounts.spotify.com/authorize はログインが完了すると /callback にリダイレクト(戻る)
  • パラメータ code に token 取得に必要な情報が入っている。
• app.js は /callback が呼ばれると
  • クッキーに保存しておいた state と一致しているか確認。クッキーは廃棄。
  • Client ID, Secret, code を https://accounts.spotify.com/api/token に POST してトークンを取得。
  • grant_type ('authorization_code' 固定) と redirect_uri も必要。
• https://accounts.spotify.com/api/token は access_token と refresh_token を返す。
  • この access_token を使って色々な API にアクセスする。

認可の種類

Spotify では、用途に応じて三種類の認可方式が用意されている。これらの認可方式は Spotify 独自ではなく、OAuth 2.0 という規格に則ったものらしい。

• Authorization Code
  • Client ID と Secret の両方を使う。ブラウザで Spotify にログインが必要。
  • 上記でテストしたもの
• Client Credentials
  • Client ID と Secret の両方を使う。ブラウザでのログイン不要だがユーザデータにアクセス出来ない。
  • サーバー間通信を意図した物。ブラウザから使うと CORS に引っかかる。
• Implicit Grant
  • Client ID だけを使う。ブラウザで　Spotify にログインが必要。認可コード不要。

API の試験

一旦 token を取得すると、API Console を使って API の試験が出来る。Spotify API の一番面倒くさい部分が認可で、その認可も OAuth 2.0 標準に従っているだけだ。残りの部分は素直な REST API だ。

もともとの目的を達成するためには以下の情報があれば良いとわかった。

• Search for an Item
  • キーワードを元に artist, playlist, track の組わせで検索出来る。
  • track だけで検索しても十分沢山出てくる。
• track object
  • 検索対象に track を選ぶと 結果は track object のリストが返る。
  • 曲名やアーティスト名が格納されている。
• Spotify では、今のところ HTML 上で音楽プレイヤーを実装するために必要な API が足りていないので、本物のプレイヤーを実装する事は出来ない。
• 裏技(?) として、track object には 30 秒間の視聴が出来る preview_url が含まれているので、これを Audio タグで鳴らして一応音楽再生は出来る。

参考

• Spotify Web API
• Web API Authorization Guide
• https://developer.spotify.com/showcase/item/thirtify-spotify/
  • Implicit Grant を使ったデモ。サンプル再生が出来る。
• Is there a JS SDK for the player? Can I send play/pause commands using Javascript?
  • まだ本物の音楽プレイヤは実装出来ません。