scripts.js

var client_id = 'eef823eb72081eccc8684bc619021062';
var SearchSong; //function to search song
var ClearList;  // function to clear previous json_objects
var SteamSong;  // function to stream song
SC.initialize({
  client_id: client_id
});

$(document).ready(function() {

  var json_object = {};
  var json_array  = [];
  var length = 0;
  ClearList = function(){
    json_object = {};
    json_array  = []
    length      = 0;
    $("#songTable tr").remove();
  }
  SearchSong = function(input){
    SC.get('/tracks',{
      q: input
    }).then(function(tracks){
      length = tracks.length;
      for(var i in tracks){
        var items = tracks[i];
        json_array.push({
          "id"             : items.id,
          "title"          : items.title,
          "content_length" : items.original_content_size,
          "stream_url"     : items.stream_url,
          "uri"            : items.uri
        });
      }
      json_object.json_array = json_array;        // json object to store json array
      for(var i=0;i<length;i++){
        var string = json_object['json_array'][i].title.substring(0,25) + '...';
        var html = "<tr>" +
          "<td class='playSong' ><button class='glyphicon glyphicon-play-circle' onclick='SongClick()'></button></td>" +
          "<td>" + string + "<span>&nbsp;<input id='playButton' type='hidden' value="+ i +"></span></td>" +
          "<td><button class='glyphicon glyphicon-download' id='downloadSong'></button></td>" +
          "</tr>";
        $("#songTable > tbody:last-child").append(html);
      }
    });
  } // end of SearchSong()

  StreamSong = function(id){

    var track_id = json_object['json_array'][id].id;
    SC.stream('/tracks/' + track_id , function(sound){
          sound.play();
     });
  }

}); // end of document.ready()


$("#songNameInput").keyup(function(){
  ClearList();
  var value = $("#songNameInput").val();
  if (value.length == 0){
    //nothing in search bar
  }
  else{
    SearchSong(value);
  }
});

function SongClick(){
  var id = $("#playButton").attr('value');
  StreamSong(id);
}