How can I automatically move to next sound after previous track completes using the Soundcloud Javascript SDK for streaming?

Question

I'm new to Javascript and the Soundcloud SDK so if my current solution is way off base please let me know how it can be improved.

I'm building a custom Soundcloud player and not using a prebuilt widget. I'm looking to automatically move to the next track after a track is finished playing. I want to be able to accomplish this without using a Soundcloud playlist. Instead I will be pulling in a JSON list of tracks to play.

I am able to play, pause, stop and skip tracks by clicking links but I am not sure how to tell when a track has completed playing in order to trigger the nextTrack function. Any suggestions?

Soundcloud Javascript SDK Streaming API: http://developers.soundcloud.com/docs/api/sdks#streaming

Here is my code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://connect.soundcloud.com/sdk.js"></script>

<div class="music-player">
    <h4 class="trackTitle">Current track</h4>
    <a href="#" id="play">Play</a>
    <a href="#" id="pause" style="display:none;">Pause</a>
    <a href="#" id="stop">Stop</a>
    <a href="#" id="next">Next</a>
</div>

<script>

    Track = function (trackId){
        var currentTrack = "";

        SC.initialize({
            client_id: "CLIENT_ID"
        });

        SC.stream("http://api.soundcloud.com/tracks/" + trackId, function(sound){
            currentTrack = sound;
        });

        this.play = function() {
            currentTrack.play();
        };

        this.pause = function() {
            currentTrack.pause();
        };

        this.stop = function() {
            currentTrack.stop();
        };
    };

    Rotation = function(tracks) {
        var currentTrack = tracks[0];

        this.currentTrack = function () {
            return currentTrack;
        };

        this.nextTrack = function () {
            var currentIndex = tracks.indexOf(currentTrack);
            var nextTrackIndex = currentIndex + 1;
            var nextTrackId = tracks[nextTrackIndex];
            currentTrack = nextTrackId;
            return currentTrack
        };
    };

    $(document).ready (function(){
        var songs = [{"title":"Sad Trombone","song_url":"https://soundcloud.com/sheckylovejoy/sad-    trombone","soundcloud_id":"18321000"},{"title":"AraabMUZIK - \"Beauty\"","song_url":"    https://soundcloud.com/selftitledmag/araabmuzik-beauty","soundcloud_id":"79408289"}]
        var rotation = new Rotation(songs);
        var currentTrack = rotation.currentTrack();
        var currentPlayingTrack = new Track(currentTrack.soundcloud_id);

        $('#play').on('click', function(event){
            currentPlayingTrack.play();
            $('.trackTitle').html(currentTrack.title);
            $('#pause').show();
            $('#play').hide();
        });

        $('#pause').on('click', function(event){
            currentPlayingTrack.pause();
            $('#pause').hide();
            $('#play').show();
        });

        $('#stop').on('click', function(event){
            currentPlayingTrack.stop();
            $('#pause').hide();
            $('#play').show();
        });

        $('#next').on('click', function(event){
            currentPlayingTrack.stop();
            currentTrack = rotation.nextTrack();
            currentPlayingTrack = new Track(currentTrack.soundcloud_id);
            currentPlayingTrack.play();
            $('.trackTitle').html(currentTrack.title);
        });

    });

</script>

Answer 1

You can implement the onfinish method when creating the track object, now you can replace the console output with a function.

SC.stream("http://api.soundcloud.com/tracks/" + trackId, {onfinish: function(){
    console.log('track finished');
}}, function(sound){
    currentTrack = sound;
});