Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

Spotify ha cambiado por completo la forma en que transmitimos música con un catálogo que contiene millones de canciones, álbumes y listas de reproducción.

Usando su API web, puede hacer que sus experiencias de Spotify sean aún más divertidas al crear su propia aplicación de búsqueda de música React. La API brinda acceso a una variedad de datos de música que puede usar para crear una aplicación de música personalizada y personalizarla según sus gustos.

Spotify para desarrolladores

Spotify ofrece una amplia gama de funciones de transmisión de música, como búsqueda, reproducción sin conexión y recomendaciones personalizadas. La plataforma Spotify para desarrolladores proporciona acceso a las API y los SDK que potencian estas funciones. En esta guía, explorará la API web y aprenderá a integrarla en su aplicación React para buscar las canciones que le gustan.

instagram viewer

Regístrese para obtener una cuenta

Para comenzar, debe tener una cuenta de Spotify. Si aún no tienes uno, visita la página de registro de Spotify. Sin embargo, si ya tiene uno, inicie sesión en el Spotify para desarrolladores consola.

Registre su aplicación

Una vez que inicie sesión en la consola del desarrollador, registre su aplicación para obtener acceso a la API web. En la página del panel, haga clic en el Crear una aplicación botón, complete el nombre y la descripción, y finalmente, acepte los términos y condiciones para crear la aplicación.

Por último, haga clic en el Editar ajustes para cambiar a la configuración de URL de redireccionamiento. Dado que su aplicación aún está en modo de desarrollo, agregue http://localhost: 3000 como su URL de redireccionamiento. Esta es la URL a la que desea redirigir al usuario después de que se autentique con Spotify.

Después de registrar su aplicación, Spotify le proporcionará su identificación de cliente única y los secretos de cliente que puede usar para:

  • Agregue el flujo de autenticación de Spotify para iniciar sesión con sus credenciales de Spotify en su aplicación React.
  • Obtenga su token de acceso único para realizar solicitudes a diferentes puntos finales de API web, incluida una búsqueda de datos como pistas o álbumes.

Configurar el cliente React

Crear una aplicación Reaccionar y navegue al directorio raíz y cree un nuevo archivo, .env, para establecer algunas variables de entorno. Puede obtener su ID de cliente desde el panel de desarrollo de Spotify.

REACT_APP_SPOTIFY_CLIENT_ID = "su identificación 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 = "simbólico"

Puede encontrar el código de esta aplicación en su repositorio GitHub.

Instale los paquetes necesarios

Instale Axios. Utilizará sus métodos para realizar solicitudes HTTP a la API web de Spotify.

npm instalar axios

Agregue el flujo de trabajo de autenticación de Spotify

Spotify especifica que todas las solicitudes a cualquier punto final de la API web tienen un token de acceso válido en el encabezado de la solicitud. Para obtener el token de acceso, su aplicación primero debe autenticarse con Spotify.

Spotify admite varios autenticacion y autorizacionmétodos como un código de autorización, credenciales de cliente o métodos de concesión implícitos.

El más simple de implementar es el método de concesión implícito que requiere que una aplicación realice solicitudes al punto final de autenticación (lo agregó en el archivo ENV), pasando su ID de cliente. Tras una autenticación exitosa, Spotify responderá proporcionando un token de acceso que caduca durante un período específico.

Abra su archivo src/App.js, elimine el código React repetitivo y agregue el código a continuación:

