Загрузка react spotify web playback - react spotify web playback Загрузка исходного кода

react spotify web playback

Другой исходный код

0.14.6

Скачать

реакция-Spotify-веб-воспроизведение

Плеер Spotify с SDK Spotify Web Playback.

Посмотреть демо

Проверьте список поддерживаемых браузеров. Эта библиотека попытается использовать устройства пользователя для работы с неподдерживаемыми браузерами.

Настраивать

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 (для обновления других устройств)

Если вы хотите отобразить кнопку «Избранное» (), вам потребуются дополнительные области:

чтение пользовательской библиотеки
пользовательская библиотека-изменить

Для получения дополнительной информации обратитесь к документации веб-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 ▶︎ false
Скройте логотип Spotify.

HideCoverArt boolean ▶︎ false
Скрыть обложку

number начального тома от 0 до 1. ▶︎ 1
Начальная громкость для плеера. Он не используется для внешних устройств.

inlineVolume boolean ▶︎ true
Показывать встроенный объем для «адаптивного» макета для размеров 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 ▶︎ false
Увеличьте ползунок плеера при наведении.

string имени ▶︎ «Веб-плеер Spotify»
Имя игрока.

number смещения
Позиция списка/треков, которую нужно запустить плееру.

persistDeviceSelection boolean ▶︎ false
Сохраните выбор устройства.

играть boolean
Контролируйте статус игрока.

preloadData boolean
Предварительно загрузите данные трека перед воспроизведением.

showSaveIcon boolean ▶︎ false
Отображение кнопки «Избранное». В вашем токене требуются дополнительные области действия.

object стилей
Настройте внешний вид игрока. Проверьте StylesOptions в типах.

syncExternalDevice boolean ▶︎ false
Используйте контекст внешнего проигрывателя, если нет URI и воспроизводится внешнее устройство.

number syncExternalDeviceInterval ▶︎ 5
Время в секундах, в течение которого плеер будет синхронизироваться с внешними устройствами.

string токена ОБЯЗАТЕЛЬНО
Токен Spotify. Дополнительная информация приведена ниже.

updateSavedStatus (fn: (status: boolean) => any) => any
Предоставить вам функцию синхронизации статуса сохраненного трека в плеере.
Это работает в дополнение к свойству showSaveIcon и необходимо только в том случае, если вы сохраняете сохраненный статус отслеживания в своем приложении.

строка уриса string | string[] ОБЯЗАТЕЛЬНО
Список URI Spotify.

API Spotify

Для вашего удобства функции, взаимодействующие с API Spotify, экспортированы.
Используйте их на свой страх и риск.

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

checkTracksStatus(токен: строка, треки: строка | строка[]): Promise<boolean[]>

getAlbumTracks (токен: строка, идентификатор: строка): Promise<SpotifyApi.AlbumTracksResponse>

getArtistTopTracks (токен: строка, идентификатор: строка): Promise<SpotifyApi.ArtistsTopTracksResponse>

getDevices (токен: строка): Promise<SpotifyApi.UserDevicesResponse>

getPlaybackState (токен: строка): Promise<SpotifyApi.CurrentlyPlayingObject | ноль>

getPlaylistTracks (токен: строка, идентификатор: строка): Promise<SpotifyApi.PlaylistTrackResponse>

getQueue (токен: строка): Promise<SpotifyApi.UsersQueueResponse>

getShow (токен: строка, идентификатор: строка): Promise<SpotifyApi.ShowObjectFull>

getShowEpisodes (токен: строка, идентификатор: строка, смещение = 0): Promise<SpotifyApi.ShowEpisodesResponse>

getTrack(токен: строка, идентификатор: строка): Promise<SpotifyApi.TrackObjectFull>

пауза (токен: строка, идентификатор устройства?: строка): Promise<void>

play(токен: строка, параметры: SpotifyPlayOptions): Promise<void>

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

предыдущий (токен: строка, идентификатор устройства?: строка): Promise<void>

следующий (токен: строка, идентификатор устройства?: строка): Promise<void>

RemoveTracks(токен: строка, треки: строка | строка[]): Promise<void>

повтор (токен: строка, состояние: 'контекст' | 'трек' | 'выкл', идентификатор устройства?: строка): Promise<void>

saveTracks(токен: строка, треки: строка | строка[]): Promise<void>

искать (токен: строка, позиция: число, идентификатор устройства?: строка): Promise<void>

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

setVolume(токен: строка, том: число, идентификатор устройства?: строка): Promise<void>

shuffle (токен: строка, состояние: логическое значение, идентификатор устройства?: строка): Promise<void>

Стиль

Вы можете настроить пользовательский интерфейс с помощью styles .
Если вам нужен прозрачный проигрыватель, вы можете использовать bgColor: 'transparent' .
Проверьте все доступные варианты здесь.

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