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>