react spotify web playback
0.14.6
Lihat demonya
Periksa daftar browser yang didukung. Pustaka ini akan mencoba menggunakan perangkat pengguna untuk bekerja dengan browser yang tidak didukung.
npm i react-spotify-web-playback import SpotifyPlayer from 'react-spotify-web-playback' ;
< SpotifyPlayer
token = "BQAI_7RWPJuqdZxS-I8XzhkUi9RKr8Q8UUNaJAHwWlpIq6..."
uris = { [ 'spotify:artist:6HQYnRM4OzToCYPpVBInuU' ] }
/ > ; Perpustakaan ini membutuhkan objek window .
Jika Anda menggunakan kerangka SSR, Anda harus menggunakan impor dinamis atau Komponen Klien untuk memuat pemutar.
Dibutuhkan token Spotify dengan cakupan berikut:
Jika Anda ingin menampilkan tombol Favorit (), Anda memerlukan cakupan tambahan:
Silakan merujuk ke dokumen Web API Spotify untuk informasi lebih lanjut.
Pustaka ini tidak menangani pembuatan dan masa berlaku token. Anda harus menanganinya sendiri.
panggilan balik (state: CallbackState) => void
Dapatkan pembaruan status dari pemain.
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 ;
} komponen Komponen CustomComponents
Komponen khusus untuk pemutar.
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>
Callback yang digunakan Spotify SDK untuk mendapatkan/memperbarui token.
Gunakan untuk menghasilkan token baru saat pemain membutuhkannya.
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
Dapatkan contoh Spotify Web Playback SDK.
hideAttribution boolean ▶︎ salah
Sembunyikan logo Spotify.
hideCoverArt boolean ▶︎ salah
Sembunyikan gambar sampul
number volume awal antara 0 dan 1. ▶︎ 1
Volume awal untuk pemutar. Ini tidak digunakan untuk perangkat eksternal.
inlineVolume boolean ▶︎ benar
Tampilkan sebaris volume untuk tata letak "responsif" untuk 768 piksel ke atas.
tata letak 'compact' | 'responsive' ▶︎ 'responsif'
Tata letak pemain.
lokal Locale
String yang digunakan untuk atribut 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 ▶︎ salah
Perbesar penggeser pemutar saat mengarahkan kursor.
string nama ▶︎ 'Spotify Web Player'
Nama pemain.
number offset
Posisi daftar/trek yang ingin Anda mulai pemutarnya.
persistDeviceSelection boolean ▶︎ salah
Simpan pilihan perangkat.
bermain boolean
Kontrol status pemain.
preloadData boolean
Pramuat data trek sebelum diputar.
showSaveIcon boolean ▶︎ salah
Menampilkan tombol Favorit. Perlu cakupan tambahan di token Anda.
object gaya
Sesuaikan penampilan pemain. Periksa StylesOptions di tipenya.
syncExternalDevice boolean ▶︎ salah
Gunakan konteks pemutar eksternal jika tidak ada URI dan perangkat eksternal sedang memutar.
number syncExternalDeviceInterval ▶︎ 5
Waktu dalam detik saat pemutar akan melakukan sinkronisasi dengan perangkat eksternal.
string token DIPERLUKAN
Token Spotify. Info lebih lanjut ada di bawah.
updateSavedStatus (fn: (status: boolean) => any) => any
Memberi Anda fungsi untuk menyinkronkan status trek yang disimpan di pemutar.
Ini berfungsi selain prop showSaveIcon , dan ini hanya diperlukan jika Anda menyimpan status tersimpan trek di aplikasi Anda.
tali uris string | string[] DIPERLUKAN
Daftar URI Spotify.
Fungsi yang berinteraksi dengan Spotify API diekspor demi kenyamanan Anda.
Gunakan dengan risiko Anda sendiri.
import { spotifyApi } from 'react-spotify-web-playback' ;checkTracksStatus(token: string, trek: string | string[]): Janji<boolean[]>
getAlbumTracks(token: string, id: string): Janji<SpotifyApi.AlbumTracksResponse>
getArtistTopTracks(token: string, id: string): Janji<SpotifyApi.ArtistsTopTracksResponse>
getDevices(token: string): Janji<SpotifyApi.UserDevicesResponse>
getPlaybackState(token: string): Janji<SpotifyApi.CurrentlyPlayingObject | batal>
getPlaylistTracks(token: string, id: string): Janji<SpotifyApi.PlaylistTrackResponse>
getQueue(token: string): Janji<SpotifyApi.UsersQueueResponse>
getShow(token: string, id: string): Janji<SpotifyApi.ShowObjectFull>
getShowEpisodes(token: string, id: string, offset = 0): Janji<SpotifyApi.ShowEpisodesResponse>
getTrack(token: string, id: string): Janji<SpotifyApi.TrackObjectFull>
jeda(token: string, deviceId?: string): Janji<void>
mainkan(token: string, opsi: SpotifyPlayOptions): Janji<void>
interface SpotifyPlayOptions {
context_uri ?: string ;
deviceId : string ;
offset ?: number ;
uris ?: string [ ] ;
}sebelumnya(token: string, deviceId?: string): Janji<void>
selanjutnya(token: string, deviceId?: string): Janji<void>
hapusTracks(token: string, trek: string | string[]): Janji<void>
ulangi(token: string, status: 'konteks' | 'track' | 'off', deviceId?: string): Janji<void>
saveTracks(token: string, track: string | string[]): Janji<void>
mencari(token: string, posisi: nomor, deviceId?: string): Janji<void>
setDevice(token: string, deviceId: string, mustPlay?: boolean): Janji<void>
setVolume(token: string, volume: angka, deviceId?: string): Janji<void>
shuffle(token: string, status: boolean, deviceId?: string): Janji<void>
Anda dapat menyesuaikan UI dengan penyangga styles .
Jika Anda menginginkan pemutar transparan, Anda dapat menggunakan bgColor: 'transparent' .
Periksa semua opsi yang tersedia di sini.
< SpotifyWebPlayer
// ...
styles = { {
activeColor : '#fff' ,
bgColor : '#333' ,
color : '#fff' ,
loaderColor : '#fff' ,
sliderColor : '#1cb954' ,
trackArtistColor : '#ccc' ,
trackNameColor : '#fff' ,
} }
/ > Jika Anda menemukan bug, harap ajukan masalah pada pelacak masalah kami di GitHub.
MIT
