Help Wizard

Step 1

NEXT STEP

FAQs

Please see below the most popular frequently asked questions.

Loading article...

Loading faqs...

VIEW ALL

Ongoing Issues

Please see below the current ongoing issues which are under investigation.

Loading issue...

Loading ongoing issues...

VIEW ALL

Token problem

Token problem

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 ๐Ÿ™‚

Reply
8 Replies

Which flow are you using?

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>

<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=${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>

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

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

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

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

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.

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?

Suggested posts