Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Spotify a complètement changé la façon dont nous diffusons de la musique avec un catalogue contenant des millions de chansons, d'albums et de listes de lecture.

Grâce à son API Web, vous pouvez rendre vos expériences Spotify encore plus amusantes en créant votre propre application de recherche de musique React. L'API donne accès à une gamme de données musicales que vous pouvez utiliser pour créer une application musicale personnalisée et la personnaliser selon vos goûts.

Spotify pour les développeurs

Spotify propose une large gamme de fonctionnalités de streaming musical telles que la recherche, la lecture hors ligne et les recommandations personnalisées. La plate-forme Spotify for Developers donne accès aux API et SDK qui alimentent ces fonctionnalités. Dans ce guide, vous explorerez l'API Web et apprendrez à l'intégrer dans votre application React pour rechercher les chansons que vous aimez.

instagram viewer

Créer un compte

Pour commencer, vous devez avoir un compte Spotify. Si vous n'en avez pas déjà un, visitez la page d'inscription Spotify. Cependant, si vous en avez déjà un, connectez-vous au Spotify pour les développeurs console.

Enregistrez votre candidature

Une fois connecté à la console développeur, enregistrez votre application pour accéder à l'API Web. Sur la page du tableau de bord, cliquez sur le Créer une application bouton, remplissez le nom et la description, et enfin, acceptez les termes et conditions pour créer l'application.

Enfin, cliquez sur le Modifier les paramètres bouton pour modifier les paramètres de l'URL de redirection. Votre application étant toujours en mode développement, ajoutez http://localhost: 3000 comme URL de redirection. Il s'agit de l'URL vers laquelle vous souhaitez rediriger l'utilisateur après s'être authentifié auprès de Spotify.

Après avoir enregistré votre application, Spotify fournira votre identifiant client unique et vos secrets client que vous pourrez utiliser pour :

  • Ajoutez le flux d'authentification Spotify, pour vous connecter avec vos identifiants Spotify dans votre application React.
  • Obtenez votre jeton d'accès unique pour effectuer des requêtes vers différents points de terminaison de l'API Web, y compris une recherche de données telles que des pistes ou des albums.

Configurer le client React

Créer une application React et accédez au répertoire racine et créez un nouveau fichier, .env, pour définir certaines variables d'environnement. Vous pouvez obtenir votre ID client à partir du tableau de bord des développeurs de Spotify.

REACT_APP_SPOTIFY_CLIENT_ID = "votre identifiant 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"

Vous pouvez trouver le code de cette application dans son Référentiel GitHub.

Installer les packages requis

Installez Axios. Vous utiliserez ses méthodes pour effectuer des requêtes HTTP à l'API Web de Spotify.

npm installer axios

Ajouter le flux de travail d'authentification de Spotify

Spotify spécifie que toutes les demandes adressées à n'importe quel point de terminaison de l'API Web ont un jeton d'accès valide dans l'en-tête de la demande. Pour obtenir le jeton d'accès, votre application doit d'abord s'authentifier auprès de Spotify.

Spotify prend en charge plusieurs Authentification et autorisationméthodes telles qu'un code d'autorisation, des informations d'identification client ou des méthodes d'attribution implicites.

La plus simple à implémenter est la méthode d'octroi implicite qui nécessite qu'une application fasse des demandes au point de terminaison d'authentification (vous l'avez ajouté dans le fichier ENV), en transmettant votre ID client. Une fois l'authentification réussie, Spotify répondra en fournissant un jeton d'accès qui expire au cours d'une période spécifiée.

Ouvrez votre fichier src/App.js, supprimez le code standard React et ajoutez le code ci-dessous :

