Skip to main content
Photo from unsplash: spotify-now-playing_n37szf

Cara Menampilkan Lagu Now Playing di Spotify dengan Next.js

Written on January 25, 2021 by Theodorus Clarence.

Last updated November 12, 2021.

See changes
5 min read
––– views
Read in English

Introduction

Pada website theodorusclarence.com, saya menggunakan sebuah API dari Spotify untuk menunjukkan lagu apa yang sedang saya putar secara live. Sekarang, saya akan memberitahu bagaimana cara membuat persis seperti yang saya tunjukkan dengan menggunakan Next.js.

Next.js memiliki fitur khusus yaitu kita bisa membuat api route semacam express dalam 1 aplikasi itu, maka memilih Next.js menjadi pilihan yang sangat tepat.

spotify-playing

Website Demo


1. Membuat Aplikasi di Spotify Developer

  • Masuk ke website Spotify Developer
  • Klik Create An App
  • Masukkan App Name, App description, kemudian Create
Dashboard
  • Selanjutnya, kamu akan mendapatkan Client ID dan Client Secret (Jangan memberikan kode ini ke siapa-siapa)
Client Info
  • Buka edit settings, kemudian masukkan http://localhost:3000 pada RedirectURIs
Edit Settings

Step pertama selesai! Sekarang kamu harus melakukan authentication untuk mendapatkan access & refresh token


2. Authentication Account

Untuk melakukan authentication, kita harus menyiapkan CLIENT ID dan memasukkan ke link dibawah:

https://accounts.spotify.com/authorize?client_id=MASUKKAN_CLIENT_ID_DISINI&response_type=code&redirect_uri=http
%3A%2F%2Flocalhost:3000&scope=user-read-currently-playing

contoh:

https://accounts.spotify.com/authorize?client_id=eaccb97f6d0e405897adf1dd80b95c01&response_type=code&redirect_uri=http
%3A%2F%2Flocalhost:3000&scope=user-read-currently-playing

Buka link tersebut di browser, kemudian anda akan diarahkan ke redirect uri, copy link websitenya

Redirect URI

Contoh link redirect sebagai berikut:

http://localhost:3000/?code=AQBeA9SD7QbA9hUfv_TfmatYxT51CY87msMnOZmMbhf7ZaxfbvG7oKEsATOJBxDyFap0Aq6uftY0v4Hq1QSy3MgQBfAHhmrifty-62rfDRlFnd0AzXRBOMpoOSA6SNw_uTPp7AixAE5zosgiIIf7efhzf1QOJfLh1HUYi248z8jk1x2jjKG2YLvMyJuP0rjB5tP5UHjoFGBvKbULpchkF6yiJHnS

code yang kamu miliki adalah yang setelah tanda sama dengan (=). Jangan lupa dicatat

Kemudian kita membutuhkan authorization client yang telah diencrypt dengan base64, gunakan aplikasi base64 encoding untuk mengencrypt data dengan format client_id:client_secret

Contohnya sebagai berikut:

Base64 Encode

Kemudian, catat hasil encrypt base64 tersebut.

Setelah itu buka terminal / cmd, kemudian jalankan command berikut, jangan lupa ubah base64 dan code milik kamu.

curl -H "Authorization: Basic MASUKKAN_BASE64_DISINI"
-d grant_type=authorization_code -d code=MASUKKAN_CODE_DISINI -d redirect_uri=http%3A
%2F%2Flocalhost:3000 https://accounts.spotify.com/api/token

*pastikan command berada dalam 1 line

Contoh:

curl -H "Authorization: Basic ZWFjY2I5N2Y2ZDBlNDA1ODk3YWRmMWRkODBiOTVjMDE6YTQxOTVjMmQwYTQyNDM2MDllNjk3ZTYwMmU3MGI3NjI=" -d grant_type=authorization_code -d code=AQBeA9SD7QbA9hUfv_TfmatYxT51CY87msMnOZmMbhf7ZaxfbvG7oKEsATOJBxDyFap0Aq6uftY0v4Hq1QSy3MgQBfAHhmrifty-62rfDRlFnd0AzXRBOMpoOSA6SNw_uTPp7AixAE5zosgiIIf7efhzf1QOJfLh1HUYi248z8jk1x2jjKG2YLvMyJuP0rjB5tP5UHjoFGBvKbULpchkF6yiJHnS -d redirect_uri=http%3A%2F%2Flocalhost:3000 https://accounts.spotify.com/api/token

Kamu akan mendapatkan return JSON yaitu:

{
  "access_token": "BQDKxO7h1I1wA3esGK9zCFWn97XORJEPjwAHAEIxCnDXcmy9GbEuPacquwWvpiM4d33gJVHVOP9KUxY8AXkpXc-_zRFZBfneHM2vEeV1Fbfr-0Mw94oimlNf77dRiyxPpm4IUVNLloUWgYcfkAO0",
  "token_type": "Bearer",
  "expires_in": 3600,
  "refresh_token": "AQAtxXvnzRTt4c2-2_Av2WyJQKWxUW_hMVN6QNiqv2i8A2ZElVarmvdhqyc8Pf-Z5n827FTFxTpHq5E3kOsrlRWM3TuJWxjVQsW0icR0zo3BXRFLt2FB2Qfj-pFaZwY-qc8",
  "scope": "user-read-currently-playing"
}

Contoh running command pada terminal:

Terminal

yang perlu kita catat adalah refresh_token. Token tersebut akan berlaku untuk selamanya.

Sekarang kamu sudah bisa request dengan menggunakan Next.js atau aplikasi backend lainnya.


3. Membuat API di Next.js

Jika kamu butuh referensi untuk membuat aplikasi, kamu bisa cek repository saya. Jangan lupa di star ya!

