音樂排行追蹤器

專案背景與介紹

音樂排行追蹤器是一個可以查詢 Spotify 歌手專輯與歌曲每日串流量、總串流量及音樂詳細資料的 App。使用者也可以查看特定歌手在 Billboard HOT 100 的歷史排名紀錄，以及依據日期查看特定週的 Billboard HOT 100 榜單。

我平常會使用 Kworb.net 查詢 Spotify 串流資料，但在手機上的使用體驗並不理想，介面沒有針對行動裝置做好響應式設計，也沒有提供方便的查詢、排序等功能，因此每次想在手機上查看資料時都相當不方便。我在確認其 robots.txt 允許爬蟲後，便開始開發這個 App，希望讓音樂串流量與榜單資料能以更適合手機操作的方式呈現，並提供更方便的查詢與排序功能。

Kworb.net 網站畫面

此應用程式僅做為非營利及學習用途

專案截圖與功能說明

每日歌曲／專輯串流量與總串流量

Loading Placeholder

音樂詳情

合作歌手（如果一首歌或專輯有多位歌手合作）

除了歐美歌手，也可以查詢華語歌手串流量

Kpop 歌手串流量

篩選一專輯所有歌曲

Billboard History

特定歌手在 Billboard HOT 100 的所有歷史排名與歌曲排名詳情

依據在榜週數及排名排序

Billboard Date

依據使用者選擇的日期取得該週 Billboard HOT 100 榜單，並顯示該週前 100 名歌曲與排名資料。

功能實作與資料處理邏輯

串流量取得邏輯

透過 TextField 取得使用者輸入的歌手名稱
將歌手名稱向後端 API 伺服器發送 HTTP GET 請求
使用 Spotify API 的 GET /v1/search 端點搜尋歌手，指定 type=artist 並以歌手名稱作為搜尋關鍵字，取得第一筆搜尋結果中的歌手名稱、ID、圖片等資訊，讓使用者不必輸入完整歌手名稱。例如輸入 Tay，即可搜尋到 Taylor Swift 等相關歌手
依據歌手 ID 與音樂類型至 Kworb.net 爬取歌手專輯或歌曲每日串流量，網址格式為 https://kworb.net/spotify/artist/${artistId}_${type}.html。以 Taylor Swift 為例：https://kworb.net/spotify/artist/06HL4z0CvFAxyc27GXpf02_songs.html
使用 cheerio 套件解析 HTML，並針對可能為 NaN 的串流量做處理轉為 0。解析歌名或專輯名時，會進一步解析 a 標籤的 href 屬性。網站中，每首歌曲會帶 Spotify URL，格式如 https://open.spotify.com/track/1BxfuPKGuaTgP7aM0Bbdwr，這時可以從 URL 中取得歌曲 ID 1BxfuPKGuaTgP7aM0Bbdwr，再依據資料類型向 Spotify API 取得歌曲或專輯的封面與相關資訊，提供給 App 顯示

特別注意：歌曲資料回傳的 Spotify URL 特意設計改為專輯的 URL，而非歌曲的 URL，目的是避免讓使用者點擊按鈕打開 Spotify 後會直接播放歌曲，切斷他們正在聽的音樂，影響使用者體驗。

串流量回傳範例

{
    "artistInfo": {
        "name": "Taylor Swift",
        "image": "https://i.scdn.co/image/ab6761610000e5ebe672b5f553298dcdccb0e676"
    },
    "date": "2024/07/31",
    "streamData": [
        {
            "rank": 1,
            "musicName": "Cruel Summer",
            "albumName": "Lover",
            "albumType": null,
            "totalTracks": null,
            "trackNumber": 2,
            "duration": "2:58",
            "releaseDate": "2019-08-23",
            "imageUrl": "https://i.scdn.co/image/ab67616d0000b273e787cffec20aa2a396a61647",
            "totalStreams": 2335196365,
            "dailyStreams": 2953320,
            "popularity": 92,
            "availableMarkets": null,
            "spotifyUrl": "https://open.spotify.com/album/1NAmidJlEaVgA3MpcPFYGq",
            "musicId": "1BxfuPKGuaTgP7aM0Bbdwr",
            "isCollaboration": false
        },
        {
            "rank": 40,
            "musicName": "Fortnight (feat. Post Malone)",
            "albumName": "THE TORTURED POETS DEPARTMENT: THE ANTHOLOGY",
            "albumType": null,
            "totalTracks": null,
            "trackNumber": 1,
            "duration": "3:48",
            "releaseDate": "2024-04-19",
            "imageUrl": "https://i.scdn.co/image/ab67616d0000b2738ecc33f195df6aa257c39eaa",
            "totalStreams": 545126846,
            "dailyStreams": 2431027,
            "popularity": 82,
            "availableMarkets": null,
            "spotifyUrl": "https://open.spotify.com/album/5H7ixXZfsNMGbIE5OBSpcb",
            "musicId": "6dODwocEuGzHAavXqTbwHv",
            "isCollaboration": true
        }
    ]
}

合作歌手邏輯

在獲取音樂資訊時依據 track.artists.length > 1 判斷是否有合作歌手
若該音樂有合作歌手，在 App 中點進音樂詳情頁面時，會向後端發送請求，依據音樂類型，分別使用 Spotify API 的 GET /v1/tracks/{id} 或 GET /v1/albums/{id} 端點取得歌曲或專輯資料，並從 artists 欄位取得合作歌手的資訊

合作歌手回傳範例

[
    {
        "name": "Jessie J",
        "image": "https://i.scdn.co/image/ab6761610000e5eb91f0dd753c09e051675a1ca6"
    },
    {
        "name": "Ariana Grande",
        "image": "https://i.scdn.co/image/ab6761610000e5eb40b5c07ab77b6b1a9075fdc0"
    },
    {
        "name": "Nicki Minaj",
        "image": "https://i.scdn.co/image/ab6761610000e5eb07a50f0a9a8f11e5a1102cbd"
    }
]

資料來源與版權聲明

串流資料

Spotify 串流資料來自 Kworb.net，該網站提供各大平台串流量的排行榜，包括 Spotify、iTunes、YouTube 等。音樂資料則來自 Spotify API，更多資訊請參考 Spotify for Developers。

Billboard HOT 100

本項目使用由 mhollingshead 整理的 Billboard HOT 100 JSON 格式榜單資料作為資料來源，涵蓋從 1958 年到目前的每週排行榜數據。本資料僅用於個人學習和練習，無任何商業用途。本項目與任何官方機構或公司無關，資料由 Billboard 擁有，更多詳情請參考 Penske Media Corporation 和 Billboard。