Soundcloud

by Rmohan06

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://connect.soundcloud.com/sdk/sdk-3.0.0.js"></script>
*Some of these songs have quiet starts. You can start with City and Midwest.
<div id="player"></div>

CSS

.SCbtn {
  padding: 10px;
}
.title{color:#333333;}

.title:hover {
  cursor: pointer;
  color: #ff0000;
}

JavaScript

SC.initialize({
  client_id: '6040fb6bf08c52ea42cac250bb081b3e'
});

//This is building out the track listing an adding track # to id to grab later 
SC.get('/users/82533992/tracks').then(function(tracks) {
  var count = 1;
  for (var i = 0; i <= tracks.length; i++) {
    var streamTrack = tracks[i].id;
    document.getElementById('player').innerHTML += '<span class="track" id="' + streamTrack + '"><div class="SCbtn"></div><div class="title">' + count + ': ' + tracks[i].title + '</div></span>';
    count++
  }
});

var myPlayer;
var isPaused = true;

var player = function(trackNum) {
  SC.stream('/tracks/' + trackNum).then(function(player) {
    myPlayer = player;
  });
}


//on click I am grabbing the id track number to pass to the player function
$(document).on('click', '.track', function() {
  var theTrack = $(this).attr('id');
  player(theTrack);
  if (isPaused) {
    console.log("play");
    myPlayer.play()
    isPaused = false;
  } else {
    console.log("pause");
    myPlayer.pause()
    isPaused = true;
  }
});