Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views :

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

Soundcloud Search in PHP

 

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

Register_SoundCloud_App

 

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"
}
]

I hope you love this tutorial 🙂

Please don’t forget to share and subscribe to latest updates of the blog. Thanks! View Live Demo  Download

  • Facebook
  • Twitter
  • Google+
  • Linkedin