Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Spotify hat die Art und Weise, wie wir Musik streamen, mit einem Katalog, der Millionen von Songs, Alben und Wiedergabelisten enthält, komplett verändert.

Mit der Web-API können Sie Ihre Spotify-Erlebnisse noch unterhaltsamer gestalten, indem Sie Ihre eigene React-Musiksuchanwendung erstellen. Die API bietet Zugriff auf eine Reihe von Musikdaten, die Sie verwenden können, um eine benutzerdefinierte Musik-App zu erstellen und sie nach Ihrem Geschmack zu personalisieren.

Spotify für Entwickler

Spotify bietet eine breite Palette von Musik-Streaming-Funktionen wie Suche, Offline-Wiedergabe und personalisierte Empfehlungen. Die Spotify for Developers-Plattform bietet Zugriff auf die APIs und SDKs, die diese Funktionen unterstützen. In diesem Leitfaden erkunden Sie die Web-API und erfahren, wie Sie sie in Ihre React-Anwendung integrieren, um nach Songs zu suchen, die Ihnen gefallen.

instagram viewer

Für einen Account anmelden

Um loszulegen, benötigen Sie ein Spotify-Konto. Wenn Sie noch keine haben, besuchen Sie uns die Spotify-Anmeldeseite. Wenn Sie jedoch bereits eine haben, melden Sie sich bei der an Spotify für Entwickler Konsole.

Registrieren Sie Ihre Anwendung

Nachdem Sie sich bei der Entwicklerkonsole angemeldet haben, registrieren Sie Ihre Anwendung, um Zugriff auf die Web-API zu erhalten. Klicken Sie auf der Dashboard-Seite auf Erstellen Sie eine Anwendung Klicken Sie auf die Schaltfläche, geben Sie den Namen und die Beschreibung ein und akzeptieren Sie schließlich die Allgemeinen Geschäftsbedingungen, um die Anwendung zu erstellen.

Klicken Sie abschließend auf die Einstellungen bearbeiten Schaltfläche, um zu den Umleitungs-URL-Einstellungen zu wechseln. Da sich Ihre Anwendung noch im Entwicklungsmodus befindet, fügen Sie hinzu http://localhost: 3000 als Ihre Weiterleitungs-URL. Dies ist die URL, zu der Sie den Benutzer umleiten möchten, nachdem er sich bei Spotify authentifiziert hat.

Nachdem Sie Ihre Anwendung registriert haben, stellt Spotify Ihre eindeutige Kunden-ID und Kundengeheimnisse bereit, die Sie verwenden können, um:

  • Fügen Sie den Spotify-Authentifizierungsfluss hinzu, um sich mit Ihren Spotify-Anmeldeinformationen in Ihrer React-Anwendung anzumelden.
  • Holen Sie sich Ihr eindeutiges Zugriffstoken, um Anfragen an verschiedene Web-API-Endpunkte zu stellen, einschließlich einer Suche nach Daten wie Titeln oder Alben.

Richten Sie den React-Client ein

Erstellen Sie eine React-Anwendung und navigieren Sie zum Stammverzeichnis und erstellen Sie eine neue Datei, .env, um einige Umgebungsvariablen festzulegen. Sie können Ihre Client-ID aus dem Entwickler-Dashboard von Spotify abrufen.

REACT_APP_SPOTIFY_CLIENT_ID = "Ihre Kunden-ID"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "Zeichen"

Sie finden den Code dieser Anwendung in seiner GitHub-Repository.

Installieren Sie die erforderlichen Pakete

Installieren Sie Axios. Sie werden seine Methoden verwenden, um HTTP-Anfragen an die Web-API von Spotify zu stellen.

npm installiert Axios

Fügen Sie den Authentifizierungs-Workflow von Spotify hinzu

Spotify gibt an, dass alle Anfragen an einen beliebigen Web-API-Endpunkt ein gültiges Zugriffstoken im Anfrage-Header haben. Um das Zugriffstoken zu erhalten, muss sich Ihre Anwendung zunächst bei Spotify authentifizieren.

Spotify unterstützt mehrere Authentifizierung und AutorisierungMethoden wie z. B. ein Autorisierungscode, Clientanmeldeinformationen oder implizite Gewährungsmethoden.

Am einfachsten zu implementieren ist die implizite Grant-Methode, die erfordert, dass eine Anwendung Anfragen an den Authentifizierungsendpunkt stellt (Sie haben dies in der ENV-Datei hinzugefügt) und Ihre Client-ID übergeben. Nach erfolgreicher Authentifizierung antwortet Spotify mit der Bereitstellung eines Zugriffstokens, das über einen bestimmten Zeitraum abläuft.

Öffnen Sie Ihre src/App.js-Datei, löschen Sie den Boilerplate-React-Code und fügen Sie den folgenden Code hinzu:

