spotify_sdk
Description
This is a flutter package that wraps the native iOS and Android Spotify "remote" SDKs as well as the Spotify Web Playback SDK for web. Since it wraps the native SDKs it has the same features and limitations.
Setup
Android
This package is using both the spotify-app-remote sdk and spotify-auth library. The auth library is needed to get the access token to work with the web api.
From the Spotify Android SDK Quick Start. You need two things:
- Register your app in the spotify developer portal. You also need to create a sha-1 fingerprint and add this and your package name to the app settings on the dashboard as well as a redirect url.
- Follow the steps below for either Option A: Auto setup or Option B: Manual setup.
Option A: Auto setup
Use the provided setup script to automatically download the latest version of the spotify-app-remote sdk from GitHub and setup the gradle files inside your android project. Run the following command in the root folder of your flutter project.
dart run spotify_sdk:android_setupUse the --help flag to see all available options.
Option B: Manual setup, instructions for Android Studio 4.2+
Download the current Spotify Android SDK. Here you need the `spotify-app-remote-*.aar``.
After you are all setup you need to add the SDKs `*.aar`` file to your Android Project as Module. See the Spotify Android SDK Quick Start for detailed information.
Since Android Studio 4.2 you need to manually perform these steps in order to add .jar/.aar files:
-
Open the android folder of your flutter project as an Android Studio project
-
In the android root folder create a single folder for
spotify-app-remote, place the corresponding aar file and create an empty build.gradle file, like on the screenshot below:
-
Content of the
spotify-app-remote/build.gradlefile:
configurations.maybeCreate("default")
artifacts.add("default", file('spotify-app-remote-release-x.x.x.aar'))- In the android root folder find
settings.gradlefile, open it and add the following line at the top of the file:
include ':spotify-app-remote'- In the app/build.gradle add the following to the default config
defaultConfig {
manifestPlaceholders = [redirectSchemeName: "spotify-sdk", redirectHostName: "auth"]
...
}iOS
Register your app in the spotify developer portal. You also need to register your Bundle ID as well as a Redirect URI.
Follow the instructions in the section Setup the iOS SDK of Spotify iOS SDK Quick Start.
Web
-
Register your app in the spotify developer portal. You need to provide a redirect URL which points to a dedicated page on a website you own.
-
Paste the following onto the webpage, which you linked to in your redirect URL.
<!DOCTYPE html> <html> <head> <title>Authenticating Spotify</title> </head> <body> <p>Please wait while we authenticate Spotify...</p> <script type="text/javascript"> if(window.opener) { window.opener.postMessage('?' + window.location.href.split('?')[1], "*"); } else { window.close(); } </script> </body> </html> -
Optionally add this to your Flutter app web/index.html to avoid a Javascript
TypeError: r.__extends is not a functionerror in development mode.
<script src="https://sdk.scdn.co/spotify-player.js"></script>
<script>
window.onSpotifyWebPlaybackSDKReady = (evt) => {};
</script>You need Spotify Premium to access the Web SDK.
Usage
To start using this package first import it in your Dart file.
import 'package:spotify_sdk/spotify_sdk.dart';To connect to the Spotify app you can call connectToSpotifyRemote(...) or getAccessToken(...). In both of these methods you need the client id, which you will find in the Spotify developer dashboard and the redirect url you set there for that specific client.
await SpotifySdk.connectToSpotifyRemote(clientId: "", redirectUrl: "")Subscribe to PlayerState or PlayerContext streams only after connecting successfully
SpotifySdk.subscribePlayerState();
SpotifySdk.subscribePlayerContext();If you want to use the web api as well you have to use this method to get the access token. You can specify multiple scopes by separating them with a comma "," as shown below. For more information on scopes you can refer to Spotify Authorization Scopes Guide
final accessToken = await SpotifySdk.getAccessToken(clientId: "", redirectUrl: "", scope: "app-remote-control,user-modify-playback-state,playlist-read-private");On Web you can use the token that you get from getAccessToken(...) and then pass it to connectToSpotifyRemote(...). This will avoid having to send user through two Spotify OAuth prompts. You should not persist this token, nor supply a different token, because the refresh token is only set interally by getAccessToken or connectToSpotifyRemote.
On iOS you can store the token that you get from getAccessToken(...) and then pass it to connectToSpotifyRemote(...) during the next session. This will avoid having to switch to the Spotify app for establishing the connection. This library does not handle storing the token. It is up to you to persist it wherever you see fit. Keep in mind that this feature is currently quite buggy in the native iOS SDK and has many side effects like random disconnections. Proceed with caution.
On iOS Spotify starts playing music when attempting connection. This is a default behavior and there is no official way to prevent this with the currently supported authentication flows. You have the option to pass a Spotify URI upon connection or set it to a blank string to play the last played song. There is an undocumented workaround if you don't want music to start playing which is to pass an invalid Spotify URI instead. This is not officially supported by the Spotify SDK or this library and it can fail or stop working at any time!
Have a look in the example for detailed insights on how you can use this package.
Token Swap
You can optionally specify "token swap" URLs to manage tokens with a backend service that protects your OAuth client secret. For more information refer to the Spotify Token Swap and Refresh Guide
SpotifySdkPlugin.tokenSwapURL = 'https://example.com/api/spotify/token';
SpotifySdkPlugin.tokenRefreshURL = 'https://example.com/api/spotify/refresh';On web, this package will perform an Authorization Code (without PKCE) flow, then exchange the code and refresh the token with a backend service you run at the URLs provided.
Token Swap is for now "web only". While the iOS SDK also supports the "token swap", this flow is not yet supported.
Api
Connecting/Authenticating
| Function | Description | Android | iOS | Web |
|---|---|---|---|---|
| connectToSpotifyRemote | Connects the App to Spotify | ✔ | ✔ | ✔ |
| getAccessToken | Gets the Access Token that you can use to work with the Web Api | ✔ | ✔ | ✔ |
| disconnect | Disconnects the app connection | ✔ | ✔ | ✔ |
| subscribeConnectionStatus | Subscribes to the current player state. | ✔ | ✔ | 🚧 |
Player Api
The playerApi as described here.
| Function | Description | Android | iOS | Web |
|---|---|---|---|---|
| getCrossfadeState | Gets the current crossfade state | ✔ | ✔ | ❌ |
| getPlayerState | Gets the current player state | ✔ | ✔ | ✔ |
| pause | Pauses the current track | ✔ | ✔ | ✔ |
| play | Plays the given spotifyUri | ✔ | ✔ | ✔ |
| playWithStreamType | Play the given Spotify uri with specific behaviour for that streamtype | 🚧 | 🚧 | 🚧 |
| queue | Queues given spotifyUri | ✔ | ✔ | ✔ |
| resume | Resumes the current track | ✔ | ✔ | ✔ |
| seekTo | Seeks the current track to the given position in milliseconds | ✔ | ✔ | 🚧 |
| seekToRelativePosition | Adds to the current position of the track the given milliseconds | ✔ | ❌ | 🚧 |
| setPodcastPlaybackSpeed | Set playback speed for Podcast | ✔ | 🚧 | 🚧 |
| setRepeatMode | Set the repeat mode | ✔ | ✔ | ✔ |
| setShuffle | Set the shuffle mode | ✔ | ✔ | ✔ |
| skipNext | Skips to next track | ✔ | ✔ | ✔ |
| skipPrevious | Skips to previous track | ✔ | ✔ | ✔ |
| skipToIndex | Skips to track at specified index in album or playlist | ✔ | ✔ | 🚧 |
| subscribePlayerContext | Subscribes to the current player context | ✔ | ✔ | ✔ |
| subscribePlayerState | Subscribes to the current player state | ✔ | ✔ | ✔ |
| toggleRepeat | Cycles through the repeat modes | ✔ | ✔ | ❌ |
| toggleShuffle | Cycles through the shuffle modes | ✔ | ❌ | ❌ |
On Web, an automatic call to play may not work due to media activation policies which send an error: "Authentication Error: Browser prevented autoplay due to lack of interaction". This error is ignored by the SDK so you can still present a button for the user to click to play or resume to start playback. See the Web SDK Troubleshooting guide for more details.
Images Api
The imagesApi as described here.
| Function | Description | Android | iOS | Web |
|---|---|---|---|---|
| getImage | Get the image from the given spotifyUri | ✔ | ✔ | 🚧 |
User Api
The userApi as described here.
| Function | Description | Android | iOS | Web |
|---|---|---|---|---|
| addToLibrary | Adds the given spotifyUri to the users library | ✔ | ✔ | 🚧 |
| getCapabilities | Gets the current users capabilities | ✔ | ✔ | 🚧 |
| getLibraryState | Gets the current library state | ✔ | ✔ | 🚧 |
| removeFromLibrary | Removes the given spotifyUri to the users library | ✔ | ✔ | 🚧 |
| subscribeCapabilities | Subscribes to the current users capabilities | ✔ | 🚧 | 🚧 |
| subscribeUserStatus | Subscribes to the current users status | ✔ | 🚧 | 🚧 |
Connect Api
The connectApi as described here.
| Function | Description | Android | iOS | Web |
|---|---|---|---|---|
| connectDecreaseVolume | Decrease volume by a step size determined | 🚧 | 🚧 | 🚧 |
| connectIncreaseVolume | Increase volume by a step size determined | 🚧 | 🚧 | 🚧 |
| connectSetVolume | Set a volume on the currently active device | 🚧 | 🚧 | 🚧 |
| connectSwitchToLocalDevice | Switch to play music on this (local) device | ✔ | 🚧 | 🚧 |
| subscribeToVolumeState | Subscribe to volume state | 🚧 | 🚧 | 🚧 |
Content Api
The contentApi as described here.
| Function | Description | Android | iOS | Web |
|---|---|---|---|---|
| getChildrenOfItem | tbd | 🚧 | 🚧 | 🚧 |
| getRecommendedContentItems | tbd | 🚧 | 🚧 | 🚧 |
| playContentItem | tbd | 🚧 | 🚧 | 🚧 |
Migration
spotify-auth: moving from locally sourced aar to maven central
spotify-auth SDK is now retrieved via Maven Central instead of being sourced from an AAR file
- Steps to remove the locally sourced
spotify-authSDK:- android/settings.gradle -> remove
':spotify-auth' - android/spotify-auth/build.gradle -> remove file
- android/spotify-auth/spotify-auth-release-x.x.x.aar -> remove file
- android/settings.gradle -> remove