Struggling with asynchronous code and promises

Question

I am creating a web player by using the spotify SDK. While doing so, everytime I click any play button in the player I want to execute the sdk function: player.getCurrentState() to fetch the new album art, trackname and artistname of the currently playing track. Upon receiving result I want the current element in the HTML structure to change accordingly. However, if pressed at first the song is played normally but the error message is shown, but when pressed a second time the elements are changed accordingly. After that, when I keep switching between different tracks, the changes always lag one click behind. I expect it to be due to asynchronous code but I can't get the hang of this asynchronousness in javascript.

document.getElementById("playbtn").addEventListener("click", function () {
           const play = ({spotify_uri, playerInstance: {_options: {getOAuthToken, id}}}) => {
                getOAuthToken(access_token => {
                    fetch(`https://api.spotify.com/v1/me/player/play?device_id=${id}`, {
                        method: 'PUT',
                        body: JSON.stringify({uris: [spotify_uri]}),
                        headers: {
                            'Content-Type': 'application/json', 'Authorization': `Bearer ${access_token}`
                        },
                    });
                });
            };
            play({
                playerInstance: player,
                spotify_uri: 'spotify:track:14iN3o8ptQ8cFVZTEmyQRV',
            });
            update();
}, false);


function update(){
        player.getCurrentState().then(state => {
            if (!state) {
                console.error('User is not playing music through the Web Playback SDK');
                return;
            }
            document.getElementById("album").src = state.track_window.current_track.album['images'][2]["url"];
            document.getElementById("trackname").innerHTML = state.track_window.current_track['name'];
            document.getElementById("artistname").innerHTML = state.track_window.current_track['artists'][0]['name'];
        });
}

I also tried the functions async and await but this gives the same result. Help is appreciated!

Spotify documentation: https://developer.spotify.com/documentation/web-playback-sdk/reference/#api-spotify-player-getcurrentstate

Im also thinking the same kind of asynchronous problems are appearing in a previous question I asked: Doesn't add records into PouchDB when used same function over again

Answer 1

Your problem for one click behind is because the new song was not loaded, nor the player updated. In the demo below i added player.addListener('player_state_changed', update); in the main function so the event will trigger your update method.

 var player = null; function update(changedStateEvent) { console.log(changedStateEvent); player.getCurrentState().then(state => { if (!state) { console.error('User is not playing music through the Web Playback SDK'); return; } document.getElementById("album").src = state.track_window.current_track.album['images'][2]["url"]; document.getElementById("trackname").innerHTML = state.track_window.current_track['name']; document.getElementById("artistname").innerHTML = state.track_window.current_track['artists'][0]['name']; }); } const play = ({ spotify_uri, playerInstance: { _options: { getOAuthToken, id } } }) => { getOAuthToken(access_token => { fetch(`https://api.spotify.com/v1/me/player/play?device_id=${id}`, { method: 'PUT', body: JSON.stringify({ uris: [spotify_uri] }), headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${access_token}` }, }); }); }; window.onSpotifyWebPlaybackSDKReady = () => { // You can now initialize Spotify.Player and use the SDK player = new Spotify.Player({ name: 'Carly Rae Jepsen Player', getOAuthToken: callback => { // Run code to get a fresh access token callback('access token here'); }, volume: 0.5 }); // use events // https://developer.spotify.com/documentation/web-playback-sdk/reference/#event-player-state-changed player.addListener('player_state_changed', update); } document.getElementById("playbtn").addEventListener("click", function() { play({ playerInstance: player, spotify_uri: 'spotify:track:14iN3o8ptQ8cFVZTEmyQRV', }); }, false);