Instant Soundcloud Search using PHP & jQuery Ajax

Instant Search is one of the most popular term in the internet search, that shows you results as you type. I found that there are no more articles on Searching Souncloud Audios using PHP in the internet.

So In this tutorial, I will tell you how to search audios in Soundcloud database using PHP & jQuery Ajax

SoundCloud is an online audio distribution platform based in Berlin, Germany that enables its users to upload, record, promote and share their originally-created sounds. In July 2013, it had 40 million registered users and 200 million listeners – https://soundcloud.com/

Please take a look on my previous post Facebook Style Soundcloud Embed from Url

Contents

Step 1

We need client Id from soundcloud app to access their audios via API

So we need to Register our app in Soundcloud from here – http://soundcloud.com/you/apps/new

Please refer the screenshot below

Step 2

After getting your Client Id, Pass it to url & access the datas from soundcloud database. The result should be in JSON format.

By using json_decode function, it decodes the JSON string. By passing TRUE as second parameter, It convert json objects into associative arrays.

$api_url = 'http://api.soundcloud.com/tracks.json?client_id=your_client_id&q='.urlencode($key);

//get json datas from soundcloud API

$api_content = file_get_contents($api_url);

//Decodes a JSON string

$api_content_array = json_decode($api_content, true);

After converting the JSON objects into associative arrays, we can easily get the required datas using foreach as shown below

foreach ($api_content_array as $val) { ?>

<div class="videos" id="sc-<?php echo $val['id'];?>">

  <div class="expand-video"> <a class="soundcloud" id="<?php echo $val['id'];?>" href="<?php echo $val['uri'];?>"><span></span> <img src="<?php echo $val['user']['avatar_url'];?>" width="120" height="90" title="Play" alt="Play"/> </a> </div>

  <div class="details">

    <h6><?php echo $val['title'];?></h6>

    <p class="link"><?php echo $val['user']['username'];?></p>

    <p class="desc"><?php echo $val['description'];?></p>

  </div>

</div>

<?php

 }

?>

Step 3

Below jQuery code is used to call the php file to access soundcloud audios using their API

I have used ClearTimeOut & SetTimeout javascript function to delay the Ajax call to avoid unwanted search requests to Soundcloud Database API

var timer = null;

jQuery("#keyword").keyup(function() {
if(timer) {

    clearTimeout(timer);

  }

timer = setTimeout(function() {

		var sc_keyword = jQuery("#keyword").val();

		var obj = jQuery(this);
		if(sc_keyword != '') {
  
 

			jQuery(".ajax_indi").show();

			var str = jQuery("#fb_expand").serialize();

			jQuery.ajax({

				type: "POST",

				url: "fetch_soundcloud.php",

				data: str,

				cache: false,

				success: function(htmlresp){

					jQuery('#results').html(htmlresp);

					jQuery(".ajax_indi").hide();

				}

			});
		} else {

			alert("Search for your favourite musics");

			jQuery("#keyword").focus();

		}

}, 500);
});

Soundcloud JSON file format

[ { "artwork_url" : "https://i1.sndcdn.com/artworks-000054792391-28glcc-large.jpg?86347b7",

    "attachments_uri" : "https://api.soundcloud.com/tracks/104496032/attachments",

    "bpm" : null,

    "comment_count" : 219,

    "commentable" : true,

    "created_at" : "2013/08/08 03:58:34 +0000",

    "description" : "Like us our fan page for more Songs https://www.facebook.com/BollywoodLatestSong\r\nSingers: Chinmayi Sripaada, Gopi Sunder\r\nMusic: Vishal-Shekhar\r\nLyricist: Amitabh Bhattacharya\r\nTamil Poetry: Saint Thiruppaan Alvar (8th Century A.D)\r\nCast: Shahrukh Khan, Deepika Padukone\r\nMusic on: T-Series",

    "download_count" : 0,

    "downloadable" : false,

    "duration" : 350987,

    "embeddable_by" : "all",

    "favoritings_count" : 3850,

    "genre" : "bollywood songs",

    "id" : 104496032,

    "isrc" : "",

    "key_signature" : "",

    "kind" : "track",

    "label_id" : null,

    "label_name" : "",

    "last_modified" : "2014/07/15 02:21:14 +0000",

    "license" : "all-rights-reserved",

    "original_content_size" : 10136447,

    "original_format" : "mp3",

    "permalink" : "titli-chennai-express",

    "permalink_url" : "http://soundcloud.com/chennai-express/titli-chennai-express",

    "playback_count" : 282240,

    "policy" : "ALLOW",

    "purchase_title" : null,

    "purchase_url" : null,

    "release" : "",

    "release_day" : null,

    "release_month" : null,

    "release_year" : null,

    "sharing" : "public",

    "state" : "finished",

    "stream_url" : "https://api.soundcloud.com/tracks/104496032/stream",

    "streamable" : true,

    "tag_list" : "\"chennai express\"",

    "title" : "Titli - Chennai Express - Chennai Express",

    "track_type" : "",

    "uri" : "https://api.soundcloud.com/tracks/104496032",

    "user" : { "avatar_url" : "https://i1.sndcdn.com/avatars-000075788600-y2acsy-large.jpg?86347b7",

        "id" : 53653218,

        "kind" : "user",

        "last_modified" : "2014/08/07 15:46:22 +0000",

        "permalink" : "chennai-express",

        "permalink_url" : "http://soundcloud.com/chennai-express",

        "uri" : "https://api.soundcloud.com/users/53653218",

        "username" : "Chennai Express"

      },

    "user_id" : 53653218,

    "video_url" : null,

    "waveform_url" : "https://w1.sndcdn.com/X8M7SRav3Iq3_m.png"

  }

]