react spotify web playback
0.14.6
Sehen Sie sich die Demo an
Überprüfen Sie die Liste der unterstützten Browser. Diese Bibliothek wird versuchen, die Geräte des Benutzers für die Arbeit mit nicht unterstützten Browsern zu verwenden.
npm i react-spotify-web-playback import SpotifyPlayer from 'react-spotify-web-playback' ;
< SpotifyPlayer
token = "BQAI_7RWPJuqdZxS-I8XzhkUi9RKr8Q8UUNaJAHwWlpIq6..."
uris = { [ 'spotify:artist:6HQYnRM4OzToCYPpVBInuU' ] }
/ > ; Diese Bibliothek erfordert das window .
Wenn Sie ein SSR-Framework verwenden, müssen Sie einen dynamischen Import oder eine Client-Komponente verwenden, um den Player zu laden.
Es benötigt ein Spotify-Token mit den folgenden Bereichen:
Wenn Sie die Schaltfläche „Favorit“ () anzeigen möchten, benötigen Sie die zusätzlichen Bereiche:
Weitere Informationen finden Sie in den Web-API-Dokumenten von Spotify.
Diese Bibliothek kümmert sich nicht um die Generierung und den Ablauf von Token. Das müssen Sie selbst in die Hand nehmen.
Rückruf (state: CallbackState) => void
Erhalten Sie Statusaktualisierungen vom Player.
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 ;
} Komponenten CustomComponents
Benutzerdefinierte Komponenten für den Player.
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>
Der Rückruf, den Spotify SDK zum Abrufen/Aktualisieren des Tokens verwendet.
Verwenden Sie es, um einen neuen Token zu generieren, wenn der Spieler ihn benötigt.
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
Holen Sie sich die Spotify Web Playback SDK-Instanz.
hideAttribution boolean ▶︎ false
Blenden Sie das Spotify-Logo aus.
hideCoverArt boolean ▶︎ false
Blenden Sie das Cover aus
initialVolume- number zwischen 0 und 1. ▶︎ 1
Die anfängliche Lautstärke für den Player. Es wird nicht für externe Geräte verwendet.
inlineVolume boolean ▶︎ true
Zeigt die Lautstärke inline für das „responsive“ Layout für 768 Pixel und höher an.
Layout 'compact' | 'responsive' ▶︎ 'ansprechend'
Das Layout des Players.
Locale Gebietsschema
Die für die aria-label/title-Attribute verwendeten Zeichenfolgen.
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 ▶︎ false
Vergrößern Sie den Schieberegler des Spielers beim Schweben.
Namenszeichenfolge ▶︎ ' string Web Player'
Der Name des Spielers.
Offset- number
Die Position der Liste/Titel, an der Sie den Player starten möchten.
persistDeviceSelection boolean ▶︎ false
Speichern Sie die Geräteauswahl.
boolean spielen
Kontrollieren Sie den Status des Spielers.
preloadData boolean
Laden Sie die Titeldaten vor der Wiedergabe vor.
showSaveIcon boolean ▶︎ false
Zeigt eine Favorit-Schaltfläche an. Es benötigt zusätzliche Bereiche in Ihrem Token.
Styles- object
Passen Sie das Erscheinungsbild des Players an. Überprüfen Sie StylesOptions in den Typen.
syncExternalDevice boolean ▶︎ false
Verwenden Sie den externen Player-Kontext, wenn keine URIs vorhanden sind und ein externes Gerät abspielt.
syncExternalDeviceInterval number ▶︎ 5
Die Zeit in Sekunden, die der Player mit externen Geräten synchronisiert.
Token- string ERFORDERLICH
Ein Spotify-Token. Weitere Informationen finden Sie weiter unten.
updateSavedStatus (fn: (status: boolean) => any) => any
Bietet Ihnen eine Funktion zum Synchronisieren des Titelspeicherstatus im Player.
Dies funktioniert zusätzlich zur showSaveIcon- Requisite und ist nur erforderlich, wenn Sie den gespeicherten Status des Tracks in Ihrer App behalten.
Uris- string | string[] ERFORDERLICH
Eine Liste von Spotify-URIs.
Die Funktionen, die mit der Spotify-API interagieren, werden zu Ihrer Bequemlichkeit exportiert.
Die Nutzung erfolgt auf eigene Gefahr.
import { spotifyApi } from 'react-spotify-web-playback' ;checkTracksStatus(token: string, track: string | string[]): Promise<boolean[]>
getAlbumTracks(token: string, id: string): Promise<SpotifyApi.AlbumTracksResponse>
getArtistTopTracks(token: string, id: string): Promise<SpotifyApi.ArtistsTopTracksResponse>
getDevices(token: string): Promise<SpotifyApi.UserDevicesResponse>
getPlaybackState(token: string): Promise<SpotifyApi.CurrentlyPlayingObject | null>
getPlaylistTracks(token: string, id: string): Promise<SpotifyApi.PlaylistTrackResponse>
getQueue(token: string): Promise<SpotifyApi.UsersQueueResponse>
getShow(token: string, id: string): Promise<SpotifyApi.ShowObjectFull>
getShowEpisodes(token: string, id: string, offset = 0): Promise<SpotifyApi.ShowEpisodesResponse>
getTrack(token: string, id: string): Promise<SpotifyApi.TrackObjectFull>
pause(token: string, deviceId?: string): Promise<void>
play(token: string, Optionen: SpotifyPlayOptions): Promise<void>
interface SpotifyPlayOptions {
context_uri ?: string ;
deviceId : string ;
offset ?: number ;
uris ?: string [ ] ;
}previous(token: string, deviceId?: string): Promise<void>
next(token: string, deviceId?: string): Promise<void>
RemoveTracks(Token: String, Tracks: String | String[]): Promise<void>
wiederholen(token: string, state: 'context' | 'track' | 'off', deviceId?: string): Promise<void>
saveTracks(token: string, songs: string | string[]): Promise<void>
suche(token: string, position: number, deviceId?: string): Promise<void>
setDevice(token: string, deviceId: string, ShouldPlay?: boolean): Promise<void>
setVolume(token: string, volume: number, deviceId?: string): Promise<void>
shuffle(token: string, state: boolean, deviceId?: string): Promise<void>
Sie können die Benutzeroberfläche mit einer styles Requisite anpassen.
Wenn Sie einen transparenten Player wünschen, können Sie bgColor: 'transparent' verwenden.
Sehen Sie sich hier alle verfügbaren Optionen an.
< SpotifyWebPlayer
// ...
styles = { {
activeColor : '#fff' ,
bgColor : '#333' ,
color : '#fff' ,
loaderColor : '#fff' ,
sliderColor : '#1cb954' ,
trackArtistColor : '#ccc' ,
trackNameColor : '#fff' ,
} }
/ > Wenn Sie einen Fehler finden, melden Sie bitte ein Problem in unserem Issue-Tracker auf GitHub.
MIT
