JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://connect.soundcloud.com/sdk.js"></script>
<button onclick="player()">Play/Pause</button>
<ul id="demo">
</ul>
JavaScript
SC.initialize({
client_id: "b8f06bbb8e4e9e201f9e6e46001c3acb",
});
var currentTrack = $("ul li").first().attr('id');
var playing;
var is_playing = false,
sound;
$(document).ready(function(){
$("ul").on('click','li',function(){
currentTrack = this.id;
console.log(currentTrack);
if(sound)
sound.pause();
streamTrack(currentTrack);
});
});
function player(){
if( sound ) {
if(is_playing) {
sound.pause();
is_playing = false;
} else {
sound.play();
is_playing = true;
console.log(already_played);
}
} else {
currentTrack = $("ul li").first().attr('id');
console.log(currentTrack);
streamTrack(currentTrack);
}
}
$.getJSON({'https://soundcloud.com/groovebeck/groovebeck-horus-original-mix-contestorion'}", function(data){
var answer = {};
$.each(data.PlayListArray, function(key, val){ //navigate to array called PlayListArray
var songLink = val.URL; // the value of URL in the array
SC.get('/resolve', { url: songLink }, function(track) {
answer[songLink] = track;
if(Object.keys(answer).length == data.PlayListArray.length) {
// we've got all results: let's process them by iterating on data.PlayListArray again
$.each(data.PlayListArray, function(key, val){
var track = answer[val.URL];
var trackTitle = track.title;
$("ul").append("<li id= "+ track.id + ">" + trackTitle + "</li>");
});
}
});
});
});
var is_playing = true;
function streamTrack(myTrack){
SC.stream("/tracks/" + myTrack, function(obj){
//obj.stopAll();
obj.play();
sound = obj;
is_playing = true;
});
}