Uncaught TypeError: Cannot read property 'togglePlay' of null

Uncaught TypeError: Cannot read property 'togglePlay' of null

bennetdev

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?

Reply
0 Replies

Suggested posts