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 ที่มีขอบเขตต่อไปนี้:

• สตรีมมิ่ง
• ผู้ใช้อ่านอีเมล
• ผู้ใช้อ่านส่วนตัว
• ผู้ใช้อ่านสถานะการเล่น (เพื่ออ่านสถานะของอุปกรณ์อื่น)
• ผู้ใช้แก้ไขสถานะการเล่น (เพื่ออัปเดตอุปกรณ์อื่น ๆ )

หากคุณต้องการแสดงปุ่มรายการโปรด () คุณจะต้องมีขอบเขตเพิ่มเติม:

• ผู้ใช้ห้องสมุดอ่าน
• ผู้ใช้-ไลบรารี-แก้ไข

โปรดดูเอกสาร Web API ของ Spotify สำหรับข้อมูลเพิ่มเติม

ไลบรารีนี้ไม่รองรับการสร้างและการหมดอายุของโทเค็น คุณจะต้องจัดการเรื่องนั้นด้วยตัวเอง

อุปกรณ์ประกอบฉาก

โทรกลับ (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

บูลีน ซ่อนการระบุ boolean ▶︎ เท็จ
ซ่อนโลโก้ Spotify

HideCoverArt boolean ▶︎ เท็จ
ซ่อนภาพหน้าปก

number ระดับเสียงเริ่มต้น ระหว่าง 0 ถึง 1 ▶︎ 1
ระดับเสียงเริ่มต้นสำหรับเครื่องเล่น ไม่ได้ใช้สำหรับอุปกรณ์ภายนอก

inlineVolume boolean ▶︎ จริง
แสดงระดับเสียงแบบอินไลน์สำหรับรูปแบบ "ตอบสนอง" สำหรับ 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 ชื่อ ▶︎ 'Spotify Web Player'
ชื่อของผู้เล่น

number ชดเชย
ตำแหน่งของรายการ/แทร็กที่คุณต้องการเริ่มเล่น

ยืนยันอุปกรณ์การเลือก boolean ▶︎ เท็จ
บันทึกการเลือกอุปกรณ์

เล่น boolean
ควบคุมสถานะของผู้เล่น

โหลด boolean ล่วงหน้า
โหลดข้อมูลแทร็กล่วงหน้าก่อนเล่น

showSaveIcon boolean ▶︎ เท็จ
แสดงปุ่มรายการโปรด จำเป็นต้องมีขอบเขตเพิ่มเติมในโทเค็นของคุณ

object สไตล์
ปรับแต่งรูปลักษณ์ของผู้เล่น ตรวจสอบ StylesOptions ในประเภท

syncExternalDevice boolean ▶︎ เท็จ
ใช้บริบทของโปรแกรมเล่นภายนอกหากไม่มี URI และอุปกรณ์ภายนอกกำลังเล่นอยู่

number syncExternalDeviceInterval ▶︎ 5
เวลาเป็นวินาทีที่เครื่องเล่นจะซิงค์กับอุปกรณ์ภายนอก

จำเป็นต้องมี string โทเค็น
โทเค็น Spotify ข้อมูลเพิ่มเติมอยู่ด้านล่าง

updateSavedStatus (fn: (status: boolean) => any) => any
มีฟังก์ชันในการซิงค์สถานะแทร็กที่บันทึกไว้ในเครื่องเล่น
ซึ่งใช้งานได้เพิ่มเติมจากเสา showSaveIcon และจำเป็นเฉพาะเมื่อคุณติดตามสถานะที่บันทึกไว้ในแอปของคุณเท่านั้น

สตริง uris string | string[] จำเป็น
รายการ Spotify URI

Spotify API

ฟังก์ชันที่โต้ตอบกับ Spotify API จะถูกส่งออกเพื่อความสะดวกของคุณ
ใช้พวกเขาด้วยความเสี่ยงของคุณเอง

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

checkTracksStatus(โทเค็น: สตริง, แทร็ก: สตริง | สตริง[]): สัญญา <boolean[]>

getAlbumTracks(โทเค็น: สตริง, id: สตริง): Promise<SpotifyApi.AlbumTracksResponse>

getArtistTopTracks(โทเค็น: สตริง, id: สตริง): Promise<SpotifyApi.ArtistsTopTracksResponse>

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

getPlaybackState (โทเค็น: สตริง): สัญญา <SpotifyApi.CurrentlyPlayingObject | โมฆะ>

getPlaylistTracks(โทเค็น: สตริง, id: สตริง): สัญญา<SpotifyApi.PlaylistTrackResponse>

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

getShow(โทเค็น: สตริง, id: สตริง): สัญญา <SpotifyApi.ShowObjectFull>

getShowEpisodes(โทเค็น: สตริง, id: สตริง, ออฟเซ็ต = 0): สัญญา <SpotifyApi.ShowEpisodesResponse>

getTrack(โทเค็น: สตริง, id: สตริง): สัญญา<SpotifyApi.TrackObjectFull>

หยุดชั่วคราว (โทเค็น: สตริง, deviceId?: สตริง): สัญญา <โมฆะ>

เล่น (โทเค็น: สตริง ตัวเลือก: SpotifyPlayOptions): สัญญา <โมฆะ>

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

ก่อนหน้า (โทเค็น: สตริง, deviceId?: สตริง): สัญญา <โมฆะ>

ถัดไป (โทเค็น: สตริง, deviceId?: สตริง): สัญญา <void>

RemoveTracks(โทเค็น: สตริง, แทร็ก: สตริง | สตริง[]): สัญญา <void>

ทำซ้ำ (โทเค็น: สตริง สถานะ: 'บริบท' | 'ติดตาม' | 'ปิด', deviceId?: สตริง): สัญญา <เป็นโมฆะ>

saveTracks (โทเค็น: สตริง, แทร็ก: สตริง | สตริง []): สัญญา <void>

ค้นหา (โทเค็น: สตริง ตำแหน่ง: หมายเลข deviceId?: สตริง): สัญญา <โมฆะ>

setDevice (โทเค็น: สตริง, deviceId: สตริง, ควรเล่น?: บูลีน): สัญญา <void>

setVolume (โทเค็น: สตริง ปริมาตร: หมายเลข deviceId?: สตริง): สัญญา <โมฆะ>

สับเปลี่ยน (โทเค็น: สตริง สถานะ: บูลีน deviceId?: สตริง): สัญญา <โมฆะ>

จัดแต่งทรงผม

คุณสามารถปรับแต่ง UI ได้ด้วยเสา styles
หากคุณต้องการเครื่องเล่นที่โปร่งใส คุณสามารถใช้ bgColor: 'transparent' ได้
ตรวจสอบตัวเลือกทั้งหมดที่มีที่นี่

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

ปัญหา

หากคุณพบข้อบกพร่อง โปรดแจ้งปัญหาในตัวติดตามปัญหาของเราบน GitHub

ใบอนุญาต

เอ็มไอที