Soundcloud MP3 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.

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

I hope you love this tutorial :)

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

Download