FaceTune/spotifyrecommendation.html at main · nirutthyu/FaceTune · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spotify Recommendations</title>
</head>
<body>
    <h1>Spotify Recommendations</h1>
    <div id="topTracks"></div>
    <div id="recommendations"></div>
    <div id="playlist"></div>

    <script>
        const token = 'BQAQ8FJy7IN2CF-g4sNJ_uc_XebBxtJBiPxHmBoD163w06UmgSJMUQvX8Fy7FKG1s467xxHmlTooAw2Os05HQIEzDOFIb_rdz-X_1o02EcAbMWfi23Psmd_0gtcoBMzgwjRq-uMfE7mZpoVCxNV5MYT0W1w5dnM_cQ2g__858Bk9Vt8pUZ2oOpH9Nk2VocAetUsfNivrOqCYCIKIsLB0SI8VOh1NqXvxGf8TJ7Glx3-hcttELX_-rblwVSJ4x9cQk7rEiXsuKK91YLQuLvj-';

        async function fetchWebApi(endpoint, method, body) {
            const res = await fetch(`https://api.spotify.com/${endpoint}`, {
                headers: {
                    Authorization: `Bearer ${token}`,
                },
                method,
                body: JSON.stringify(body)
            });
            return await res.json();
        }

        async function getTopTracksAndRecommendations() {
            const topTracksIds = [
                '3afkJSKX0EAMsJXTZnDXXJ', '0TL0LFcwIBF5eX7arDIKxY', '5Gu0PDLN4YJeW75PpBSg9p', '5IgjP7X4th6nMNDh4akUHb', '3RhyHYnYxuGnP8njFlNxHq'
            ];

            // Get user's top tracks
            const topTracks = await fetchWebApi('v1/me/top/tracks?time_range=long_term&limit=5', 'GET');
            const topTrackNames = topTracks.items.map(({ name, artists }) =>
                `${name} by ${artists.map(artist => artist.name).join(', ')}`
            );

            // Get recommendations based on user's top tracks
            const recommendations = await fetchWebApi(`v1/recommendations?limit=5&seed_tracks=${topTracksIds.join(',')}`, 'GET');
            const recommendedTrackNames = recommendations.tracks.map(({ name, artists }) =>
                `${name} by ${artists.map(artist => artist.name).join(', ')}`
            );

            // Update HTML content for top tracks and recommendations
            document.getElementById('topTracks').innerHTML = `<h2>Top Tracks</h2><ul>${topTrackNames.map(track => `<li>${track}</li>`).join('')}</ul>`;
            document.getElementById('recommendations').innerHTML = `<h2>Recommendations</h2><ul>${recommendedTrackNames.map(track => `<li>${track}</li>`).join('')}</ul>`;

            // Get playlist
            const playlistId = '5flQrsB1RmIZ7BZ48lAw0e';
            document.getElementById('playlist').innerHTML = `
                <h2>Spotify Embed: Recommendation Playlist</h2>
                <iframe
                    title="Spotify Embed: Recommendation Playlist"
                    src="https://open.spotify.com/embed/playlist/${playlistId}?utm_source=generator&theme=0"
                    width="100%"
                    height="380"
                    frameBorder="0"
                    allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                    loading="lazy"
                ></iframe>`;
        }

        // Call the function to fetch data and update HTML content
        getTopTracksAndRecommendations();
    </script>
</body>
</html>