spotify-web-playback-sdk-for-react v2.0.3
SpotifyWebSDK
Install
npm install spotify-web-playback-sdk-for-react
Getting Started
import { SpotifyWebSDK } from "spotify-web-playback-sdk-for-react";
<SpotifyWebSDK
name="hahaha"
getOAuthToken={(cb) => cb("token")}
volume=0.5
enableMediaSession=true
>
</SpotifyWebSDK>
name
: name of the Spotify instance.
getOAuthToken
: The callback getOAuthToken expected to provide a valid access_token.
volume
: The volume of the player represented as a decimal value between 0 and 1.
enableMediaSession
: If set to true, the Media Session API will be set with metadata and action handlers. Default value is false.
Given valid token and run the code, you should see a device named name
from the official Spotify app.
Refer to https://developer.spotify.com/documentation/web-playback-sdk/tutorials/getting-started
Hooks
All the hooks should be used in child components of SpotifyWebSDK
useSpotifyPlayer
Return current player instance object which can manipulate the player, can be null.
Refer to https://developer.spotify.com/documentation/web-playback-sdk/reference#spotifyplayer
function Control() {
const player = useSpotifyPlayer();
return (
<button onClick={() => player.togglePlay()}>||</button>
)
}
useSpotifyDevice
Return the device id of current player instance, can be null. Refer to https://developer.spotify.com/documentation/web-playback-sdk/reference#webplaybackplayer-object
function Device() {
const device = useSpotifyDevice();
return (
<div>{`device id: ${device?.device_id`}</div>
)
}
useSpotifyState
Return current state of the player, can be null.
Refer to https://developer.spotify.com/documentation/web-playback-sdk/reference#webplaybackstate-object
function State() {
const state = useSpotifyState();
return (
<div>{state.paused ? "paused" : "playing"}</div>
)
}
The following hooks are actually attributes extracted from the state, just for convinient
useCurrentTrack
Return current playing track, can be null.
Refer to https://developer.spotify.com/documentation/web-playback-sdk/reference#webplaybacktrack-object
function CurrentTrack() {
const currentTrack = useCurrentTrack()
return (
<div>
<p>{currentTrack?.name}</p>
</div>
)
}
6 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago