Spotify Web APIを使ってて躓いた話
はじめに
今回研究に使用するアプリケーションの実装の一環でSpotify Web APIを使用してNext.jsとSupabaseを使用した簡単な楽曲の推薦アプリを作成しました。その実装をするうえでSpotify Web APIの仕様の部分でいくつか「なんやねんこれ...」って思った点がいくつかありましたので、まとめておきたいと思います。
Get Playlist
と Get User's Saved Tracks
のレスポンスの違い
今回「ユーザーのプレイリスト情報の取得」と「ユーザーのお気に入りの曲の取得」を行うために使用したGet Playlist
と Get User's Saved Tracks
というAPIがあります。
↓
Get Playlist
↓
Get User's Saved Tracks
これらは『プレイリストから楽曲を取得する』『お気に入りの曲のプレイリストから楽曲を取得する』という楽曲の取得で共通部分があります。
がしかし、なんと楽曲情報のjsonレスポンスの形が一緒ではないのです。
詳細を見ていきましょう。
それぞれのResponse sampleをみてみる
Get Playlist
のほうは以下のようになっています。
{
・
・
・
"tracks": {
"href": "https://api.spotify.com/v1/me/shows?offset=0&limit=20",
"limit": 20,
"next": "https://api.spotify.com/v1/me/shows?offset=1&limit=1",
"offset": 0,
"previous": "https://api.spotify.com/v1/me/shows?offset=1&limit=1",
"total": 4,
"items": [
{
"added_at": "string",
"added_by": {
"external_urls": {
"spotify": "string"
},
"followers": {
"href": "string",
"total": 0
},
"href": "string",
"id": "string",
"type": "user",
"uri": "string"
},
"is_local": false,
"track": {
"album": {
"album_type": "compilation",
"total_tracks": 9,
・
・
・
"preview_url": "string",
"track_number": 0,
"type": "track",
"uri": "string",
"is_local": false
}
}
]
},
"type": "string",
"uri": "string"
}
レスポンスの形としては、tracks
というオブジェクトの中に楽曲情報をまとめたitems
というオブジェクトが入っている形になっています。
対して、Get User's Saved Tracks
のほうはは以下のようになっています。
{
"href": "https://api.spotify.com/v1/me/shows?offset=0&limit=20",
"limit": 20,
"next": "https://api.spotify.com/v1/me/shows?offset=1&limit=1",
"offset": 0,
"previous": "https://api.spotify.com/v1/me/shows?offset=1&limit=1",
"total": 4,
"items": [
{
"added_at": "string",
"track": {
"album": {
"album_type": "compilation",
"total_tracks": 9,
・
・
・
"preview_url": "string",
"track_number": 0,
"type": "track",
"uri": "string",
"is_local": false
}
}
]
}
こちらはitems
というオブジェクトのみで楽曲情報をまとめているのです!
つまり、Get User's Saved Tracks
はGet Playlist
とは違い、
「tracks
というオブジェクトから楽曲を取得することはできない!」
ということになります。
まとめ
この違いを覚えておかないと、Next.jsで楽曲を取得する際にtypescriptのinterfaceの型定義で
「あれ...Get User's Saved Tracks
で楽曲が取得できるのに、Get Playlist
では楽曲が取得できないんだけどなんで...??」
と僕のように困り果てることになりますので、よく覚えておきましょう。
※ 参考までにですが、Get Playlist
以外にも「プレイリストの楽曲を取得する」機能を持つAPIとしてGet Playlists Tracks
というAPIもあります。こちらはプレイリストのIDを参照してそのプレイリストの楽曲情報のみを取得するために提供されているAPIですので、特定のプレイリストについて楽曲取得がしたい場合にはこちらを使うとよいでしょう。
iframe
ではプレビューになる
楽曲をWeb上で再生するときに取得してきたユーザーの楽曲情報について、Webアプリ上で再生しようと思った際に以下のように実装していました。
<iframe
src={`https://open.spotify.com/embed/track/${track.spotify_track_id}`}
width="100%"
height="80"
frameBorder="0"
allow="encrypted-media"
/>
しかし、この実装では30秒 ~ 1分ほどのプレビュー再生しかできませんでした。
これを解決するために、Web Playback SDK
を使用しての実装に変更する必要がありました。
具体的な詳細については、以下の記事にてまとめておりますのでご覧ください。
現在制作中
Get Track's Audio Features
が使えなくなっていた(のにReferenceには残っているのがク〇)
詳細は以下の公式からの発表をご覧ください。
ReferenceのAPI名の隣にタグ付けで「Deprecated」とある
気づかなかった僕も僕ですが、みなさんも気づかずに使えないAPIにずっとリクエストを送るのはやめましょう。。。
Discussion