importer Réagir, { useState, useEffect } depuis'réagir';
importer Chercheur depuis'./composants/Chercheur';
fonctionApplication() {
constante CLIENT_ID=process.env. REACT_APP_SPOTIFY_CLIENT_ID
constante REDIRECT_URI =process.env. REACT_APP_SPOTIFY_REDIRECT_URI 
constante AUTH_ENDPOINT =process.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
constante RESPONSE_TYPE = processus.env. REACT_APP_SPOTIFY_RESPONSE_TYPE


constante [jeton, setToken] = useState("");


 useEffet(() => { 
constante hachage = fenêtre.location.hachage ;
laisser jeton = fenêtre.localStorage.getItem("jeton");

si (hachage && hachage) {
 jeton = hash.substring(1).diviser("&").trouver(élément => elem.startsWith("jeton d'accès")).diviser("=")[1];
fenêtre.location.hash = "";
fenêtre.localStorage.setItem("jeton", jeton);
 }


 setToken (jeton)
 }, [])


constante déconnexion = () => {
 setToken("");
fenêtre.localStorage.removeItem("jeton");
 }


retour (


exporterdéfaut application ;

Décomposons-le :

  • Ce composant restitue conditionnellement le composant de recherche et le bouton de déconnexion, si le jeton d'accès est présent sinon, il affiche un div avec un lien qui dirige l'utilisateur vers l'autorisation Spotify page. Le lien contient des paramètres de requête qui spécifient les valeurs CLIENT_ID, REDIRECT_URI et RESPONSE_TYPE.
  • Une fois que vous avez authentifié un utilisateur, appelez le hook useEffect pour exécuter un bloc de code lors du montage du composant. Ce bloc de code récupère le jeton d'accès à partir du hachage d'URL et le définit comme nouvelle valeur de la variable d'état du jeton. Il stocke également le jeton dans le stockage local pour conserver l'état d'authentification.
  • Avec le jeton d'accès stocké dans l'état, il est transmis en tant qu'accessoire au composant Searcher pour envoyer des requêtes à l'API Web de Spotify.
  • Pour se déconnecter, le code supprime simplement le jeton d'accès du stockage local et définit l'état du jeton sur une chaîne vide.

Implémenter la fonctionnalité de recherche et afficher les résultats

Dans le répertoire /src, créez un nouveau dossier et nommez-le composants. Dans ce dossier, créez un nouveau fichier: Searcher.js, et ajoutez le code ci-dessous.

importer Réagir, {useState, useEffect} depuis'réagir'
importer axios depuis'axios';
fonctionChercheur(accessoires) {
constante [searchKey, setSearchKey] = useState("")
constante [pistes, setTracks] = useState([])

constante access_token = accessoires.token

constante rechercheArtiste = asynchrone () => {
constante {données} = attendre axios.get(" https://api.spotify.com/v1/search", {
 en-têtes: {
'Type de contenu': "applications/json",
'Autorisation': `Porteur ${access_token}`
 },
 paramètres: {
 q: clé de recherche,
 taper: "artiste"
 }
 })

var IDartiste = data.artistes.items[0].identifiant


var artistesTracks = attendre axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 en-têtes: {
 Autorisation: `Porteur ${access_token}`
 },
 paramètres: {
 limite: 10,
 marché: 'NOUS'
 }
 })


 setTracks (artistTracks.data.tracks);
 }


retour (
 <>


"Formulaire de recherche">
 NomClasse ="Nom"
 taper="texte"
 espace réservé="Recherche par nom d'artiste..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />


exporterdéfaut Chercheur

Décomposons-le :

  • Le composant définit la constante access_token qu'il définit sur la propriété token transmise en tant que prop. Il transmet ensuite ce jeton dans l'en-tête de la demande d'API au point de terminaison de l'API de recherche de Spotify.
  • Définissez deux états: la clé de recherche et les pistes. L'état searchKey contient la valeur actuelle de l'entrée de recherche. L'état des pistes contient un tableau des 10 meilleures pistes de l'artiste que la recherche Spotify renverra.
  • La fonction searchArtist envoie une requête GET à l'API Spotify pour rechercher les données des artistes en fonction de la valeur searchKey.
  • Il extrait ensuite l'ID de l'artiste des données de réponse et effectue une autre requête GET pour récupérer les meilleurs morceaux de cet artiste. À partir des données de réponse, il extrait les 10 premières pistes et définit la variable pistes.
  • Le composant renvoie un champ de saisie et un bouton de recherche. Lorsqu'un utilisateur clique sur le bouton de recherche, il appelle la fonction searchArtist pour récupérer et afficher les meilleurs morceaux d'un artiste particulier. Enfin, il utilise la fonction map pour afficher les cinq premières pistes du tableau des pistes sous forme de liste.

Exécutez votre serveur de développement pour mettre à jour les modifications, puis rendez-vous sur http://localhost: 3000 dans votre navigateur pour afficher les résultats.

Personnalisez votre application avec les fonctionnalités de Spotify

Ce guide a mis en évidence les étapes nécessaires pour envoyer des requêtes à l'API Web de Spotify afin de rechercher les données musicales des artistes. Cependant, vous pouvez faire plus avec les fonctionnalités de Spotify fournies par ses SDK et ses API, telles que l'intégration de son lecteur de lecture Web avec la même apparence que sur Spotify.

L'avantage des SDK et des API de Spotify est qu'ils sont riches en fonctionnalités et que vous pouvez facilement les intégrer dans n'importe quelle application Web ou mobile.