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 之间。 ▶︎ 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 上的问题跟踪器上提交问题。

执照

麻省理工学院