react spotify web playback

反應 spotify 網路播放

帶有 Spotify Web Playback SDK 的 Spotify 播放器。

查看示範

檢查支援的瀏覽器清單。該庫將嘗試使用用戶的裝置來使用不支援的瀏覽器。

設定

npm i react-spotify-web-playback

入門

 import SpotifyPlayer from 'react-spotify-web-playback' ;

< SpotifyPlayer
  token = "BQAI_7RWPJuqdZxS-I8XzhkUi9RKr8Q8UUNaJAHwWlpIq6..."
  uris = { [ 'spotify:artist:6HQYnRM4OzToCYPpVBInuU' ] }
/ > ;

僅限客戶端

該庫需要window對象。
如果您使用 SSR 框架，則需要使用動態匯入或用戶端元件來載入播放器。

Spotify 代幣

它需要具有以下範圍的 Spotify 令牌：

• 串流媒體
• 使用者閱讀電​​子郵件
• 使用者讀取私有
• user-read-playback-state（讀取其他裝置的狀態）
• user-modify-playback-state（更新其他裝置）

如果您想顯示「收藏夾」按鈕 ()，則需要其他範圍：

• 用戶庫讀取
• 用戶庫修改

請參閱 Spotify 的 Web API 文件以取得更多資訊。

該庫不處理令牌產生和過期。你需要自己處理這個問題。

道具

回呼(state: CallbackState) => void
從播放器取得狀態更新。

類型定義

 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 ;
}

組件CustomComponents組件
為播放器自訂組件。

類型定義

 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>
Spotify SDK 用於取得/更新令牌的回呼。
當玩家需要時，用它來產生新的令牌。

例子

 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
取得 Spotify Web Playback SDK 實例。

hideAttribution boolean ▶︎ false
隱藏 Spotify 徽標。

hideCoverArt boolean ▶︎ false
隱藏封面藝術

初始卷number介於 0 和 1 之間。
播放器的初始音量。它不用於外部設備。

inlineVolume boolean ▶︎ true
顯示 768px 以上「響應式」版面的內嵌音量。

佈局'compact' | 'responsive' ▶︎ '響應'
播放器的佈局。

語言環境Locale
用於 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 ▶︎ false
懸停時放大播放器的滑桿。

名稱string ▶︎ 'Spotify Web Player'
玩家的名字。

偏移number
您想要啟動播放器的清單/曲目的位置。

persistDeviceSelection boolean ▶︎ false
保存設備選擇。

玩boolean
控制玩家的狀態。

預先載入資料boolean
播放前預載曲目資料。

showSaveIcon boolean ▶︎ false
顯示收藏夾按鈕。它需要您的令牌中有額外的範圍。

樣式object
自訂播放器的外觀。檢查類型中的StylesOptions 。

syncExternalDevice boolean ▶︎ false
如果沒有 URI 且外部裝置正在播放，則使用外部播放器上下文。

同步外部設備間隔number ▶︎ 5
播放器與外部裝置同步的時間（以秒為單位）。

令牌string必需
Spotify 代幣。更多資訊如下。

updateSavedStatus (fn: (status: boolean) => any) => any
為您提供同步播放器中曲目保存狀態的功能。
除了showSaveIcon屬性之外，它還可以工作，並且僅當您在應用程式中保留追蹤的保存狀態時才需要它。

uri string | string[]必需
Spotify URI 清單。

Spotify API

為了您的方便，與 Spotify API 互動的函數已匯出。
使用它們的風險由您自行承擔。

 import { spotifyApi } from 'react-spotify-web-playback' ;

checkTracksStatus（令牌：字串，軌道：字串|字串[]）：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（令牌：字串）：Promise<SpotifyApi.CurrentlyPlayingObject |空>

getPlaylistTracks(token: string, id: string): Promise<SpotifyApi.PlaylistTrackResponse>

getQueue(token: string): Promise<SpotifyApi.UsersQueueResponse>

getShow(token: string, id: string): Promise<SpotifyApi.ShowObjectFull>

getShowEpisodes（令牌：字串，id：字串，偏移量= 0）：Promise<SpotifyApi.ShowEpisodesResponse>

getTrack(token: string, id: string): Promise<SpotifyApi.TrackObjectFull>

暫停（令牌：字串，deviceId？：字串）：Promise<void>

播放（令牌：字串，選項：SpotifyPlayOptions）：Promise<void>

 interface SpotifyPlayOptions {
  context_uri ?: string ;
  deviceId : string ;
  offset ?: number ;
  uris ?: string [ ] ;
}

先前（令牌：字串，deviceId？：字串）：Promise<void>

next(令牌: 字串, deviceId?: 字串): Promise<void>

removeTracks（令牌：字串，軌道：字串|字串[]）：Promise<void>

重複（令牌：字串，狀態：'上下文'|'軌道'|'關閉'，deviceId？：字串）：Promise<void>

saveTracks（令牌：字串，軌道：字串|字串[]）：Promise<void>

尋求（令牌：字串，位置：數字，deviceId？：字串）：Promise<void>

setDevice(token: string, deviceId: string, shouldPlay?: boolean): Promise<void>

setVolume(令牌: 字串, 卷: 數字, deviceId?: 字串): Promise<void>

shuffle(token: string, state: boolean, deviceId?: string): Promise<void>

造型

您可以使用styles屬性自訂 UI。
如果你想要一個透明的播放器，你可以使用bgColor: 'transparent' 。
在此處檢查所有可用選項。

 < SpotifyWebPlayer
  // ...
  styles = { {
    activeColor : '#fff' ,
    bgColor : '#333' ,
    color : '#fff' ,
    loaderColor : '#fff' ,
    sliderColor : '#1cb954' ,
    trackArtistColor : '#ccc' ,
    trackNameColor : '#fff' ,
  } }
/ > 

問題

如果您發現錯誤，請在 GitHub 上的問題追蹤器上提交問題。

執照

麻省理工學院