LinkedIn

How to get your Spotify current track

Jan 08, 2022

[Esse artigo foi traduzido pelo gpt]

Sumário

Introdução

Eu vi isso no site do Cristian Granda e achei muito legal — eu nunca tinha visto. Eu levei dois dias para fazer, mas eu vou te ensinar a fazer rápido ⚡.

Depois que eu vi o demo da API, eu pensei “easy-peasy”, e realmente é, mas chegar lá não é.

Basicamente, você precisa criar uma integração no Spotify, pegar um refresh token, pegar um auth code e então buscar a música atual. Eu travei em duas etapas: descobrir tudo e conseguir o refresh token. Mas eu achei um site muito bom, que me fez pensar que eu não sou o único fritando a cabeça para pegar um simples refresh token 😸.

Como fazer

Comece criando uma integração no Spotify Dashboard. Depois, clique em edit settings e adicione https://getyourspotifyrefreshtoken.herokuapp.com/callback em Redirect URIs.

Em seguida, copie o client id e o secret, cole os dois no site aqui, marque user-read-currently-playing e envie.

Agora você tem o refresh token da sua integração do Spotify. Use ele para conseguir um access token. Eu fiz isso com minha API pessoal usando Node.js. Olha a função getAccessToken:

import { stringify } from "qs";
const TOKEN_ENDPOINT = "https://accounts.spotify.com/api/token";
const basic = Buffer.from(`${client_id}:${client_secret}`).toString("base64");

const getAccessToken = async () => {
  try {
    const response = await axios.post(
      TOKEN_ENDPOINT,
      stringify({
        grant_type: "refresh_token",
        refresh_token,
      }),
      {
        headers: {
          Authorization: `Basic ${basic}`,
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }
    );

    return response.data;
  } catch (error) {
    // @ts-ignore
    console.log(error.response.data);
  }
};

Repara que eu usei os pacotes axios e qs, mas você pode fazer a mesma coisa usando a fetch API.

Por fim, a função que busca a música atual:

const NOW_PLAYING_ENDPOINT =
  "https://api.spotify.com/v1/me/player/currently-playing?market=ES";
const getNowPlaying = async () => {
  const { access_token } = await getAccessToken();
  const res = await axios.get(NOW_PLAYING_ENDPOINT, {
    headers: {
      Authorization: `Bearer ${access_token}`,
    },
  });
  const actualMusic = await res.data;
  return actualMusic;
};

Agora você tem um JSON gigante contendo um item com todas as informações da sua música atual. Se eu estiver ouvindo Spotify agora, você vai ver na minha página about. Deve ficar assim:

Fontes

posts Valeu por ler!