react spotify web playback
0.14.6
Veja a demonstração
Verifique a lista de navegadores suportados. Esta biblioteca tentará usar os dispositivos do usuário para trabalhar com navegadores não suportados.
npm i react-spotify-web-playback import SpotifyPlayer from 'react-spotify-web-playback' ;
< SpotifyPlayer
token = "BQAI_7RWPJuqdZxS-I8XzhkUi9RKr8Q8UUNaJAHwWlpIq6..."
uris = { [ 'spotify:artist:6HQYnRM4OzToCYPpVBInuU' ] }
/ > ; Esta biblioteca requer o objeto window .
Se estiver usando uma estrutura SSR, você precisará usar uma importação dinâmica ou um componente cliente para carregar o player.
Precisa de um token Spotify com os seguintes escopos:
Se quiser mostrar o botão Favorito (), você precisará dos escopos adicionais:
Consulte a documentação da API Web do Spotify para obter mais informações.
Esta biblioteca não lida com geração e expiração de tokens. Você precisará cuidar disso sozinho.
retorno de chamada (state: CallbackState) => void
Obtenha atualizações de status do 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 ;
} componentes CustomComponents
Componentes personalizados para o 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>
O retorno de chamada que o Spotify SDK usa para obter/atualizar o token.
Use-o para gerar um novo token quando o jogador precisar.
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
Obtenha a instância do Spotify Web Playback SDK.
hideAttribution boolean ▶︎ falso
Oculte o logotipo do Spotify.
hideCoverArt boolean ▶︎ falso
Ocultar a arte da capa
number do volume inicial entre 0 e 1. ▶︎ 1
O volume inicial do player. Não é usado para dispositivos externos.
inlineVolume boolean ▶︎ verdadeiro
Mostre o volume embutido para o layout "responsivo" de 768px e superior.
layout 'compact' | 'responsive' ▶︎ 'responsivo'
O layout do jogador.
Locale Local
As strings usadas para 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
Amplie o controle deslizante do player ao passar o mouse.
string de nome ▶︎ 'Spotify Web Player'
O nome do jogador.
number de deslocamento
A posição da lista/faixas que você deseja iniciar o player.
persistDeviceSelection boolean ▶︎ falso
Salve a seleção do dispositivo.
jogar boolean
Controle o status do jogador.
preloadData boolean
Pré-carregue os dados da faixa antes de reproduzir.
showSaveIcon boolean ▶︎ falso
Exibir um botão Favorito. Precisa de escopos adicionais em seu token.
object de estilos
Personalize a aparência do jogador. Verifique StylesOptions nos tipos.
sincronizarExternalDevice boolean ▶︎ falso
Use o contexto do player externo se não houver URIs e um dispositivo externo estiver reproduzindo.
number intervalo de sincronizaçãoExternalDevice ▶︎ 5
O tempo em segundos que o player sincronizará com dispositivos externos.
string de token OBRIGATÓRIA
Um token do Spotify. Mais informações estão abaixo.
updateSavedStatus (fn: (status: boolean) => any) => any
Fornece uma função para sincronizar o status da faixa salva no player.
Isso funciona em adição à propriedade showSaveIcon e só será necessário se você mantiver o status salvo do controle em seu aplicativo.
string de uris string | string[] OBRIGATÓRIO
Uma lista de URIs do Spotify.
As funções que interagem com a API do Spotify são exportadas para sua conveniência.
Use-os por sua própria conta e risco.
import { spotifyApi } from 'react-spotify-web-playback' ;checkTracksStatus(token: string, trilhas: string | string[]): Promessa<boolean[]>
getAlbumTracks(token: string, id: string): Promise<SpotifyApi.AlbumTracksResponse>
getArtistTopTracks(token: string, id: string): Promessa<SpotifyApi.ArtistsTopTracksResponse>
getDevices(token: string): Promessa<SpotifyApi.UserDevicesResponse>
getPlaybackState(token: string): Promise<SpotifyApi.CurrentlyPlayingObject | nulo>
getPlaylistTracks(token: string, id: string): Promise<SpotifyApi.PlaylistTrackResponse>
getQueue(token: string): Promessa<SpotifyApi.UsersQueueResponse>
getShow(token: string, id: string): Promessa<SpotifyApi.ShowObjectFull>
getShowEpisodes(token: string, id: string, offset = 0): Promise<SpotifyApi.ShowEpisodesResponse>
getTrack(token: string, id: string): Promessa<SpotifyApi.TrackObjectFull>
pausa(token: string, deviceId?: string): Promessa<void>
play(token: string, opções: SpotifyPlayOptions): Promessa<void>
interface SpotifyPlayOptions {
context_uri ?: string ;
deviceId : string ;
offset ?: number ;
uris ?: string [ ] ;
}anterior(token: string, deviceId?: string): Promessa<void>
próximo(token: string, deviceId?: string): Promessa<void>
removeTracks(token: string, trilhas: string | string[]): Promessa<void>
repetir(token: string, estado: 'contexto' | 'track' | 'off', deviceId?: string): Promise<void>
saveTracks(token: string, trilhas: string | string[]): Promessa<void>
seek(token: string, posição: número, deviceId?: string): Promise<void>
setDevice(token: string, deviceId: string, shouldPlay?: boolean): Promessa<void>
setVolume(token: string, volume: número, deviceId?: string): Promessa<void>
shuffle(token: string, estado: booleano, deviceId?: string): Promise<void>
Você pode personalizar a IU com um suporte styles .
Se você quiser um player transparente, você pode usar bgColor: 'transparent' .
Confira todas as opções disponíveis aqui.
< SpotifyWebPlayer
// ...
styles = { {
activeColor : '#fff' ,
bgColor : '#333' ,
color : '#fff' ,
loaderColor : '#fff' ,
sliderColor : '#1cb954' ,
trackArtistColor : '#ccc' ,
trackNameColor : '#fff' ,
} }
/ > Se você encontrar um bug, registre um problema em nosso rastreador de problemas no GitHub.
MIT
