🎵

Spotify APIでプレイリスト作成

2022/04/06に公開

Next.js

Spotifyにログインすることで、ユーザーごとのトップトラックやトップアーティスト、いいねなどを取得しプレイリストを作成できるようにしました。

作ったwebアプリはこちら spotify.noriyu.dev
完成アプリ

このアプリで使っているAPIと、何をやっているかを紹介します。

APIは以下のものを利用しています（全てSpotify API)

アプリを開いてからプレイリストを作成するまでの流れ（図解）

流れの説明

実際に試してみましょう。

アプリを開いてからプレイリストを作成するまでの流れ

曲やアーティストを表示

ログインが成功すると次のような画面になります。
最初の画面

ここから、Track、Artist、Favoriteを選択することで利用するAPIのパラメータが変わります。

Track

Get User's Top Itemsの{type}にtracksを指定して利用しています。

ドキュメントには以下のような説明が記載されています。

Get the current user's top artists or tracks based on calculated affinity.
（DeepL翻訳）計算された親和性に基づいて、現在のユーザーのトップアーティストまたはトラックを取得します。

計算の仕方などはここからわかりませんが取得された結果から、何度も聴いている曲や最近聴いた曲が上位にきているように思えます🤔

Artist

Trackと同じく、Get User's Top Itemsの{type}にartistsを指定して利用しています。

こちらも最近聴いているアーティストが上位にきていました。

Favorite

Get User's Saved Tracks
を利用しています。

Get a list of the songs saved in the current Spotify user's 'Your Music' library.
（DeepL翻訳）現在のSpotifyユーザーの'Your Music'ライブラリに保存されている曲のリストを取得します。

とありますが、つまり「いいね」した曲です。最近のものから順に取得します。

期間

TrackとArtistでは期間を「4 weeks」「6 months」「all times」の中から選択できます。
これはGet User's Top Itemsのtime_rangeの選択です。長期間spotifyを利用している人にとってall timesの順位はなかなか変わりません

さらに表示

Get User's Top ItemsやGet User's Saved Tracks のoffsetを、「さらに表示」を押すごとに20ずつ増やしています。どちらのapiも一度に50件までしか取得できないので、それ以上取得したい場合はoffsetを使います

プレイリスト作成

の4つを使ってます。（こんなに必要になるとは思わなかった・・・）

プレイリストを作るためにはユーザーidが必要なので、　まず Get User's Profileでユーザーidをとってきます。
ユーザーidを使って空のプレイリストを作ります。Create Playlist
空プレイリストに、表示されている楽曲の曲idを追加します。Add Items to Playlist
最後に、作ったプレイリストは非公開状態で作っているので公開するか尋ね、okなら公開にします。Change Playlist Details最初から公開状態でも作れますが、Twitterで共有しなければ非公開のままで良いだろうと思ってこのようにしています。

Twitterでシェア

プレイリストの名前を自由に編集して作成ボタンを押すとプレイリストが作成され自身のspotifyアカウントに追加されます。
「公開する」に変更して、Twitterでシェアしてみましょう！

さいごに

説明は以上となります。Spotify APIを使って遊んでいる記事は少ないので大変でしたが、spotify側のドキュメントやコンソールが充実していて助かりました。ほかにも機能を追加していく予定なので、バグ発見や新機能の要望などがあればお問い合わせフォームから連絡してもらえると助かります。

また、このアプリの名前がありません。。。ドメイン通りspotify.noriyu.devと呼んでいますが、もっと良い名前がないか模索中です。