react spotify web playback

反応-Spotify-Web-再生

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
カバーアートを非表示にする

0 から 1 までの初期ボリュームnumber 。 ▶︎ 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を再生する
プレイヤーのステータスをコントロールします。

preloadData boolean
再生する前にトラックデータをプリロードします。

showSaveIcon boolean ▶︎ false
お気に入りボタンを表示します。トークンに追加のスコープが必要です。

スタイルobject
プレイヤーの外観をカスタマイズします。タイプのStylesOptionsを確認します。

syncExternalDevice boolean ▶︎ false
URI がなく、外部デバイスが再生されている場合は、外部プレーヤー コンテキストを使用します。

syncExternalDeviceInterval 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(トークン: 文字列, ID: 文字列): Promise<SpotifyApi.AlbumTracksResponse>

getArtistTopTracks(トークン: 文字列, ID: 文字列): Promise<SpotifyApi.ArtistsTopTracksResponse>

getDevices(token: string): Promise<SpotifyApi.UserDevicesResponse>

getPlaybackState(トークン: string): Promise<SpotifyApi.CurrentlyPlayingObject | null>

getPlaylistTracks(トークン: 文字列, ID: 文字列): Promise<SpotifyApi.PlaylistTrackResponse>

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

getShow(トークン: 文字列, ID: 文字列): Promise<SpotifyApi.ShowObjectFull>

getShowエピソード(トークン: 文字列、ID: 文字列、オフセット = 0): Promise<SpotifyApi.ShowepisodesResponse>

getTrack(トークン: 文字列, ID: 文字列): Promise<SpotifyApi.TrackObjectFull>

一時停止(トークン: 文字列、デバイス ID?: 文字列): Promise<void>

play(トークン: 文字列、オプション: SpotifyPlayOptions): Promise<void>

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

前(トークン: 文字列、デバイス ID?: 文字列): Promise<void>

next(token: string, deviceId?: string): Promise<void>

RemoveTracks(トークン: 文字列, トラック: 文字列 | 文字列[]): Promise<void>

repeat(トークン:文字列、状態:'context' | 'track' | 'off'、deviceId?:string): Promise<void>

saveTracks(トークン: 文字列, トラック: 文字列 | 文字列[]): Promise<void>

Seek(トークン: 文字列、位置: 数値、デバイス ID?: 文字列): Promise<void>

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

setVolume(トークン: 文字列、ボリューム: 数値、デバイス ID?: 文字列): Promise<void>

shuffle(トークン: 文字列、状態: ブール値、deviceId?: 文字列): Promise<void>

スタイリング

stylesプロパティを使用して UI をカスタマイズできます。
透明なプレーヤーが必要な場合は、 bgColor: 'transparent'を使用できます。
ここで利用可能なすべてのオプションを確認してください。

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

問題

バグを見つけた場合は、GitHub の問題トラッカーに問題を提出してください。

ライセンス

マサチューセッツ工科大学