importar Reaccionar, { estado de uso, efecto de uso } de'reaccionar';
importar Buscador de'./componentes/Buscador';
funciónaplicación() {
constante CLIENT_ID=proceso.env. REACT_APP_SPOTIFY_CLIENT_ID
constante REDIRECT_URI =proceso.env. REACT_APP_SPOTIFY_REDIRECT_URI 
constante AUTH_ENDPOINT =proceso.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
constante RESPUESTA_TIPO = proceso.env. REACT_APP_SPOTIFY_RESPONSE_TYPE


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


 usarEfecto(() => { 
constante hash = ventana.ubicación.hash;
dejar ficha = ventana.almacenamientolocal.getItem("simbólico");

si (hash && hash) {
 token = hash.subcadena(1).dividir("&").encontrar(elemento => elem.comienzacon("token_de_acceso")).dividir("=")[1];
ventana.ubicación.hash = "";
ventana.almacenamientolocal.setItem("simbólico", ficha);
 }


 setToken (token)
 }, [])


constante cerrar sesión = () => {
 establecerToken("");
ventana.localStorage.removeItem("simbólico");
 }


devolver (


exportarpor defecto aplicación;

Vamos a desglosarlo:

  • Este componente muestra condicionalmente el componente de búsqueda y el botón de cierre de sesión, si el token de acceso está presente de lo contrario, representa un div con un enlace que dirige al usuario a la autorización de Spotify página. El enlace contiene parámetros de consulta que especifican los valores CLIENT_ID, REDIRECT_URI y RESPONSE_TYPE.
  • Una vez que haya autenticado a un usuario, llame al gancho useEffect para ejecutar un bloque de código cuando se monte el componente. Este bloque de código recupera el token de acceso del hash de URL y lo establece como el nuevo valor de la variable de estado del token. También almacena el token en el almacenamiento local para conservar el estado de autenticación.
  • Con el token de acceso almacenado en el estado, se pasa como accesorio al componente de búsqueda para realizar solicitudes a la API web de Spotify.
  • Para cerrar la sesión, el código simplemente elimina el token de acceso del almacenamiento local y establece el estado del token en una cadena vacía.

Implementar la funcionalidad de búsqueda y renderizar resultados

En el directorio /src, cree una nueva carpeta y asígnele el nombre components. Dentro de esta carpeta, cree un nuevo archivo: Searcher.js y agregue el código a continuación.

importar reaccionar, {usar estado, usar efecto} de'reaccionar'
importar axios de'axíos';
funciónBuscador(accesorios) {
constante [clave de búsqueda, establecer clave de búsqueda] = useState ("")
constante [pistas, establecerPistas] = useState([])

constante access_token = props.token

constante artista de búsqueda = asíncrono () => {
constante {datos} = esperar axios.get(" https://api.spotify.com/v1/search", {
 encabezados: {
'Tipo de contenido': "aplicación/json",
'Autorización': `Portador ${token_de_acceso}`
 },
 parámetros: {
 q: clave de búsqueda,
 tipo: "artista"
 }
 })

variable IDArtista = datos.artistas.elementos[0].identificación


variable artistaTracks = esperar axios.get(` https://api.spotify.com/v1/artists/${ID del artista}/top-tracks`, {
 encabezados: {
 Autorización: `Portador ${token_de_acceso}`
 },
 parámetros: {
 límite: 10,
 mercado: 'A NOSOTROS'
 }
 })


 setTracks (artistTracks.data.tracks);
 }


devolver (
 <>


"Formulario de búsqueda">
 nombreclase ="Nombre"
 tipo ="texto"
 marcador de posición ="Buscar por nombre de artista..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />


exportarpor defecto Buscador

Vamos a desglosarlo:

  • El componente define la constante access_token que establece en la propiedad del token que se pasa como accesorio. Más tarde pasa este token en el encabezado de la solicitud de la API al punto final de la API de búsqueda de Spotify.
  • Defina dos estados: la clave de búsqueda y las pistas. El estado searchKey contiene el valor actual de la entrada de búsqueda. El estado de las pistas contiene una matriz de las 10 mejores pistas para el artista que devolverá la búsqueda de Spotify.
  • La función searchArtist realiza una solicitud GET a la API de Spotify para buscar los datos de los artistas según el valor de searchKey.
  • Luego extrae la ID del artista de los datos de respuesta y realiza otra solicitud GET para recuperar las pistas principales de ese artista. A partir de los datos de respuesta, extrae las 10 pistas principales y establece la variable de pistas.
  • El componente devuelve un campo de entrada y un botón de búsqueda. Cuando un usuario hace clic en el botón de búsqueda, llama a la función searchArtist para buscar y mostrar las pistas principales de un artista en particular. Finalmente, utiliza la función de mapa para representar las cinco pistas principales en la matriz de pistas como una lista.

Ejecute su servidor de desarrollo para actualizar los cambios, luego diríjase a http://localhost: 3000 en su navegador para ver los resultados.

Personaliza tu aplicación con las funciones de Spotify

Esta guía destacó los pasos necesarios para realizar solicitudes a la API web de Spotify para buscar datos musicales de artistas. Sin embargo, puede hacer más con las funciones de Spotify proporcionadas por sus SDK y API, como integrar su reproductor de reproducción web con la misma apariencia que en Spotify.

La ventaja de los SDK y las API de Spotify es que tienen muchas funciones y puede integrarlos fácilmente en cualquier aplicación web o móvil.