Type in your question below and we'll check to see what answers we can find...
Loading article...
Submitting...
If you couldn't find any answers in the previous step then we need to post your question in the community and wait for someone to respond. You'll be notified when that happens.
Simply add some detail to your question and refine the title if needed, choose the relevant category, then post.
Before we can post your question we need you to quickly make an account (or sign in if you already have one).
Don't worry - it's quick and painless! Just click below, and once you're logged in we'll bring you right back here and post your question. We'll remember what you've already typed in so you won't have to do it again.
Please see below the most popular frequently asked questions.
Loading article...
Loading faqs...
Please see below the current ongoing issues which are under investigation.
Loading issue...
Loading ongoing issues...
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 ๐
Which flow are you using?
This is my code:
<!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?
Did you ever fix this? I took keep getting "Invalid token scopes" and I'm pretty sure my scopes are correct
no unfortunately not ๐
If you are sure that your scopes are correct in your code but you are still getting invalid scopes, you might need to re-authenticate your user, just refreshing the token is not enough to update the scopes associated with the token.
XHyperDEVX - looking at your code at the very least to use the Web Playback SDK you will need the streaming, user-read-email and user-read-private scopes.
Hey there you, ย Yeah, you!ย 😁 ย Welcome - we're glad you joined the Spotify Community! ย While you here, let's have a fun game and getโฆ