Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

Spotify mudou completamente a forma como transmitimos música com um catálogo contendo milhões de músicas, álbuns e listas de reprodução.

Usando sua API da web, você pode tornar suas experiências Spotify ainda mais divertidas criando seu próprio aplicativo de pesquisa de música React. A API fornece acesso a uma variedade de dados de música que você pode usar para criar um aplicativo de música personalizado e personalizá-lo de acordo com seu gosto.

Spotify para desenvolvedores

O Spotify oferece uma ampla variedade de recursos de streaming de música, como pesquisa, reprodução off-line e recomendações personalizadas. A plataforma Spotify for Developers fornece acesso às APIs e SDKs que potencializam esses recursos. Neste guia, você explorará a API da Web e aprenderá como integrá-la ao seu aplicativo React para pesquisar as músicas de que gosta.

instagram viewer

Inscreva-se pra uma conta

Para começar, você precisa ter uma conta no Spotify. Se você ainda não tem um, visite a página de inscrição do Spotify. No entanto, se você já tiver um, faça login no Spotify para desenvolvedores console.

Registre sua inscrição

Depois de fazer login no console do desenvolvedor, registre seu aplicativo para obter acesso à API da Web. Na página do painel, clique no botão Criar um aplicativo botão, preencha o nome e a descrição e, por fim, aceite os termos e condições para criar o aplicativo.

Por último, clique no botão Editar Configurações botão para mudar para as configurações de URL de redirecionamento. Como seu aplicativo ainda está em modo de desenvolvimento, adicione http://localhost: 3000 como seu URL de redirecionamento. Este é o URL para o qual você deseja redirecionar o usuário após a autenticação no Spotify.

Depois de registrar seu aplicativo, o Spotify fornecerá seu ID de cliente exclusivo e os segredos do cliente que você pode usar para:

  • Adicione o fluxo de autenticação do Spotify para fazer login com suas credenciais do Spotify em seu aplicativo React.
  • Obtenha seu token de acesso exclusivo para fazer solicitações a diferentes pontos de extremidade da API da web, incluindo uma pesquisa de dados como faixas ou álbuns.

Configurar o cliente React

Criar um aplicativo React e navegue até o diretório raiz e crie um novo arquivo, .env, para definir algumas variáveis ​​de ambiente. Você pode obter seu ID de cliente no painel do desenvolvedor do Spotify.

REACT_APP_SPOTIFY_CLIENT_ID = "seu ID de cliente"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "símbolo"

Você pode encontrar o código deste aplicativo em seu Repositório GitHub.

Instale os pacotes necessários

Instale o Axios. Você usará seus métodos para fazer solicitações HTTP para a API da web do Spotify.

npm instalar axios

Adicione o fluxo de trabalho de autenticação do Spotify

O Spotify especifica que todas as solicitações para qualquer ponto de extremidade da API da Web tenham um token de acesso válido no cabeçalho da solicitação. Para obter o token de acesso, seu aplicativo precisa primeiro se autenticar no Spotify.

Spotify suporta vários autenticação e autorizaçãométodos como um código de autorização, credenciais de cliente ou métodos de concessão implícitos.

O mais simples de implementar é o método de concessão implícita, que requer que um aplicativo faça solicitações ao ponto de extremidade de autenticação (você adicionou isso no arquivo ENV), passando por seu ID de cliente. Após a autenticação bem-sucedida, o Spotify responderá fornecendo um token de acesso que expira em um período especificado.

Abra seu arquivo src/App.js, exclua o código padrão do React e adicione o código abaixo:

