🎵

Spotify Web APIを使ってて躓いた話

2025/01/27に公開

はじめに

今回研究に使用するアプリケーションの実装の一環でSpotify Web APIを使用してNext.jsとSupabaseを使用した簡単な楽曲の推薦アプリを作成しました。その実装をするうえでSpotify Web APIの仕様の部分でいくつか「なんやねんこれ...」って思った点がいくつかありましたので、まとめておきたいと思います。

Get PlaylistGet User's Saved Tracksのレスポンスの違い

今回「ユーザーのプレイリスト情報の取得」と「ユーザーのお気に入りの曲の取得」を行うために使用したGet PlaylistGet User's Saved TracksというAPIがあります。

↓ Get Playlist

https://developer.spotify.com/documentation/web-api/reference/get-playlist

↓ Get User's Saved Tracks

https://developer.spotify.com/documentation/web-api/reference/get-users-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 TracksGet Playlistとは違い、
tracksというオブジェクトから楽曲を取得することはできない!
ということになります。

まとめ

この違いを覚えておかないと、Next.jsで楽曲を取得する際にtypescriptのinterfaceの型定義で
「あれ...Get User's Saved Tracksで楽曲が取得できるのに、Get Playlistでは楽曲が取得できないんだけどなんで...??」
と僕のように困り果てることになりますので、よく覚えておきましょう。

※ 参考までにですが、Get Playlist以外にも「プレイリストの楽曲を取得する」機能を持つAPIとしてGet Playlists TracksというAPIもあります。こちらはプレイリストのIDを参照してそのプレイリストの楽曲情報のみを取得するために提供されているAPIですので、特定のプレイリストについて楽曲取得がしたい場合にはこちらを使うとよいでしょう。

https://developer.spotify.com/documentation/web-api/reference/get-playlists-tracks

楽曲をWeb上で再生するときにiframeではプレビューになる

取得してきたユーザーの楽曲情報について、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には残っているのがク〇)

詳細は以下の公式からの発表をご覧ください。
https://developer.spotify.com/blog/2024-11-27-changes-to-the-web-api
楽曲情報を分析するために楽曲特徴量の取得をしたかったのですが、実装一か月前に使えなくなっていました。しかもReferenceには「Deprecated」というタグが付いているだけでページ自体は残っています。

ReferenceのAPI名の隣にタグ付けで「Deprecated」とある

気づかなかった僕も僕ですが、みなさんも気づかずに使えないAPIにずっとリクエストを送るのはやめましょう。。。

Discussion