I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Spotify ha completamente cambiato il modo in cui trasmettiamo musica in streaming con un catalogo contenente milioni di brani, album e playlist.

Utilizzando la sua API Web, puoi rendere le tue esperienze Spotify ancora più divertenti creando la tua applicazione di ricerca musicale React. L'API fornisce l'accesso a una gamma di dati musicali che puoi utilizzare per creare un'app musicale personalizzata e personalizzarla secondo i tuoi gusti.

Spotify per sviluppatori

Spotify offre una vasta gamma di funzionalità di streaming musicale come ricerca, riproduzione offline e consigli personalizzati. La piattaforma Spotify for Developers fornisce l'accesso alle API e agli SDK che alimentano queste funzionalità. In questa guida esplorerai l'API Web e imparerai come integrarla nella tua applicazione React per cercare le canzoni che ti piacciono.

instagram viewer

Registrati per un account

Per iniziare, devi avere un account Spotify. Se non ne hai già uno, visita la pagina di registrazione di Spotify. Tuttavia, se ne hai già uno, accedi al Spotify per sviluppatori consolare.

Registra la tua applicazione

Dopo aver effettuato l'accesso alla console per sviluppatori, registra la tua applicazione per ottenere l'accesso all'API web. Nella pagina del dashboard, fare clic su Crea un'app pulsante, inserire il nome e la descrizione e, infine, accettare i termini e le condizioni per creare l'applicazione.

Infine, clicca sul Modificare le impostazioni pulsante per passare alle impostazioni dell'URL di reindirizzamento. Poiché la tua applicazione è ancora in modalità di sviluppo, aggiungi http://localhost: 3000 come URL di reindirizzamento. Questo è l'URL a cui vuoi reindirizzare l'utente dopo che si è autenticato con Spotify.

Dopo aver registrato la tua applicazione, Spotify fornirà il tuo ID client univoco e i tuoi segreti client che potrai utilizzare per:

  • Aggiungi il flusso di autenticazione Spotify, per accedere con le tue credenziali Spotify nella tua applicazione React.
  • Ottieni il tuo token di accesso univoco, per effettuare richieste a diversi endpoint dell'API Web, inclusa una ricerca di dati come tracce o album.

Configura il client React

Crea un'applicazione React e vai alla directory principale e crea un nuovo file, .env, per impostare alcune variabili di ambiente. Puoi ottenere il tuo ID cliente dalla dashboard per sviluppatori di Spotify.

REACT_APP_SPOTIFY_CLIENT_ID = "il tuo ID cliente"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "gettone"

Puoi trovare il codice di questa applicazione nel suo file Deposito GitHub.

Installa i pacchetti richiesti

Installa Axios. Utilizzerai i suoi metodi per effettuare richieste HTTP all'API web di Spotify.

npm installa axios

Aggiungi il flusso di lavoro di autenticazione di Spotify

Spotify specifica che tutte le richieste a qualsiasi endpoint dell'API Web hanno un token di accesso valido nell'intestazione della richiesta. Per ottenere il token di accesso, la tua applicazione deve prima autenticarsi con Spotify.

Spotify ne supporta diversi autenticazione e autorizzazionemetodi come un codice di autorizzazione, credenziali client o metodi di concessione implicita.

