Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Spotify a schimbat complet modul în care transmitem muzică în flux, cu un catalog care conține milioane de melodii, albume și liste de redare.

Folosind API-ul său web, vă puteți face experiențele Spotify și mai distractive prin construirea propriei aplicații de căutare muzicală React. API-ul oferă acces la o serie de date muzicale pe care le puteți folosi pentru a crea o aplicație muzicală personalizată și pentru a o personaliza după gusturile dvs.

Spotify pentru dezvoltatori

Spotify oferă o gamă largă de funcții de streaming muzical, cum ar fi căutare, redare offline și recomandări personalizate. Platforma Spotify for Developers oferă acces la API-urile și SDK-urile care alimentează aceste funcții. În acest ghid, veți explora API-ul web și veți afla cum să îl integrați în aplicația dvs. React pentru a căuta melodiile care vă plac.

Înscrieți-vă pentru un cont

Pentru a începe, trebuie să aveți un cont Spotify. Dacă nu aveți deja unul, vizitați pagina de înscriere la Spotify. Cu toate acestea, dacă aveți deja unul, conectați-vă la Spotify pentru dezvoltatori consolă.

Înregistrați-vă aplicația

După ce vă conectați la consola pentru dezvoltatori, înregistrați aplicația pentru a obține acces la API-ul web. Pe pagina tabloului de bord, faceți clic pe Creați o aplicație butonul, completați numele și descrierea și, în final, acceptați termenii și condițiile pentru a crea aplicația.

În cele din urmă, faceți clic pe Editeaza setarile butonul pentru a trece la setările URL de redirecționare. Deoarece aplicația dvs. este încă în modul de dezvoltare, adăugați http://localhost: 3000 ca adresă URL de redirecționare. Aceasta este adresa URL către care doriți să redirecționați utilizatorul după ce se autentifică cu Spotify.

După înregistrarea aplicației dvs., Spotify vă va furniza ID-ul dvs. unic de client și secretele clientului pe care le puteți folosi pentru:

  • Adăugați flux de autentificare Spotify, pentru a vă conecta cu acreditările Spotify în aplicația React.
  • Obțineți indicativul dvs. unic de acces, pentru a face solicitări către diferite puncte finale API web, inclusiv o căutare pentru date, cum ar fi melodii sau albume.

Configurați clientul React

Creați o aplicație React și navigați la directorul rădăcină și creați un fișier nou, .env, pentru a seta unele variabile de mediu. Puteți obține ID-ul dvs. de client din tabloul de bord pentru dezvoltatori Spotify.

REACT_APP_SPOTIFY_CLIENT_ID = "ID-ul dvs. de client"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "jeton"

Puteți găsi codul acestei aplicații în documentul său Depozitul GitHub.

Instalați pachetele necesare

Instalați Axios. Veți folosi metodele sale pentru a face solicitări HTTP către API-ul web Spotify.

npm instalează axios

Adăugați fluxul de lucru de autentificare Spotify

Spotify specifică că toate solicitările către orice punct final al API-ului Web au un simbol de acces valid în antetul cererii. Pentru a obține simbolul de acces, aplicația dvs. trebuie să se autentifice mai întâi cu Spotify.

Spotify acceptă mai multe autentificare și autorizaremetode precum un cod de autorizare, acreditările clientului sau metode implicite de acordare.

Cel mai simplu de implementat este metoda de acordare implicită care necesită ca o aplicație să facă cereri către punctul final de autentificare (ai adăugat acest lucru în fișierul ENV), trecând peste ID-ul tău de client. După autentificarea cu succes, Spotify va răspunde furnizând un token de acces care expiră într-o perioadă specificată.

Deschideți fișierul src/App.js, ștergeți codul boilerplate React și adăugați codul de mai jos:

