react spotify web playback

رد فعل سبوتيفي تشغيل الويب

مشغل 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 المميز بالنطاقات التالية:

• جاري
• قراءة المستخدم للبريد الإلكتروني
• قراءة المستخدم خاصة
• حالة قراءة وتشغيل المستخدم (لقراءة حالة الأجهزة الأخرى)
• حالة تعديل المستخدم (لتحديث الأجهزة الأخرى)

إذا كنت تريد إظهار زر المفضلة ()، فستحتاج إلى النطاقات الإضافية:

• قراءة مكتبة المستخدم
• تعديل مكتبة المستخدم

يرجى الرجوع إلى مستندات 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 ◀︎ خطأ
إخفاء شعار سبوتيفي.

إخفاءCoverArt boolean ◀︎ خطأ
إخفاء فن الغلاف

number المجلد الأولي بين 0 و 1. ◀︎ 1
الحجم الأولي للاعب. ولا يستخدم للأجهزة الخارجية.

inlineVolume boolean ◀︎ صحيح
إظهار مستوى الصوت المضمن للتخطيط "المستجيب" لـ 768 بكسل وما فوق.

تخطيط '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 الإزاحة
موضع القائمة/المسارات التي تريد تشغيل المشغل بها.

PeristerDeviceSelection boolean ◀︎ خطأ
احفظ اختيار الجهاز.

لعب boolean
التحكم في حالة اللاعب.

التحميل المسبق boolean
قم بتحميل بيانات المسار مسبقًا قبل التشغيل.

showSaveIcon boolean ◀︎ خطأ
عرض زر المفضلة. يحتاج إلى نطاقات إضافية في الرمز المميز الخاص بك.

object الأنماط
تخصيص مظهر اللاعب. تحقق من StylesOptions في الأنواع.

syncExternalDevice boolean ◀︎ خطأ
استخدم سياق المشغل الخارجي في حالة عدم وجود معرفات URI وكان هناك جهاز خارجي قيد التشغيل.

syncExternalDevice number الفاصل الزمني ◀︎ 5
الوقت بالثواني الذي سيقوم فيه المشغل بالمزامنة مع الأجهزة الخارجية.

string الرمز المميز مطلوبة
رمز سبوتيفي. مزيد من المعلومات أدناه.

updateSavedStatus (fn: (status: boolean) => any) => any
توفر لك وظيفة لمزامنة حالة المسار المحفوظة في المشغل.
يعمل هذا بالإضافة إلى خاصية showSaveIcon ، وهي ضرورية فقط إذا كنت تحافظ على حالة المسار المحفوظة في تطبيقك.

سلسلة أوريس string | string[] مطلوبة
قائمة عناوين URI الخاصة بـ Spotify.

سبوتيفي API

يتم تصدير الوظائف التي تتفاعل مع Spotify API لراحتك.
استخدامها على مسؤوليتك الخاصة.

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

checkTracksStatus(الرمز المميز: سلسلة، المسارات: سلسلة | سلسلة[]): وعد<boolean[]>

getAlbumTracks (الرمز المميز: سلسلة، المعرف: سلسلة): وعد<SpotifyApi.AlbumTracksResponse>

getArtistTopTracks(الرمز المميز: سلسلة، المعرف: سلسلة): وعد<SpotifyApi.ArtistsTopTracksResponse>

getDevices(الرمز المميز: سلسلة): وعد<SpotifyApi.UserDevicesResponse>

getPlaybackState(الرمز المميز: سلسلة): وعد<SpotifyApi.CurrentlyPlayingObject | فارغة>

getPlaylistTracks(الرمز المميز: سلسلة، المعرف: سلسلة): وعد<SpotifyApi.PlaylistTrackResponse>

getQueue(الرمز المميز: سلسلة): وعد<SpotifyApi.UsersQueueResponse>

getShow(الرمز المميز: سلسلة، المعرف: سلسلة): وعد<SpotifyApi.ShowObjectFull>

getShowEpisodes(الرمز المميز: سلسلة، المعرف: سلسلة، إزاحة = 0): وعد<SpotifyApi.ShowEpisodesResponse>

getTrack(الرمز المميز: سلسلة، المعرف: سلسلة): وعد<SpotifyApi.TrackObjectFull>

وقفة (رمز مميز: سلسلة، معرف الجهاز؟: سلسلة): وعد <باطل>

تشغيل (رمز مميز: سلسلة، خيارات: SpotifyPlayOptions): وعد<void>

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

السابق (الرمز المميز: سلسلة، معرف الجهاز؟: سلسلة): وعد <باطل>

next(الرمز المميز: سلسلة، معرف الجهاز؟: سلسلة): وعد<void>

RemoveTracks(الرمز المميز: سلسلة، المسارات: سلسلة | سلسلة []): وعد<void>

تكرار (الرمز المميز: سلسلة، الحالة: 'سياق' | 'مسار' | 'إيقاف'، معرف الجهاز؟: سلسلة): وعد<void>

saveTracks(الرمز المميز: سلسلة، المسارات: سلسلة | سلسلة []): وعد<void>

تسعى (الرمز المميز: سلسلة، الموضع: رقم، معرف الجهاز؟: سلسلة): وعد <باطل>

setDevice(الرمز المميز: سلسلة، معرف الجهاز: سلسلة، يجب أن تلعب؟: منطقي): وعد<void>

setVolume(الرمز المميز: سلسلة، وحدة التخزين: رقم، معرف الجهاز؟: سلسلة): وعد<void>

خلط ورق اللعب (الرمز المميز: سلسلة، الحالة: منطقي، معرف الجهاز؟: سلسلة): وعد<باطل>

التصميم

يمكنك تخصيص واجهة المستخدم باستخدام خاصية styles .
إذا كنت تريد مشغلًا شفافًا، فيمكنك استخدام bgColor: 'transparent' .
تحقق من جميع الخيارات المتاحة هنا.

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

مشاكل

إذا وجدت خطأ ما، فيرجى الإبلاغ عن مشكلة في أداة تعقب المشكلات الخاصة بنا على GitHub.

رخصة

معهد ماساتشوستس للتكنولوجيا