Zenn
👻

TypeScriptでSpotifyのAPIを叩いて、Podcastを取得してみる

2023/11/21に公開
TypeScript
API
Spotify
tech

Spotify APIを叩いてみました。

よく聞くPodcastなのですが、今回は『霜降り明星のオールナイトニッポン』をの情報を一括で取れるのかな？という興味本位でやってみました。以下のページです。

https://open.spotify.com/show/6BSPw7yLnXxb2jFuuCyXpb

Spotify APIのドキュメントに訪れてみる

あれ？Podcastの欄がなくね？と思い、よくよくURLを見てみると、Podcastは "show" の配下にあるようでした。

まず、Getting started with Web API

https://developer.spotify.com/documentation/web-api/tutorials/getting-started

勝手な感覚だと、普通にAPI叩けそうだと思ったんですが、なんかトークンをcurlで叩かなければならないようです。アカウントを作り、アプリを作成して行きます。

そのアプリの中のSettingから

  • Client ID
  • App Status
  • Client secret

が取得できると思います。

curl -X POST "https://accounts.spotify.com/api/token" \
     -H "Content-Type: application/x-www-form-urlencoded" \
     -d "grant_type=client_credentials&client_id=your-client-id&client_secret=your-client-secret"
  • your-client-id　に　取得したClient ID
  • your-client-secret　に　取得したClient secret

を入れる。叩くと...↓が返ってきます！

結果
{
  "access_token": "BQDBKJ5eo5jxbtpWjVOj7ryS84khybFpP_lTqzV7uV-T_m0cTfwvdn5BnBSKPxKgEb11",
  "token_type": "Bearer",
  "expires_in": 3600
}

情報取得してみる

コードですよ。ほい。

$ npm install axios

上記のパッケージを入れた上で、試してください。

getPodcastInfo.ts
import axios from 'axios';

const clientId = '<client ID>'; // SpotifyのクライアントID
const clientSecret = '<client Secret>'; // Spotifyのクライアントシークレット

// SpotifyのAPIからOAuthトークンを取得
// curlで叩いたaccess_tokenと同じことをしていますが、access tokenの有効時間が1時間のようなので、その度に叩くことにしています
async function getSpotifyToken() {
    const tokenResponse = await axios({
        method: 'post',
        url: 'https://accounts.spotify.com/api/token',
        data: 'grant_type=client_credentials',
        headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Basic ' + (new Buffer(clientId + ':' + clientSecret).toString('base64'))
        }
    });
    
    return tokenResponse.data.access_token;
}

// 指定されたshowを取得
async function getShowInfo(showId: string) {
    const token = await getSpotifyToken();

    const showResponse = await axios({
        method: 'get',
        url: `https://api.spotify.com/v1/shows/${showId}`,
        headers: {
        'Authorization': `Bearer ${token}`
        }
    });

    return showResponse.data;
}

// 今回は、showで別のURLでも取れるように分離
// https://open.spotify.com/show/6BSPw7yLnXxb2jFuuCyXpb ←ここ
const showId = '6BSPw7yLnXxb2jFuuCyXpb'; // SpotifyのShowのID
getShowInfo(showId).then(showInfo => {
    console.log(showInfo);
});

結果

取得内容を変える

ちょっと色々情報がありすぎるので、それぞれのエピソードの題名（description）を抽出するようにします。

getDescription.ts
// ここまで上と同じ。
getShowInfo(showId).then(showInfo => {
    const episodes = showInfo.episodes.items.length

    for (var i = 0; i < episodes; i++) {
        console.log(i+1, " : ", showInfo.episodes.items[i].description);
    }
    
});

結果

1  :  2023/11/17(金)放送回をポットキャスト配信　『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
2  :  2023/11/10(金)放送回をポットキャスト配信　『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
3  :  2023/11/03(金)放送回をポットキャスト配信　『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
4  :  2023/10/27(金)放送回をポットキャスト配信　『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
5  :  2023/10/20(金)放送回をポットキャスト配信　　ゲスト #ネタ職人チャンピオンシップ 　『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
6  :  2023/10/13(金)放送回をポットキャスト配信　『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
7  :  2023/10/06(金)放送回をポットキャスト配信　『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
8  :  2023/09/29(金)放送回をポットキャスト配信　『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
9  :  2023/09/22(金)放送回をポットキャスト配信　せいや 結婚発表回　『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
10  :  2023/09/15(金)放送回をポットキャスト配信この夏一番面白いリスナーが決定するネタ職人レース「霜降り甲子園」開催『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
11  :  2023/09/08(金)放送回をポットキャスト配信『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
12  :  2023/09/01(金)放送回をポットキャスト配信ゲスト #三浦マイルド さん『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
13  :  2023/08/25(金)放送回をポットキャスト配信『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
14  :  2023/08/18(金)放送回をポットキャスト配信『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
15  :  2023/08/11(金)放送回をポットキャスト配信　今回は、せいやさんはお休み。粗品さんだけの回です。　　今回は、番組の構成上、ステレオでお送りしています。ヘッドフォン、イヤフォンなどでお聞き頂くと、より楽しめると思います。『霜降り明星のオールナイトニッポン』生放送は、毎週金曜日25時から！ Learn more about your ad choices. Visit podcastchoices.com/adchoices
:
:
:

とりあえず叩けば、いろいろな情報が取れそうなので、いろんなことに使えそうなことがわかった

Discussion