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

https://zenn.dev/jin237/articles/ae88f906d958cd

※これをそのまま持ってきただけです。（筆者も私です。）



# Spotify APIを叩いてみました。

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

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

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

![](https://storage.googleapis.com/zenn-user-upload/d055bc5e51c9-20231121.png)

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

# まず、Getting started with Web API

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

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

![](https://storage.googleapis.com/zenn-user-upload/1e7e3d6162a4-20231121.png)

そのアプリの中のSettingから

- Client ID
- App Status
- Client secret

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

```terminal
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

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

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

# 情報取得してみる

コードですよ。ほい。

```terminal
$ npm install axios
```

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

```typescript: 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);
});
```


### 結果

![](https://storage.googleapis.com/zenn-user-upload/8f04f0448947-20231121.png)


## 取得内容を変える

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

```typescript: 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);
    }
    
});
```

結果

```terminal
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
:
:
:
```



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