importieren Reagieren, { useState, useEffect } aus'reagieren';
importieren Sucher aus'./components/Searcher';
FunktionApp() {
konst CLIENT_ID=process.env. REACT_APP_SPOTIFY_CLIENT_ID
konst REDIRECT_URI =process.env. REACT_APP_SPOTIFY_REDIRECT_URI 
konst AUTH_ENDPOINT =prozess.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
konst RESPONSE_TYPE = process.env. REACT_APP_SPOTIFY_RESPONSE_TYPE


konst [Token, setToken] = useState("");


 useEffect(() => { 
konst hash = Fenster.location.hash;
lassen Zeichen = Fenster.localStorage.getItem("Zeichen");

Wenn (Hash && Hash) {
 token = hash.substring(1).Teilt("&").finden(elem => elem.startsWith("Zugangstoken")).Teilt("=")[1];
Fenster.location.hash = "";
Fenster.localStorage.setItem("Zeichen", Zeichen);
 }


 setToken (Token)
 }, [])


konst abmelden = () => {
 setToken("");
Fenster.localStorage.removeItem("Zeichen");
 }


zurückkehren (


ExportStandard Anwendung;

Lassen Sie es uns aufschlüsseln:

  • Diese Komponente rendert bedingt die Suchkomponente und die Abmeldeschaltfläche, wenn das Zugriffstoken andernfalls vorhanden ist, wird ein div mit einem Link gerendert, der den Benutzer zur Spotify-Autorisierung führt Buchseite. Der Link enthält Abfrageparameter, die die Werte CLIENT_ID, REDIRECT_URI und RESPONSE_TYPE angeben.
  • Nachdem Sie einen Benutzer authentifiziert haben, rufen Sie den useEffect-Hook auf, um einen Codeblock auszuführen, wenn die Komponente bereitgestellt wird. Dieser Codeblock ruft das Zugriffstoken aus dem URL-Hash ab und legt es als neuen Wert der Statusvariablen des Tokens fest. Es speichert auch das Token im lokalen Speicher, um den Authentifizierungsstatus beizubehalten.
  • Wenn das Zugriffstoken im Zustand gespeichert ist, wird es als Stütze an die Searcher-Komponente übergeben, um Anfragen an die Web-API von Spotify zu stellen.
  • Um sich abzumelden, entfernt der Code einfach das Zugriffstoken aus dem lokalen Speicher und setzt den Tokenstatus auf eine leere Zeichenfolge.

Implementieren Sie die Suchfunktion und rendern Sie Ergebnisse

Erstellen Sie im Verzeichnis „/src“ einen neuen Ordner und nennen Sie ihn „components“. Erstellen Sie in diesem Ordner eine neue Datei: Searcher.js, und fügen Sie den folgenden Code hinzu.

importieren Reagieren, {useState, useEffect} aus'reagieren'
importieren Axios aus'axios';
FunktionSucher(Requisiten) {
konst [Suchschlüssel, setSuchschlüssel] = useState("")
konst [tracks, setTracks] = useState([])

konst access_token = props.token

konst searchArtist = asynchron () => {
konst {Daten} = erwarten axios.get(" https://api.spotify.com/v1/search", {
 Überschriften: {
'Inhaltstyp': "Anwendung/json",
'Genehmigung': „Träger ${access_token}`
 },
 Parameter: {
 q: Suchschlüssel,
 Typ: "Künstler"
 }
 })

Var artistID = data.artists.items[0].Ausweis


Var artistTracks = erwarten axios.get(` https://api.spotify.com/v1/artists/${artistID}/top-tracks`, {
 Überschriften: {
 Genehmigung: „Träger ${access_token}`
 },
 Parameter: {
 Grenze: 10,
 Markt: 'UNS'
 }
 })


 setTracks (artistTracks.data.tracks);
 }


zurückkehren (
 <>


"Suchformular">
 Klassenname ="Name"
 Typ="Text"
 Platzhalter="Nach Künstlernamen suchen ..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />


ExportStandard Sucher

Lassen Sie es uns aufschlüsseln:

  • Die Komponente definiert die access_token-Konstante, die sie auf die als Prop übergebene Token-Eigenschaft setzt. Später übergibt es dieses Token im Header der API-Anfrage an den Such-API-Endpunkt von Spotify.
  • Definieren Sie zwei Zustände: den Suchschlüssel und die Spuren. Der searchKey-Zustand enthält den aktuellen Wert der Sucheingabe. Der Titelstatus enthält ein Array der Top-10-Titel für den Künstler, die die Spotify-Suche zurückgibt.
  • Die searchArtist-Funktion sendet eine GET-Anforderung an die Spotify-API, um anhand des searchKey-Werts nach Künstlerdaten zu suchen.
  • Anschließend extrahiert es die ID des Künstlers aus den Antwortdaten und stellt eine weitere GET-Anforderung, um die Top-Tracks für diesen Künstler abzurufen. Aus den Antwortdaten extrahiert es die Top 10 Tracks und setzt die Tracks variabel.
  • Die Komponente gibt ein Eingabefeld und eine Suchschaltfläche zurück. Wenn ein Benutzer auf die Suchschaltfläche klickt, wird die searchArtist-Funktion aufgerufen, um die Top-Tracks für einen bestimmten Künstler abzurufen und anzuzeigen. Schließlich verwendet es die map-Funktion, um die obersten fünf Tracks im Track-Array als Liste zu rendern.

Führen Sie Ihren Entwicklungsserver aus, um die Änderungen zu aktualisieren, und gehen Sie dann zu http://localhost: 3000 in Ihrem Browser, um die Ergebnisse anzuzeigen.

Passen Sie Ihre Anwendung mit den Funktionen von Spotify an

In diesem Leitfaden wurden die Schritte hervorgehoben, die erforderlich sind, um Anfragen an die Web-API von Spotify zu stellen, um nach Musikdaten von Künstlern zu suchen. Sie können jedoch mehr mit den Funktionen von Spotify tun, die von seinen SDKs und APIs bereitgestellt werden, wie z. B. die Integration seines Web-Playback-Players mit dem gleichen Erscheinungsbild wie bei Spotify.

Der Vorteil der SDKs und APIs von Spotify besteht darin, dass sie reich an Funktionen sind und Sie sie problemlos in jede Web- oder Mobilanwendung integrieren können.