Spotify Web API Playback

NikhilPunwaney · 2021-07-06

I've recently been looking into Spotify playback and how to use Web API SDK. Just wanted to share a workflow I though of to see if anyone had any thoughts or suggestions:

Generating a Web API SDK access token through my app
Any Spotify premium account holder can generate a Web API SDK access token based on https://developer.spotify.com/documentation/web-playback-sdk/quick-start/#.

- Can I generate and access that token for a given user from my app?
- The generic token is valid for an hour. In order to get a token that is valid for longer/has refresh tokens, a user needs to request special permission. Can I do that on behalf of the user?

Creating a broadcast outlet
Using the token, I can create a broadcast outlet on the user’s browser/app such that the music can be heard from the browser/app instead of the user’s Spotify.
- Is an iFrame the best way to do this?

Playing a song on the user's SpotifySelecting the Web Player from the device menu on the user's Spotify
- Is there an API call for this? Does this include fetching all available web players from the user’s Spotify and then choosing the outlet/device we created?

alvaron · 2021-07-09

Generating a Web API SDK access token through my app

According to the Authorization Guide, there are 3 players involved in the authorization process:

- The Spotify auth server.

- Your application (the client) which requests the access token by implementing the authorization flow using your client ID and client Secret after you register the application in the dashboard.

- The end user, who wants to access to a given resource using their Spotify account.

The authorization flow uses scopes to allow your application to access specific resources (playback, playlists, etc..), so the user will be prompted to grant those permissions to your app. Once the user allows your app, the access token is generated. If you want to request a new token, you can use the "refresh token", which is returned on the same JSON response along with the access token. The refresh token can be used later to get a new access token without visiting the grant screen.

Creating a broadcast outlet

If you want to embed the Web Playback SDK within an iframe, you must allow "encrypted-media" and "autoplay" in cases of cross origin iframes. This currently affects Chrome browsers since they introduced Feature Policy which disallows features
within iframes by default.

Playing a song on the user's SpotifySelecting the Web Player from the device menu on the user's Spotify

Once the Web Player SDK is loaded and a new device id is created, you can transfer the playback manually (using the official Spotify app) or via Web API using the Transfer User's Playback API from Playback APIs.

Hope it helps!

NikhilPunwaney · 2021-07-14

Hi Alvaron,

Thanks for the help. This seems to be my updated plan:

Host a static page at AAA.com:

<!DOCTYPE html>
<html>
<head>
	<script src="https://sdk.scdn.co/spotify-player.js"></script>
	<script>
		window.onSpotifyWebPlaybackSDKReady = () => {
			const url = new URL(window.location.href);
			const token = url.searchParams.get('token');
			const player = new Spotify.Player({
				name: 'Spotify Web Player',
				getOAuthToken: cb => { cb(token); }
			});
			player.connect();
		};
	</script>
</head>
<body>
	<h1>Spotify Web Player</h1>
</body>
</html>

Request authorization to get access token BBB:

GET https://accounts.spotify.com/authorize?client_id=CCC&response_type=code&redirect_uri=DDD&scope=streaming%20user-read-email%20user-read-private%20user-modify-playback-state

Navigate to AAA.com?token=BBB from within the app

Get user's available devices including { id: "EEE", "name": "Spotify Web Player" }:

GET https://api.spotify.com/v1/me/player/devices -H "Authorization: CCC"

Transfer user's playback to the device we have open:

PUT https://api.spotify.com/v1/me/player -H "Authorization: CCC" { device_ids = ['EEE'], play: false }

Search/play a song on Spotify

Is there a better way to do this?

Using this method, a video player pops up on the phone and therefore does not allow the user to navigate away. What are other ways to do this?

Thanks,

Nikhil

alvaron · 2021-07-14

The authorization flow looks good to me. You could skip the API call to retrieve the device id, though. The SDK emits the ready event, which provides the device id:

  player.addListener('ready', ({ device_id }) => {
    console.log('Ready with Device ID', device_id);
  });

Once the event is received, you could transfer the playback via Web API.

I don't fully understand what you mean with the "video player" as the SDK provides music playback capabilities only. Could you please provide more info? what would be the expected behaviour?

Thanks!

NikhilPunwaney · 2021-07-14

Thanks for that tip!

When I go to the hosted url from within a react-native app, and select the device from my Spotify player (and play a song), the video player pops up in the react-native app.

I have attached a video for reference.

Also, the song stops playing after 10 seconds. This is not the case if I visit the app from a url on my Desktop browser.

alvaron · 2021-07-16

Hey! Thanks a lot for video. It helped a lot to understand the issue!

I've been talking with the team behind the Web Playback SDK. Turns out the SDK contains an internal empty video tag which makes React Native see it as video content. This might be the reason why a video control pops up.

So, I'm afraid React Native is not supported by the SDK. We will update the documentation accordingly.

It would be interesting to see if the same behaviour happens using Ionic, though.

NikhilPunwaney · 2021-07-16

That explains it - I'm surprised that didn't have a similar effect on my Desktop browser.

What do you recommend I do to play the music in my React app? I'm looking to play the full song without the app being in the forefront (so going to another app on my phone does not stop the song)

alvaron · 2021-07-22

Hey! Sorry for my late response!

If your application is based on React (not React Native), you can embed the Web Playback SDK inside the React app and play the full song from there. Bear in mind that moving the playback to the background does not work on iOS platform (but it does work on Desktop and Android).

We will be releasing a new tutorial soon about how to create a simple web player app using the Web Playback SDK, React and Node. Please stay tuned! 🙂

NikhilPunwaney · 2021-07-22

No worries!

Do you have an idea on where mobile functionality is on the roadmap?

Will you also be posting a tutorial on how to create a mobile player app in the near future?

Thanks,

Nikhil

alvaron · 2021-07-28

For mobile platforms you might want to take a look to our Android and iOS SDKs in case they suit your needs.

I don't know if you can talk about it, but what does your app do? what is your use case?

NikhilPunwaney · 2021-07-28

The app solicits feedback on songs. As such, the use case involves the user being able to play music through the app. I don't expect the user to keep the app open for the duration of the song and so the app needs to be able to play the song while in the background as well.

The app requires the user to have a Spotify account.

Is there any documentation on this that you can point me to?

alvaron · 2021-07-29

The Web Playback SDK fits perfectly for this use case, but given the current limitation of the SDK with the background playback on iOS platform, I would suggest to take a look to the iOS SDK. This SDK also provides playback capabilities. You can find documentation on the portal and on the project GitHub repository.

Hope it helps!

NikhilPunwaney · 2021-07-29

Thanks for the quick response.

I currently have my own player, am using the iOS SDK and can only play a 30 second version of the song.

The iOS SDK has not been updated in 18 months and is now deprecated - which led to trying to migrate to the Web API.

I do have my own player in the App. Is there a way I can register my player as a device on Spotify such that I can select it using the transfer endpoint and play the full song in my app?

Help categories

Account & Payment

Using Spotify

Listen Everywhere