【Spotify WEB API】SpotifyのWEB APIを使って楽曲を取得し再生する

2014年12月1日

Pocket

spotify_thamb

海外では大人気の音楽ストリーミングサービス『Spotify』
日本上陸も目前!?のはずなので、いち早くSpotifyのAPIの使い方を解説したいと思います!
Spotify WEB APIを利用して検索をかけたり、プレイヤーを埋め込んだりしてみました。
 
先日、MUSICIANS HACKATHONに参加したのですが、参加者は期間限定でSpotifyのプレミアム会員になれるのです!
これは使わなくては損だということで、ハッカソンではSpotifyとGracenoteのAPIを利用してサービスを作りました!!
今回のハッカソンで私はGracenote使用部分を作成していたので、Spotifyの部分は担当していないのですが、勉強のためにSpotifyも個人的に実験してみました。
 
 
Spotify Web API – Spotify Developer
 
 
 

アプリ作成

まず、Spotifyのログインします。
Spotify DeveloperのMy Applicationsのページでアプリを作成します。
アプリ作成
 
“CREATE AN APP”をクリックします。
spotify1
アプリが作成されました。
Application NameとApplication Descriptionを入力し、”CREATE”をクリックします。
spotify2
 
Redirect URIsを設定します。
spotify3
見えないように伏せていますが、Client IDとClient Secretが表示されているはずです。
Client IDとClient Secretはあとで使います。
 
 

情報取得

アプリの作成が終わったので、次に使用ファイルをダウンロードします。
Spotify DeveloperサイトのWeb API -> Code Exampleページでさまざまなサンプルコードが見れます。
今回は、spotify-web-api-phpを利用しますので、下の方にあるjwilsson/spotify-web-api-phpをクリックし、spotify-web-api-phpのzipファイルをダウンロードします。
https://github.com/jwilsson/spotify-web-api-php
 
spotify4
 
ダウロードしたファイルを解凍し中にあるsrcフォルダを任意の場所に置きます。
私は、spotifyをいうファルダを作成しその中にsrcフォルダを入れましたので、それで解説していきます。
 
spotifyフォルダの中にdemo.phpというファイルを作り、下記のコードを書きます

<?php
require 'src/SpotifyWebAPI.php';
require 'src/Request.php';
require 'src/Session.php';
require 'src/SpotifyWebAPIException.php';

$session = new Session(
'SPOTIFY_CLIENT_ID', //APPのCLIENT_IDを入れる
'SPOTIFY_CLIENT_SECRET', //APPのCLIENT_SECRETを入れる
'SPOTIFY_REDIRECT_URI' //APPのRedirect URIsを入れる
);
$api = new SpotifyWebAPI();

if (isset($_GET['code'])) {
    $session->requestToken($_GET['code']);
    $api->setAccessToken($session->getAccessToken());

    print_r($api->me());
} else {
    header('Location: ' . $session->getAuthorizeUrl(array(
        'scope' => array('user-read-email', 'user-library-modify')
    )));
}
?>

 
実行するとログイン画面が表示されます。
spotify6
 
ログインするとログインしたアカウントのユーザー情報が取得でき、表示されます。
ログインすると他のユーザーのプレイリストを見れたり、ログインした人のプレイリストにトラックを追加したり、さまざまなことができるようになります。
 
 

プレイリスト作成デモ

ユーザー『pixiesofficial』のプレイリストを一つ取得して、トラックを表示させるデモを作ってみました。
Spotifyのアカウントお持ちの方はログインすると見れます。
 
DEMO
 
spotify7
 
コード

<?php
require 'src/SpotifyWebAPI.php';
require 'src/Request.php';
require 'src/Session.php';
require 'src/SpotifyWebAPIException.php';

$session = new Session('SPOTIFY_CLIENT_ID', 'SPOTIFY_CLIENT_SECRET', 'SPOTIFY_REDIRECT_URI');
$api = new SpotifyWebAPI();

if (isset($_GET['code'])) {
    $session->requestToken($_GET['code']);
    $api->setAccessToken($session->getAccessToken());

    //pixiesofficialというユーザー名でプレイリストを一つ取得
    $playlists = $api->getUserPlaylists('pixiesofficial', array(
        'limit' => 1
    ));
    //取得したプレイリストのIDを変数へ代入
    $playlist_id = $playlists->items[0]->id;

    //pixiesofficialというユーザー名での$playlist_idのトラックを取得
    $tracks = $api->getUserPlaylistTracks('pixiesofficial', $playlist_id);

} else {
    header('Location: ' . $session->getAuthorizeUrl(array(
        'scope' => array('user-read-email', 'user-library-modify')
    )));
}

?>


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
</head>
<body>

	<?php foreach ($tracks->items as $track) : ?>
	       <!-- Spotify埋め込み -->
		<iframe src="https://embed.spotify.com/?uri=spotify:track:<?php echo $track->track->id; ?>" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>

	<? endforeach; ?>

</body>
</html>

 
 

楽曲を検索デモ

会員じゃない人がログインしないでも見れる検索方法もあります。
楽曲を検索してヒットしたトラックのプレイヤーを作成します。
 
DEMO
 
 
コード

<?php
require 'src/SpotifyWebAPI.php';
require 'src/Request.php';
require 'src/Session.php';
require 'src/SpotifyWebAPIException.php';

$submit_flg = false;

if($_POST['submit']){

	$submit_flg = true;

	$artist = htmlspecialchars($_POST['artist'],ENT_QUOTES);
	$title = htmlspecialchars($_POST['title'],ENT_QUOTES);

	$api = new SpotifyWebAPI();

	//キーワードの含まれるトラックを検索
	$tracks = $api->search($artist . '  ' . $title, 'track',array(
    'limit' => 1
));

	//トラックのIDを変数へ代入
	$track_id = $tracks->tracks->items[0]->id;

}


?>

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
</head>
<body>

<form action="" method="post">
	アーティスト<input type="input" name="artist"><br>
	曲名<input type="input" name="title"><br>
	<input type="submit" name="submit" value="検索">
</form>

<?php if($submit_flg) : ?>
	       
		<iframe src="https://embed.spotify.com/?uri=spotify:track:<?php echo $track_id; ?>" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>

<?php endif; ?>

</body>
</html>

 
 
Spotifyは、まだ日本に入ってきてないサービスですのす。プレミアム会員になるには対応している国のクレジット情報が必要ですので、現状日本ではまだしばらく全てのAPIは利用できない状態です。

このサイトについて


『意識低い系女と高い系男の一年戦争』はクリエイティブ会社エアゼの代表2人が運営するブログです。エアゼは、アプリ・Web・IoT・インタラクティブコンテンツのデザイン・開発を手がけています。

エアゼ ホームページ