Kamu bisa menggunakan nextjs-tailwind-starter dengan command:

npx create-next-app -e https://github.com/theodorusclarence/nextjs-tailwind-starter project-name

Setelah aplikasi terinstall, tambahkan dependency querystring

yarn add querystring
 
atau
 
npm i querystring

Kemudian, buat api route di /pages/api/spotify.js

Jika anda ingin code TypeScript, anda bisa mengecek codenya di GitHub

// /pages/api/spotify.js
import querystring from 'querystring';
 
const {
  SPOTIFY_CLIENT_ID: client_id,
  SPOTIFY_CLIENT_SECRET: client_secret,
  SPOTIFY_REFRESH_TOKEN: refresh_token,
} = process.env;
 
const basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64');
const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`;
const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`;
 
const getAccessToken = async () => {
  const response = await fetch(TOKEN_ENDPOINT, {
    method: 'POST',
    headers: {
      Authorization: `Basic ${basic}`,
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: querystring.stringify({
      grant_type: 'refresh_token',
      refresh_token,
    }),
  });
 
  return response.json();
};
 
export const getNowPlaying = async () => {
  const { access_token } = await getAccessToken();
 
  return fetch(NOW_PLAYING_ENDPOINT, {
    headers: {
      Authorization: `Bearer ${access_token}`,
    },
  });
};
 
export default async (_, res) => {
  const response = await getNowPlaying();
 
  if (
    response.status === 204 ||
    response.status > 400 ||
    response.data.currently_playing_type !== 'track'
  ) {
    return res.status(200).json({ isPlaying: false });
  }
 
  const data = {
    isPlaying: response.data.is_playing,
    title: response.data.item.name,
    album: response.data.item.album.name,
    artist: response.data.item.album.artists
      .map((artist) => artist.name)
      .join(', '),
    albumImageUrl: response.data.item.album.images[0].url,
    songUrl: response.data.item.external_urls.spotify,
  };
 
  res.status(200).json(data);
};

Tambahkan .env.local dengan data authorization yang sudah kita dapatkan (ubahlah data" dibawah dengan data kamu)

SPOTIFY_CLIENT_ID=eaccb97f6d0e405897adf1dd80b95c01
SPOTIFY_CLIENT_SECRET=a4195c2d0a4243609e697e602e70b7
SPOTIFY_REFRESH_TOKEN=AQAtxXvnzRTt4c2-2_Av2WyJQKWxUW_hMVN6QNiqv2i8A2ZElVarmvdhqyc8Pf-Z5n827FTFxTpHq5E3kOsrlRWM3TuJWxjVQsW0icR0zo3BXRFLt2FB2Qfj-pFaZwY-qc8

API kamu sudah siap untuk digunakan dengan route: GET https://localhost:3000/api/spotify


4. Menggunakan API di aplikasi Next.js

Untuk fetching, kita bisa menggunakan library SWR. SWR adalah library yang sangat cocok untuk menembak API Spotify secara berkala. SWR akan melakukan refetching pada saat window refocus, dan perpindahan route. Install juga react-icons untuk mendapatkan logo spotify.

yarn add swr react-icons
 
atau
 
npm i swr react-icons

Tambahkan SWR di pages/index.jsx seperti code dibawah:

TypeScript Version

import useSWR from 'swr';
 
export default function Home() {
  const fetcher = (url) => fetch(url).then((r) => r.json());
  const { data } = useSWR('/api/spotify', fetcher);
  return (
    <>
      <section className='bg-gray-600'>
        <main className='flex items-center justify-center'>
          {console.log(data)}
        </main>
      </section>
    </>
  );
}

Akan ada 2 tipe data JSON yang akan diberikan oleh API Spotify:

  1. Ketika tidak memainkan lagu apa-apa

    {
      "isPlaying": false
    }
  2. Ketika sedang memainkan lagu

    {
      "album": "Menari Dengan Bayangan",
      "albumImageUrl": "https://i.scdn.co/image/ab67616d0000b273d623688488865906052ef96b",
      "artist": "Hindia",
      "isPlaying": true,
      "songUrl": "https://open.spotify.com/track/08OPqLv99g8avzmxQepmiw",
      "title": "Besok Mungkin Kita Sampai"
    }

Maka, kita bisa membuat component conditional untuk merender data tersebut, disini saya menggunakan icons dengan library 'react-icons'

<a
  target='_blank'
  rel='noopener noreferer'
  href={
    data?.isPlaying
      ? data.songUrl
      : 'https://open.spotify.com/user/erence21?si=yTsrZT5JSHOp7tn3ist7Ig'
  }
  className='relative flex w-72 items-center space-x-4 rounded-md border p-5 transition-shadow hover:shadow-md'
>
  <div className='w-16'>
    {data?.isPlaying ? (
      <img
        className='w-16 shadow-sm'
        src={data?.albumImageUrl}
        alt={data?.album}
      />
    ) : (
      <SiSpotify size={64} color={'#1ED760'} />
    )}
  </div>
 
  <div className='flex-1'>
    <p className='component font-bold'>
      {data?.isPlaying ? data.title : 'Not Listening'}
    </p>
    <p className='font-dark text-xs'>
      {data?.isPlaying ? data.artist : 'Spotify'}
    </p>
  </div>
  <div className='absolute bottom-1.5 right-1.5'>
    <SiSpotify size={20} color={'#1ED760'} />
  </div>
</a>

Hasil bisa dilihat di spotify-playing.theodorusclarence.com

Thanks and Goodluck!

Share this article

Enjoying this post?

Don't miss out 😉. Get an email whenever I post, no spam.

Subscribe Now