Problem switching tracks with Soundcloud Player Javascript SDK, ES6 and Promises

[dan168]

I’ve been having trouble using the JS SDK to develop a very simple Soundcloud Player. It’s related to controlling multiple SC player instances & JS Promises (unable to use global vars).

The player shows a list of tracks, each with their own Play button (button icon switches to pause on play).
But switching to a new track is problematic - it works initially, then it won’t stop the first track and gives error “…try calling pause() on user interation…” And you have to click the next item twice for playback.

Help would be greatly appreciated, as I’ve spent so much time on this - it’s killing me!

<!-- Stripped back version of markup -->
<div class="js-track track" data-track-id="342351867">
   <a href="#" class="js-track-trigger"></a>
</div>    
<div class="js-track track" data-track-id="543240951">
   <a href="#" class="js-track-trigger"></a>
</div>    

<script src="https://connect.soundcloud.com/sdk/sdk-3.3.1.js"></script>

<script>
    // JS
    const tracks = document.querySelectorAll('.js-track');
    const triggers = document.querySelectorAll('.js-track-trigger');

    SC.initialize({
        client_id: 'Client ID',
    });

    for(var i = 0; i < tracks.length; i++){
        let track = tracks[i];
        let trigger = triggers[i];

        SC.stream('/tracks/'+track.dataset.trackId).then(function(player){
            trigger.addEventListener("click", function(event) {
                event.preventDefault();
                for(let j = 0; j < triggers.length; j++) {
                    triggers[j].classList.remove('active');
                }

                // Play the track
                if(player.isPlaying()) {
                    player.pause().then(function(){
                        console.log('Playback paused');
                        trigger.classList.remove('active');
                    }).catch(function(e){
                        console.error('Playback rejected. Try calling pause() from a user interaction.', e);
                    });
                } else {
                    // Play the track
                    player.play().then(function(){
                        trigger.classList.add('active');
                        console.log('Playback started');
                    }).catch(function(e){
                        console.error('Playback rejected. Try calling play() from a user interaction.', e);
                    });
                }                
            }, false);
        });
    }
</script>