import Reacționează, { useState, useEffect } din'reacţiona';
import Căutător din„./components/Searcher”;
funcţieApp() {
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 = process.env. REACT_APP_SPOTIFY_RESPONSE_TYPE


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


 useEffect(() => { 
const hash = fereastră.locație.hash;
lăsa token = fereastră.localStorage.getItem("jeton");

dacă (hash && hash) {
 token = hash.substring(1).Despică("&").găsi(elem => elem.startsWith("jeton de acces")).Despică("=")[1];
fereastră.location.hash = "";
fereastră.localStorage.setItem("jeton", simbol);
 }


 setToken (jeton)
 }, [])


const deconectare = () => {
 setToken("");
fereastră.localStorage.removeItem("jeton");
 }


întoarcere (


exportMod implicit Aplicație;

Să o descompunem:

  • Această componentă redă condiționat componenta de căutare și butonul de deconectare, dacă simbolul de acces este prezent în caz contrar, redă un div cu un link care direcționează utilizatorul către autorizarea Spotify pagină. Linkul conține parametri de interogare care specifică valorile CLIENT_ID, REDIRECT_URI și RESPONSE_TYPE.
  • Odată ce ați autentificat un utilizator, apelați hook-ul useEffect pentru a rula un bloc de cod atunci când componenta se montează. Acest bloc de cod preia jetonul de acces din URL-ul hash și îl setează ca noua valoare a variabilei de stare a jetonului. De asemenea, stochează jetonul în stocarea locală pentru a persista starea de autentificare.
  • Cu token-ul de acces stocat în stare, acesta este transmis ca suport componentului Searcher pentru a face solicitări către API-ul web Spotify.
  • Pentru a se deconecta, codul pur și simplu elimină jetonul de acces din stocarea locală și setează starea jetonului la un șir gol.

Implementați funcționalitatea de căutare și randați rezultatele

În directorul /src, creați un folder nou și denumiți-l, componente. În acest folder, creați un fișier nou: Searcher.js și adăugați codul de mai jos.

import Reacționează, {useState, useEffect} din'reacţiona'
import axios din"axios";
funcţieCăutător(recuzită) {
const [searchKey, setSearchKey] = useState("")
const [tracks, setTracks] = useState([])

const access_token = props.token

const searchArtist = asincron () => {
const {date} = așteaptă axios.get(" https://api.spotify.com/v1/search", {
 antete: {
'Tipul de conținut': "aplicație/json",
'Autorizare': `Purtător ${access_token}`
 },
 parametri: {
 q: tasta de căutare,
 tip: "artist"
 }
 })

var artistID = data.artists.items[0].id


var artistTracks = așteaptă axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 antete: {
 Autorizare: `Purtător ${access_token}`
 },
 parametri: {
 limită: 10,
 piaţă: 'NE'
 }
 })


 setTracks (artistTracks.data.tracks);
 }


întoarcere (
 <>


„Formular de căutare”>
 className ="Nume"
 tip="text"
 substituent=„Căutare după numele artistului...”
 onChange={(e) => {setSearchKey (e.target.value)}}

 />


exportMod implicit Căutător

Să o descompunem:

  • Componenta definește constanta access_token pe care o setează proprietății jetonului transmisă ca prop. Mai târziu, transmite acest simbol în antetul solicitării API către punctul final al API-ului de căutare Spotify.
  • Definiți două stări: cheia de căutare și track-urile. Starea searchKey deține valoarea curentă a intrării de căutare. Starea melodiilor deține o serie de primele 10 melodii pentru artist pe care le va returna căutarea Spotify.
  • Funcția searchArtist face o solicitare GET către API-ul Spotify pentru a căuta datele artiștilor pe baza valorii searchKey.
  • Apoi extrage ID-ul artistului din datele de răspuns și face o altă solicitare GET pentru a prelua melodiile de top pentru acel artist. Din datele de răspuns, extrage primele 10 piese și setează variabila tracks.
  • Componenta returnează un câmp de introducere și un buton de căutare. Când un utilizator face clic pe butonul de căutare, apelează funcția searchArtist pentru a prelua și afișa melodiile de top pentru un anumit artist. În cele din urmă, folosește funcția de hartă pentru a reda primele cinci piese din matricea de piese ca o listă.

Rulați serverul de dezvoltare pentru a actualiza modificările, apoi mergeți la http://localhost: 3000 în browser pentru a vedea rezultatele.

Personalizați-vă aplicația cu funcțiile Spotify

Acest ghid a evidențiat pașii necesari pentru a face solicitări către API-ul web Spotify pentru a căuta datele muzicale ale artiștilor. Cu toate acestea, puteți face mai multe cu funcțiile Spotify oferite de SDK-urile și API-urile sale, cum ar fi integrarea playerului său de redare web cu același aspect și senzație ca pe Spotify.

Avantajul SDK-urilor și API-urilor Spotify este că sunt bogate în funcții și le puteți integra cu ușurință în orice aplicație web sau mobilă.