react spotify web playback
0.14.6
Ver la demostración
Consulte la lista de navegadores compatibles. Esta biblioteca intentará utilizar los dispositivos del usuario para trabajar con navegadores no compatibles.
npm i react-spotify-web-playback import SpotifyPlayer from 'react-spotify-web-playback' ;
< SpotifyPlayer
token = "BQAI_7RWPJuqdZxS-I8XzhkUi9RKr8Q8UUNaJAHwWlpIq6..."
uris = { [ 'spotify:artist:6HQYnRM4OzToCYPpVBInuU' ] }
/ > ; Esta biblioteca requiere el objeto window .
Si está utilizando un marco SSR, necesitará utilizar una importación dinámica o un componente de cliente para cargar el reproductor.
Necesita un token de Spotify con los siguientes alcances:
Si desea mostrar el botón Favorito (), necesitará los ámbitos adicionales:
Consulte los documentos de la API web de Spotify para obtener más información.
Esta biblioteca no maneja la generación ni la caducidad de tokens. Tendrás que encargarte de eso tú mismo.
devolución de llamada (state: CallbackState) => void
Obtenga actualizaciones de estado del reproductor.
type ErrorType = 'account' | 'authentication' | 'initialization' | 'playback' | 'player' ;
type RepeatState = 'off' | 'context' | 'track' ;
type Status = 'ERROR' | 'IDLE' | 'INITIALIZING' | 'READY' | 'RUNNING' | 'UNSUPPORTED' ;
type Type =
| 'device_update'
| 'favorite_update'
| 'player_update'
| 'progress_update'
| 'status_update'
| 'track_update' ;
interface CallbackState extends State {
type : Type ;
}
interface State {
currentDeviceId : string ;
deviceId : string ;
devices : SpotifyDevice [ ] ;
error : string ;
errorType : ErrorType | null ;
isActive : boolean ;
isInitializing : boolean ;
isMagnified : boolean ;
isPlaying : boolean ;
isSaved : boolean ;
isUnsupported : boolean ;
needsUpdate : boolean ;
nextTracks : SpotifyTrack [ ] ;
playerPosition : 'bottom' | 'top' ;
position : number ;
previousTracks : SpotifyTrack [ ] ;
progressMs : number ;
repeat : RepeatState ;
shuffle : boolean ;
status : Status ;
track : SpotifyTrack ;
volume : number ;
} componentes Componentes CustomComponents
Componentes personalizados para el reproductor.
interface CustomComponents {
/**
* A React component to be displayed before the previous button.
*/
leftButton ?: ReactNode ;
/**
* A React component to be displayed after the next button.
*/
rightButton ?: ReactNode ;
} getOAuthToken (callback: (token: string) => void) => Promise<void>
La devolución de llamada que Spotify SDK utiliza para obtener/actualizar el token.
Úselo para generar un nuevo token cuando el jugador lo necesite.
import { useState } from 'react' ;
import SpotifyPlayer , { Props } from 'react-spotify-web-playback' ;
import { refreshTokenRequest } from '../some_module' ;
export default function PlayerWrapper ( ) {
const [ accessToken , setAccessToken ] = useState ( '' ) ;
const [ refreshToken , setRefreshToken ] = useState ( '' ) ;
const [ expiresAt , setExpiresAt ] = useState ( 0 ) ;
const getOAuthToken : Props [ 'getOAuthToken' ] = async callback => {
if ( expiresAt > Date . now ( ) ) {
callback ( accessToken ) ;
return ;
}
const { acess_token , expires_in , refresh_token } = await refreshTokenRequest ( refreshToken ) ;
setAccessToken ( acess_token ) ;
setRefreshToken ( refresh_token ) ;
setExpiresAt ( Date . now ( ) + expires_in * 1000 ) ;
callback ( acess_token ) ;
} ;
return < SpotifyPlayer getOAuthToken = { getOAuthToken } token = { accessToken } uris = { [ ] } / > ;
} getPlayer (player: SpotifyPlayer) => void
Obtenga la instancia del SDK de reproducción web de Spotify.
hideAttribution boolean ▶︎ falso
Oculta el logotipo de Spotify.
hideCoverArt boolean ▶︎ falso
Ocultar la portada
number de volumen inicial entre 0 y 1. ▶︎ 1
El volumen inicial del reproductor. No se utiliza para dispositivos externos.
inlineVolume boolean ▶︎ verdadero
Muestre el volumen en línea para el diseño "responsive" para 768 px y superiores.
diseño 'compact' | 'responsive' ▶︎ 'sensible'
El diseño del jugador.
local Locale
Las cadenas utilizadas para los atributos aria-label/title.
interface Locale {
currentDevice ?: string ; // 'Current device'
devices ?: string ; // 'Devices'
next ?: string ; // 'Next'
otherDevices ?: string ; // 'Select other device'
pause ?: string ; // 'Pause'
play ?: string ; // 'Play'
previous ?: string ; // 'Previous'
removeTrack ?: string ; // 'Remove from your favorites'
saveTrack ?: string ; // 'Save to your favorites'
title ?: string ; // '{name} on SPOTIFY'
volume ?: string ; // 'Volume'
} magnifySliderOnHover : boolean ▶︎ falso
Amplíe el control deslizante del reproductor al pasar el mouse.
string de nombre ▶︎ 'Spotify Web Player'
El nombre del jugador.
number de compensación
La posición de la lista/pistas en las que desea iniciar el reproductor.
persistDeviceSelection boolean ▶︎ falso
Guarde la selección del dispositivo.
jugar boolean
Controla el estado del jugador.
preloadData boolean
Precargue los datos de la pista antes de reproducir.
showSaveIcon boolean ▶︎ falso
Muestra un botón de favorito. Necesita alcances adicionales en su token.
object de estilos
Personaliza la apariencia del jugador. Verifique StylesOptions en los tipos.
syncExternalDevice boolean ▶︎ falso
Utilice el contexto del reproductor externo si no hay URI y se está reproduciendo un dispositivo externo.
number intervalo de dispositivo externo de sincronización ▶︎ 5
El tiempo en segundos que el reproductor se sincronizará con dispositivos externos.
string de token REQUERIDA
Una ficha de Spotify. Más información está debajo.
updateSavedStatus (fn: (status: boolean) => any) => any
Proporcionarle una función para sincronizar el estado guardado de la pista en el reproductor.
Esto funciona además de la propiedad showSaveIcon y solo es necesario si realiza un seguimiento del estado guardado en su aplicación.
cadena de uri string | string[] REQUERIDO
Una lista de URI de Spotify.
Las funciones que interactúan con la API de Spotify se exportan para tu comodidad.
Úselos bajo su propio riesgo.
import { spotifyApi } from 'react-spotify-web-playback' ;checkTracksStatus(token: cadena, pistas: cadena | cadena[]): Promesa<boolean[]>
getAlbumTracks(token: cadena, id: cadena): Promesa<SpotifyApi.AlbumTracksResponse>
getArtistTopTracks(token: cadena, id: cadena): Promesa<SpotifyApi.ArtistsTopTracksResponse>
getDevices(token: cadena): Promesa<SpotifyApi.UserDevicesResponse>
getPlaybackState(token: cadena): Promesa<SpotifyApi.CurrentlyPlayingObject | nulo>
getPlaylistTracks(token: cadena, id: cadena): Promesa<SpotifyApi.PlaylistTrackResponse>
getQueue(token: cadena): Promesa<SpotifyApi.UsersQueueResponse>
getShow(token: cadena, id: cadena): Promesa<SpotifyApi.ShowObjectFull>
getShowEpisodes(token: cadena, id: cadena, desplazamiento = 0): Promesa<SpotifyApi.ShowEpisodesResponse>
getTrack(token: cadena, id: cadena): Promesa<SpotifyApi.TrackObjectFull>
pausa (token: cadena, ID de dispositivo?: cadena): Promesa <vacío>
reproducir (token: cadena, opciones: SpotifyPlayOptions): Promesa <void>
interface SpotifyPlayOptions {
context_uri ?: string ;
deviceId : string ;
offset ?: number ;
uris ?: string [ ] ;
}anterior (token: cadena, ID de dispositivo?: cadena): Promesa <vacío>
siguiente (token: cadena, ID de dispositivo?: cadena): Promesa <vacío>
removeTracks(token: cadena, pistas: cadena | cadena[]): Promesa<void>
repetir (token: cadena, estado: 'contexto' | 'pista' | 'apagado', ID de dispositivo?: cadena): Promesa<void>
saveTracks(token: cadena, pistas: cadena | cadena[]): Promesa<void>
buscar (token: cadena, posición: número, ID de dispositivo?: cadena): Promesa <vacío>
setDevice (token: cadena, ID de dispositivo: cadena, debería jugar?: booleano): Promesa <vacío>
setVolume(token: cadena, volumen: número, dispositivoId?: cadena): Promesa<void>
shuffle(token: cadena, estado: booleano, ID de dispositivo?: cadena): Promesa<void>
Puede personalizar la interfaz de usuario con un accesorio styles .
Si quieres un reproductor transparente, puedes usar bgColor: 'transparent' .
Consulta todas las opciones disponibles aquí.
< SpotifyWebPlayer
// ...
styles = { {
activeColor : '#fff' ,
bgColor : '#333' ,
color : '#fff' ,
loaderColor : '#fff' ,
sliderColor : '#1cb954' ,
trackArtistColor : '#ccc' ,
trackNameColor : '#fff' ,
} }
/ > Si encuentra un error, presente un problema en nuestro rastreador de problemas en GitHub.
MIT