importar Reagir, { useState, useEffect } de'reagir';
importar Pesquisador de'./componentes/Pesquisador';
funçãoAplicativo() {
const CLIENT_ID=process.env. REACT_APP_SPOTIFY_CLIENT_ID
const REDIRECT_URI =process.env. REACT_APP_SPOTIFY_REDIRECT_URI 
const AUTH_ENDPOINT =process.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
const RESPONSE_TYPE = processo.env. REACT_APP_SPOTIFY_RESPONSE_TYPE


const [token, setToken] = useState("");


 useEffect(() => { 
const hash = janela.localização.hash;
deixar símbolo = janela.localStorage.getItem("símbolo");

se (hash && hash) {
 token = hash.substring(1).dividir("&").encontrar(elem => elem.startsWith("access_token")).dividir("=")[1];
janela.location.hash = "";
janela.localStorage.setItem("símbolo", símbolo);
 }


 setToken (token)
 }, [])


const sair = () => {
 setToken("");
janela.localStorage.removeItem("símbolo");
 }


retornar (


exportarpadrão Aplicativo;

Vamos decompô-lo:

  • Este componente renderiza condicionalmente o componente de pesquisa e o botão de logout, se o token de acesso caso contrário, ele renderiza um div com um link que direciona o usuário para a autorização do Spotify página. O link contém parâmetros de consulta que especificam os valores CLIENT_ID, REDIRECT_URI e RESPONSE_TYPE.
  • Depois de autenticar um usuário, chame o gancho useEffect para executar um bloco de código quando o componente for montado. Esse bloco de código recupera o token de acesso do hash da URL e o define como o novo valor da variável de estado do token. Ele também armazena o token no armazenamento local para manter o estado de autenticação.
  • Com o token de acesso armazenado no estado, ele é passado como suporte ao componente Searcher para fazer solicitações à API da web do Spotify.
  • Para sair, o código simplesmente remove o token de acesso do armazenamento local e define o estado do token como uma string vazia.

Implemente a funcionalidade de pesquisa e renderize os resultados

No diretório /src, crie uma nova pasta e nomeie-a, components. Dentro desta pasta, crie um novo arquivo: Searcher.js, e adicione o código abaixo.

importar Reagir, {useState, useEffect} de'reagir'
importar axios de'axios';
funçãoPesquisador(adereços) {
const [searchKey, setSearchKey] = useState("")
const [faixas, setTracks] = useState([])

const access_token = props.token

const procurarArtista = assíncrono () => {
const {dados} = aguardam axios.get(" https://api.spotify.com/v1/search", {
 cabeçalhos: {
'Tipo de conteúdo': "aplicativo/json",
'Autorização': `portador ${access_token}`
 },
 parâmetros: {
 q: searchKey,
 tipo: "artista"
 }
 })

var artistID = data.artists.items[0].eu ia


var artistTracks = aguardam axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 cabeçalhos: {
 Autorização: `portador ${access_token}`
 },
 parâmetros: {
 limite: 10,
 mercado: 'NÓS'
 }
 })


 setTracks (artistTracks.data.tracks);
 }


retornar (
 <>


"Formulário de pesquisa">
 className ="Nome"
 tipo="texto"
 espaço reservado ="Pesquisar pelo nome do artista ..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />


exportarpadrão Pesquisador

Vamos decompô-lo:

  • O componente define a constante access_token que define para a propriedade do token passada como prop. Mais tarde, ele passa esse token no cabeçalho da solicitação de API para o ponto de extremidade da API de pesquisa do Spotify.
  • Defina dois estados: a searchKey e as trilhas. O estado searchKey contém o valor atual da entrada de pesquisa. O estado das faixas contém uma matriz das 10 principais faixas do artista que a pesquisa do Spotify retornará.
  • A função searchArtist faz uma solicitação GET à API do Spotify para pesquisar os dados dos artistas com base no valor searchKey.
  • Em seguida, ele extrai o ID do artista dos dados de resposta e faz outra solicitação GET para recuperar as principais faixas desse artista. Dos dados de resposta, ele extrai as 10 principais trilhas e define a variável de trilhas.
  • O componente retorna um campo de entrada e um botão de pesquisa. Quando um usuário clica no botão de pesquisa, ele chama a função searchArtist para buscar e exibir as principais faixas de um determinado artista. Por fim, ele usa a função map para renderizar as cinco principais trilhas na matriz de trilhas como uma lista.

Execute seu servidor de desenvolvimento para atualizar as alterações e, em seguida, vá para http://localhost: 3000 em seu navegador para ver os resultados.

Personalize seu aplicativo com os recursos do Spotify

Este guia destacou as etapas necessárias para fazer solicitações à API da Web do Spotify para pesquisar dados musicais de artistas. No entanto, você pode fazer mais com os recursos do Spotify fornecidos por seus SDKs e APIs, como integrar seu player de reprodução da Web com a mesma aparência do Spotify.

A vantagem dos SDKs e APIs do Spotify é que eles são ricos em recursos e você pode integrá-los facilmente a qualquer aplicativo da Web ou móvel.