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.
I am using the Spotify Playback SDK on my local site. This is my code:
window.onSpotifyWebPlaybackSDKReady = () => {
const token = "<?php echo $_SESSION["accessToken"] ?>";
const player = new Spotify.Player({
name: 'Spotify Clone',
getOAuthToken: cb => {
cb(token);
}
});
window.player = player;
// Connect to the player!
window.player.connect();
// Error handling
window.player.addListener('initialization_error', ({message}) => {
console.error(message);
});
window.player.addListener('authentication_error', ({message}) => {
console.error(message);
});
window.player.addListener('account_error', ({message}) => {
console.error(message);
});
window.player.addListener('playback_error', ({message}) => {
console.error(message);
});
// Playback status updates
window.player.addListener('player_state_changed', state => {
console.log(state);
});
// Ready
window.player.addListener('ready', ({device_id}) => {
console.log('Ready with Device ID', device_id);
});
// Not Ready
window.player.addListener('not_ready', ({device_id}) => {
console.log('Device ID has gone offline', device_id);
});
}
document.getElementById("play-arrow").onclick = function () {
window.player.togglePlay().then(() => {
console.log('Toggled playback!');
});
}
Everything else is working. For example I can display the current position in the browser. Everything like togglePlay or skip or seek is only working like 10% of the time connecting to the device and I have to reload the page multiple times and connect. This is the error I get:
index.js:9 Uncaught TypeError: Cannot read property 'togglePlay' of null
at h._playbackControl (index.js:9)
at h._onTogglePlay (index.js:9)
at h._handleMessages (index.js:9)
at r._receiveMessage (index.js:9)
window.player is not Null, I checked it in the console.
Any ideas?
I'm having a similar issue, though the error stack is a bit different when I test in Firefox. I posted a few days ago, but no response yet. I'm testing to see if perhaps it's a synchronicity issue? Really stuck on this one, though.
I finally solved this problem via the Spotify Community post here. The gist of it - downgrade React and React-DOM in your package.json to version 17, alter your React-DOM statement per the linked post, and import React-DOM from 'react-dom' instead of 'react-dom/client' and everything should work.
So I'm about 4 years too late, but I also had this problem, and there's a way to fix it without downgrading. You just need parenthesis! Took me about three-ish hours to figure out, but if you replace your player_state_changed with this:
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…