react spotify web playback
0.14.6
Voir la démo
Vérifiez la liste des navigateurs pris en charge. Cette bibliothèque tentera d'utiliser les appareils de l'utilisateur pour fonctionner avec des navigateurs non pris en charge.
npm i react-spotify-web-playback import SpotifyPlayer from 'react-spotify-web-playback' ;
< SpotifyPlayer
token = "BQAI_7RWPJuqdZxS-I8XzhkUi9RKr8Q8UUNaJAHwWlpIq6..."
uris = { [ 'spotify:artist:6HQYnRM4OzToCYPpVBInuU' ] }
/ > ; Cette bibliothèque nécessite l'objet window .
Si vous utilisez un framework SSR, vous devrez utiliser une importation dynamique ou un composant client pour charger le lecteur.
Il a besoin d'un jeton Spotify avec les étendues suivantes :
Si vous souhaitez afficher le bouton Favoris (), vous aurez besoin des étendues supplémentaires :
Veuillez vous référer à la documentation de l'API Web de Spotify pour plus d'informations.
Cette bibliothèque ne gère pas la génération et l'expiration des jetons. Vous devrez gérer cela par vous-même.
rappel (state: CallbackState) => void
Obtenez des mises à jour de statut du joueur.
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 ;
} composants Composants CustomComponents
Composants personnalisés pour le joueur.
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>
Le SDK de rappel Spotify utilise pour obtenir/mettre à jour le jeton.
Utilisez-le pour générer un nouveau jeton lorsque le joueur en a besoin.
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
Obtenez l'instance du SDK Spotify Web Playback.
hideAttribution boolean ▶︎ faux
Masquez le logo Spotify.
hideCoverArt boolean ▶︎ faux
Masquer la pochette
number de volume initial compris entre 0 et 1. ▶︎ 1
Le volume initial du lecteur. Il n'est pas utilisé pour les appareils externes.
inlineVolume boolean ▶︎ vrai
Affichez le volume en ligne pour la mise en page « responsive » pour 768 px et plus.
disposition 'compact' | 'responsive' ▶︎ 'réactif'
La disposition du lecteur.
paramètres Locale Paramètres régionaux
Les chaînes utilisées pour les attributs 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 ▶︎ faux
Agrandissez le curseur du lecteur en survol.
string de nom ▶︎ 'Spotify Web Player'
Le nom du joueur.
number de décalage
La position de la liste/des pistes sur lesquelles vous souhaitez démarrer le lecteur.
persistDeviceSelection boolean ▶︎ faux
Enregistrez la sélection de périphérique.
jouer boolean
Contrôlez le statut du joueur.
preloadData boolean
Préchargez les données de la piste avant de jouer.
showSaveIcon boolean ▶︎ faux
Afficher un bouton Favoris. Il a besoin de portées supplémentaires dans votre jeton.
object de styles
Personnalisez l'apparence du joueur. Vérifiez StylesOptions dans les types.
syncExternalDevice boolean ▶︎ faux
Utilisez le contexte du lecteur externe s'il n'y a pas d'URI et qu'un périphérique externe est en cours de lecture.
syncExternalDeviceInterval number ▶︎ 5
Le temps en secondes pendant lequel le lecteur se synchronisera avec des appareils externes.
string de jeton OBLIGATOIRE
Un jeton Spotify. Plus d’informations ci-dessous.
updateSavedStatus (fn: (status: boolean) => any) => any
Vous fournit une fonction pour synchroniser l'état de la piste enregistrée dans le lecteur.
Cela fonctionne en plus de la prop showSaveIcon , et cela n'est nécessaire que si vous conservez le statut enregistré de la trace dans votre application.
chaîne d'uris string | string[] OBLIGATOIRE
Une liste des URI Spotify.
Les fonctions qui interagissent avec l'API Spotify sont exportées pour votre commodité.
Utilisez-les à vos propres risques.
import { spotifyApi } from 'react-spotify-web-playback' ;checkTracksStatus(jeton : chaîne, pistes : chaîne | chaîne[]) : Promise<boolean[]>
getAlbumTracks (jeton : chaîne, identifiant : chaîne) : Promise<SpotifyApi.AlbumTracksResponse>
getArtistTopTracks (jeton : chaîne, identifiant : chaîne) : Promise<SpotifyApi.ArtistsTopTracksResponse>
getDevices (jeton : chaîne) : Promise<SpotifyApi.UserDevicesResponse>
getPlaybackState (jeton : chaîne) : Promise<SpotifyApi.CurrentlyPlayingObject | nul>
getPlaylistTracks (jeton : chaîne, identifiant : chaîne) : Promise<SpotifyApi.PlaylistTrackResponse>
getQueue (jeton : chaîne) : Promise<SpotifyApi.UsersQueueResponse>
getShow (jeton : chaîne, identifiant : chaîne) : Promise<SpotifyApi.ShowObjectFull>
getShowEpisodes (jeton : chaîne, identifiant : chaîne, offset = 0) : Promise<SpotifyApi.ShowEpisodesResponse>
getTrack (jeton : chaîne, identifiant : chaîne) : Promise<SpotifyApi.TrackObjectFull>
pause(jeton : string, deviceId ? : string): Promise<void>
play(jeton : chaîne, options : SpotifyPlayOptions) : Promise<void>
interface SpotifyPlayOptions {
context_uri ?: string ;
deviceId : string ;
offset ?: number ;
uris ?: string [ ] ;
}précédent(jeton : string, deviceId ? : string) : Promise<void>
next(token : string, deviceId ? : string): Promise<void>
RemoveTracks (jeton : chaîne, pistes : chaîne | chaîne[]) : Promise<void>
répéter (jeton : chaîne, état : 'context' | 'track' | 'off', deviceId ? : chaîne) : Promise<void>
saveTracks(jeton : chaîne, pistes : chaîne | chaîne[]) : Promesse<void>
seek(token : string, position : number, deviceId?: string) : Promise<void>
setDevice(token : string, deviceId : string, ShouldPlay ?: boolean) : Promise<void>
setVolume (jeton : chaîne, volume : numéro, deviceId ? : chaîne) : Promise<void>
shuffle (jeton : chaîne, état : booléen, deviceId ? : chaîne) : Promise<void>
Vous pouvez personnaliser l'interface utilisateur avec un accessoire styles .
Si vous voulez un lecteur transparent, vous pouvez utiliser bgColor: 'transparent' .
Vérifiez toutes les options disponibles ici.
< SpotifyWebPlayer
// ...
styles = { {
activeColor : '#fff' ,
bgColor : '#333' ,
color : '#fff' ,
loaderColor : '#fff' ,
sliderColor : '#1cb954' ,
trackArtistColor : '#ccc' ,
trackNameColor : '#fff' ,
} }
/ > Si vous trouvez un bug, veuillez signaler un problème sur notre outil de suivi des problèmes sur GitHub.
MIT
