react spotify web playback

반응 Spotify 웹 재생

Spotify의 웹 재생 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 토큰이 필요합니다.

• 스트리밍
• 사용자가 읽은 이메일
• 사용자 읽기-비공개
• user-read-playback-state (다른 장치의 상태를 읽기 위해)
• user-modify-playback-state (다른 장치 업데이트용)

즐겨찾기 버튼()을 표시하려면 추가 범위가 필요합니다.

• 사용자 라이브러리 읽기
• 사용자 라이브러리 수정

자세한 내용은 Spotify의 웹 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 웹 재생 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 ▶︎ 거짓
마우스를 올리면 플레이어의 슬라이더를 확대합니다.

이름 string ▶︎ '스포티파이 웹 플레이어'
플레이어의 이름입니다.

오프셋 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 목록입니다.

스포티파이 API

귀하의 편의를 위해 Spotify API와 상호 작용하는 기능을 내보냅니다.
자신의 책임하에 사용하십시오.

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

checkTracksStatus(토큰: 문자열, 트랙: 문자열 | 문자열[]): Promise<boolean[]>

getAlbumTracks(token: string, id: string): Promise<SpotifyApi.AlbumTracksResponse>

getArtistTopTracks(token: 문자열, id: 문자열): Promise<SpotifyApi.ArtistsTopTracksResponse>

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

getPlaybackState(token: string): Promise<SpotifyApi.CurrentlyPlayingObject | 널>

getPlaylistTracks(token: 문자열, id: 문자열): Promise<SpotifyApi.PlaylistTrackResponse>

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

getShow(토큰: 문자열, ID: 문자열): Promise<SpotifyApi.ShowObjectFull>

getShowEpisodes(token: 문자열, id: 문자열, 오프셋 = 0): Promise<SpotifyApi.ShowEpisodesResponse>

getTrack(token: 문자열, id: 문자열): Promise<SpotifyApi.TrackObjectFull>

Pause(token: 문자열, deviceId?: 문자열): Promise<void>

play(토큰: 문자열, 옵션: SpotifyPlayOptions): Promise<void>

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

이전(토큰: 문자열, deviceId?: 문자열): Promise<void>

next(token: 문자열, deviceId?: 문자열): Promise<void>

RemoveTracks(토큰: 문자열, 트랙: 문자열 | 문자열[]): Promise<void>

반복(토큰: 문자열, 상태: '컨텍스트' | '추적' | '오프', deviceId?: 문자열): Promise<void>

saveTracks(토큰: 문자열, 트랙: 문자열 | 문자열[]): Promise<void>

탐색(토큰: 문자열, 위치: 숫자, deviceId?: 문자열): Promise<void>

setDevice(token: 문자열, deviceId: 문자열, shouldPlay?: boolean): Promise<void>

setVolume(토큰: 문자열, 볼륨: 숫자, deviceId?: 문자열): 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의 문제 추적기에 문제를 제출해 주세요.

특허

MIT