Il più semplice da implementare è il metodo di concessione implicita che richiede che un'applicazione effettui richieste all'endpoint di autenticazione (l'hai aggiunto nel file ENV), passando il tuo ID client. In caso di autenticazione riuscita, Spotify risponderà fornendo un token di accesso che scade per un periodo specificato.

Apri il tuo file src/App.js, elimina il codice React boilerplate e aggiungi il codice seguente:

importare Reagire, {useState, useEffect} da'reagire';
importare Ricercatore da'./componenti/Ricerca';
funzioneApp() {
cost CLIENT_ID=processo.env. REACT_APP_SPOTIFY_CLIENT_ID
cost REDIRECT_URI =processo.env. REACT_APP_SPOTIFY_REDIRECT_URI 
cost AUTH_ENDPOINT =processo.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
cost RESPONSE_TYPE = process.env. REACT_APP_SPOTIFY_RESPONSE_TYPE


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


 usaEffetto(() => { 
cost hash = finestra.posizione.hash;
permettere gettone = finestra.localStorage.getItem("gettone");

Se (cancelletto && cancelletto) {
 token = hash.substring(1).diviso("&").Trovare(elemento => elem.startsWith("token di accesso")).diviso("=")[1];
finestra.location.hash = "";
finestra.localStorage.setItem("gettone", gettone);
 }


 setToken (token)
 }, [])


cost disconnettersi = () => {
 setToken("");
finestra.localStorage.removeItem("gettone");
 }


ritorno (


esportarepredefinito Applicazione;

Analizziamolo:

  • Questo componente esegue il rendering condizionale del componente di ricerca e del pulsante di logout, se il token di accesso è presente altrimenti, restituisce un div con un collegamento che indirizza l'utente all'autorizzazione di Spotify pagina. Il collegamento contiene parametri di query che specificano i valori CLIENT_ID, REDIRECT_URI e RESPONSE_TYPE.
  • Dopo aver autenticato un utente, chiama l'hook useEffect per eseguire un blocco di codice quando il componente viene montato. Questo blocco di codice recupera il token di accesso dall'hash dell'URL e lo imposta come nuovo valore della variabile di stato del token. Memorizza inoltre il token nella memoria locale per mantenere lo stato di autenticazione.
  • Con il token di accesso memorizzato nello stato, viene passato come prop al componente Searcher per effettuare richieste all'API Web di Spotify.
  • Per disconnettersi, il codice rimuove semplicemente il token di accesso dalla memoria locale e imposta lo stato del token su una stringa vuota.

Implementa la funzionalità di ricerca e visualizza i risultati

Nella directory /src, crea una nuova cartella e chiamala componenti. All'interno di questa cartella, crea un nuovo file: Searcher.js e aggiungi il codice seguente.

importare Reagisci, {useState, useEffect} da'reagire'
importare assios da'assio';
funzioneRicercatore(oggetti di scena) {
cost [searchKey, setSearchKey] = useState("")
cost [tracce, setTracks] = useState([])

cost access_token = props.token

cost cercaArtista = asincrono () => {
cost {dati} = aspetta axios.get(" https://api.spotify.com/v1/search", {
 intestazioni: {
'Tipo di contenuto': "applicazione/json",
'Autorizzazione': `Portatore ${access_token}`
 },
 parametri: {
 q: chiave di ricerca,
 tipo: "artista"
 }
 })

var ID artista = data.artists.items[0].id


var tracce d'artista = aspetta axios.get(` https://api.spotify.com/v1/artists/${IDartista}/top-tracks`, {
 intestazioni: {
 Autorizzazione: `Portatore ${access_token}`
 },
 parametri: {
 limite: 10,
 mercato: 'NOI'
 }
 })


 setTracks (artistTracks.data.tracks);
 }


ritorno (
 <>


"Modulo di ricerca">
 nomeclasse ="Nome"
 tipo="testo"
 segnaposto="Cerca per nome dell'artista..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />


esportarepredefinito Ricercatore

Analizziamolo:

  • Il componente definisce la costante access_token che imposta sulla proprietà token passata come prop. Successivamente passa questo token nell'intestazione della richiesta API all'endpoint dell'API di ricerca di Spotify.
  • Definisci due stati: la searchKey e le tracce. Lo stato searchKey contiene il valore corrente dell'input di ricerca. Lo stato delle tracce contiene una serie delle prime 10 tracce per l'artista che la ricerca di Spotify restituirà.
  • La funzione searchArtist invia una richiesta GET all'API Spotify per cercare i dati degli artisti in base al valore searchKey.
  • Quindi estrae l'ID dell'artista dai dati di risposta e fa un'altra richiesta GET per recuperare le migliori tracce per quell'artista. Dai dati di risposta, estrae le prime 10 tracce e imposta la variabile tracce.
  • Il componente restituisce un campo di input e un pulsante di ricerca. Quando un utente fa clic sul pulsante di ricerca, chiama la funzione searchArtist per recuperare e visualizzare le migliori tracce di un determinato artista. Infine, utilizza la funzione map per rendere le prime cinque tracce nell'array di tracce come un elenco.

Esegui il tuo server di sviluppo per aggiornare le modifiche, quindi vai a http://localhost: 3000 nel browser per visualizzare i risultati.

Personalizza la tua applicazione con le funzionalità di Spotify

Questa guida ha evidenziato i passaggi necessari per effettuare richieste all'API Web di Spotify per cercare i dati musicali degli artisti. Tuttavia, puoi fare di più con le funzionalità di Spotify fornite dai suoi SDK e API come l'integrazione del suo lettore di riproduzione web con lo stesso aspetto di Spotify.

Il vantaggio degli SDK e delle API di Spotify è che sono ricchi di funzionalità e puoi integrarli facilmente in qualsiasi applicazione Web o mobile.