Інтеграція Spotify API з сайтом

Інтеграція Spotify API з веб-сайтом

Spotify Web API використовується для відображення поточної композиції художника, вбудовування плеєрів та створення музичних рекомендацій на вашому сайті. Актуальна для веб-сайтів музикантів, подкастерів, фан-порталів.

Аутентифікація

Client Credentials Flow — для серверних запитів без участі користувача (дані про артистів і альбоми):

async function getSpotifyToken(): Promise<string> {
  const credentials = Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString('base64');
  const resp = await fetch('https://accounts.spotify.com/api/token', {
    method: 'POST',
    headers: { 'Authorization': `Basic ${credentials}`, 'Content-Type': 'application/x-www-form-urlencoded' },
    body:    'grant_type=client_credentials',
  });
  const data = await resp.json();
  return data.access_token;  // живе 3600 секунд
}

Authorization Code Flow — для даних користувача (поточна композиція, плейлисти).

Дані про художника

async function getArtistData(artistId: string): Promise<ArtistData> {
  const token = await getSpotifyToken();

  const [artist, topTracks, albums] = await Promise.all([
    fetch(`https://api.spotify.com/v1/artists/${artistId}`, {
      headers: { Authorization: `Bearer ${token}` },
    }).then(r => r.json()),

    fetch(`https://api.spotify.com/v1/artists/${artistId}/top-tracks?market=RU`, {
      headers: { Authorization: `Bearer ${token}` },
    }).then(r => r.json()),

    fetch(`https://api.spotify.com/v1/artists/${artistId}/albums?include_groups=album,single&market=RU&limit=10`, {
      headers: { Authorization: `Bearer ${token}` },
    }).then(r => r.json()),
  ]);

  return {
    name:       artist.name,
    followers:  artist.followers.total,
    genres:     artist.genres,
    popularity: artist.popularity,
    image:      artist.images[0]?.url,
    topTracks:  topTracks.tracks.slice(0, 5).map((t: any) => ({
      name:     t.name,
      preview:  t.preview_url,  // 30-секундний MP3 превью
      duration: t.duration_ms,
    })),
    latestAlbum: albums.items[0],
  };
}

Вбудовування плеєра

<!-- Spotify Embed — не вимагає API -->
<iframe
  src="https://open.spotify.com/embed/track/TRACK_ID?utm_source=generator&theme=0"
  width="100%" height="152"
  frameBorder="0"
  allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
  loading="lazy">
</iframe>

Віджет "Now Playing"

// Вимагає Authorization Code Flow + scope: user-read-currently-playing
async function getNowPlaying(userAccessToken: string) {
  const resp = await fetch('https://api.spotify.com/v1/me/player/currently-playing', {
    headers: { Authorization: `Bearer ${userAccessToken}` },
  });
  if (resp.status === 204) return null;  // нічого не грає
  return resp.json();
}

Час реалізації: 2–3 робочих дня.