Spotify Community

XHyperDEVX · 2023-08-09

Plan

Premium

Country

DE

Device

Windows 11/MS Edge

Operating System

Windows 11

My Question or Issue

I have an HTML page that is supposed to show me the currently playing song on my Spotify account. I have gotten as far as getting an access token and working with it. Unfortunately, I get these two errors in the browser console when retrieving the name of the current song:

- Invalid token scopes.
- This functionality is restricted to premium users only

The token is correct, I am sure. And it is associated with a premium account. Where could be the error?

I am very grateful for tips and help 🙂

Ximzend · 2023-08-09

Which flow are you using?

XimzendRising Star

Help others find this answer and click "Accept as Solution".

If you appreciate my answer, maybe give me a Like.

Note: I'm not a Spotify employee.

XHyperDEVX · 2023-08-09

This is my code:

Spoiler

<!DOCTYPE html>
<html>
<head>
<title>Song played</title>
<script src="https://sdk.scdn.co/spotify-player.js"></script>
</head>
<body>
<h1>Song:</h1>
<div id="current-song"></div>
<button onclick="authorize()">Connect Spotify</button>

function authorize() {
const clientId = "my-client-id";
const redirectUri = encodeURIComponent("https://my-url-in-my-app");
const scope = "user-read-currently-playing";

const authUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${sco...`;

window.location.href = authUrl;
}

window.onSpotifyWebPlaybackSDKReady = () => {
const token = window.location.hash.substr(1).split('&')[0].split('=')[1];
accessToken = token;
console.log(accessToken);

const player = new Spotify.Player({
name: 'Web Playback SDK',
getOAuthToken: cb => { cb(token); }
});

// Error handling
player.addListener('initialization_error', ({ message }) => { console.error(message); });
player.addListener('authentication_error', ({ message }) => { console.error(message); });
player.addListener('account_error', ({ message }) => { console.error(message); });
player.addListener('playback_error', ({ message }) => { console.error(message); });

// Playback status updates
player.addListener('player_state_changed', state => {
const { current_track } = state.track_window;
const { name, artists } = current_track;
const artistNames = artists.map(artist => artist.name).join(', ');
document.getElementById('current-song').innerHTML = `Song: ${name} - ${artistNames}`;
});

// Connect to the player!
player.connect();
};
</script>
</body>
</html>

<!DOCTYPE html><html><head><title>Song played</title><script src="https://sdk.scdn.co/spotify-player.js"></script></head><body><h1>Song:</h1><div id="current-song"></div><button onclick="authorize()">Connect Spotify</button><script>let accessToken = null;function authorize() {const clientId = "my-client-id";const redirectUri = encodeURIComponent("https://my-url-in-my-app");const scope = "user-read-currently-playing";const authUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=token&show_dialog=true`;window.location.href = authUrl;}window.onSpotifyWebPlaybackSDKReady = () => {const token = window.location.hash.substr(1).split('&')[0].split('=')[1];accessToken = token;console.log(accessToken);const player = new Spotify.Player({name: 'Web Playback SDK',getOAuthToken: cb => { cb(token); }});// Error handlingplayer.addListener('initialization_error', ({ message }) => { console.error(message); });player.addListener('authentication_error', ({ message }) => { console.error(message); });player.addListener('account_error', ({ message }) => { console.error(message); });player.addListener('playback_error', ({ message }) => { console.error(message); });// Playback status updatesplayer.addListener('player_state_changed', state => {const { current_track } = state.track_window;const { name, artists } = current_track;const artistNames = artists.map(artist => artist.name).join(', ');document.getElementById('current-song').innerHTML = `Song: ${name} - ${artistNames}`;});// Connect to the player!player.connect();};</script></body></html>

Ximzend · 2023-08-09

I think that code is not going to work, because making it requires more complex code.

Here is a GitHub repo you can use: https://github.com/tthn0/Spotify-Readme

XimzendRising Star

Help others find this answer and click "Accept as Solution".

If you appreciate my answer, maybe give me a Like.

Note: I'm not a Spotify employee.

XHyperDEVX · 2023-08-09

So it is not possible to show in a html page the currently played song? Only with the HTML page.

Ximzend · 2023-08-09

No, because a access token expires in 60 minutes, and refreshing that needs to be done server side.

XimzendRising Star

Help others find this answer and click "Accept as Solution".

If you appreciate my answer, maybe give me a Like.

Note: I'm not a Spotify employee.

XHyperDEVX · 2023-08-10

But I can retrieve the current accesstoken every time I visit the page, can't I?

Ximzend · 2023-08-10

The missing scope is user-read-playback-state.

I thought you also wanted to show others what you are listening to. Sorry for the misunderstanding.

XimzendRising Star

Help others find this answer and click "Accept as Solution".

If you appreciate my answer, maybe give me a Like.

Note: I'm not a Spotify employee.

XHyperDEVX · 2023-08-11

Unfortunately, I still get the error message "Invalid token scopes." in my browser console. Apparently it is only because the scope is wrong. Or not? What could be the correct one?

Spotify Community

Help categories

Account & Payment

Using Spotify

Listen Everywhere

Token problem

Token problem

Suggested posts

Let's introduce ourselves!

Help Wizard

Step 1

Just quickly...

FAQs

Ongoing Issues

Help categories

Account & Payment

Using Spotify

Listen Everywhere

Token problem

Token problem

Suggested posts

Let's introduce ourselves!