SoundCloud Instant Search menggunakan PHP & jQuery Ajax

Instant Search adalah salah satu istilah yang paling populer dalam pencarian internet, yang menunjukkan hasil saat Anda mengetik. Saya menemukan bahwa tidak ada lagi artikel tentang Mencari Souncloud Audio menggunakan PHP di internet.

Jadi Dalam tutorial ini, saya akan memberitahu Anda bagaimana untuk mencari audio dalam database SoundCloud menggunakan PHP & JQuery Ajax

SoundCloud adalah sebuah platform distribusi audio online yang berbasis di Berlin, Jerman yang memungkinkan penggunanya untuk meng-upload, rekaman, mempromosikan dan berbagi suara mereka awalnya diciptakan. Pada bulan Juli 2013 itu memiliki 40 juta pengguna terdaftar dan 200 juta pendengar - https://soundcloud.com/

Step 1

Kita perlu klien Id dari aplikasi SoundCloud untuk mengakses audio mereka melalui API

Jadi kita perlu Registrasi aplikasi kita di SoundCloud dari sini - http://soundcloud.com/you/apps/new

Silakan lihat screenshot di bawah ini

Step 2

Setelah mendapatkan Anda Client Id, Lulus ke url & mengakses data dari database SoundCloud. Hasilnya harus diJSON Format.

Dengan menggunakan json_decode fungsi, itu menerjemahkan string JSON. Dengan melewati  TRUE sebagai parameter kedua, Ini mengkonversi objek json ke dalam array asosiatif.

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

2	//get json datas from soundcloud API

3	$api_content = file_get_contents($api_url);

4	//Decodes a JSON string

5	$api_content_array = json_decode($api_content, true);

Setelah mengubah objek JSON ke dalam array asosiatif, kita dapat dengan mudah mendapatkan data-data yang diperlukan dengan menggunakan foreach seperti yang ditunjukkan di bawah ini

1	foreach ($api_content_array as $val) { ?>

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

3	<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>

4	<div class="details">

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

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

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

8

</div>

9

</div>

10

<?php

11

}

12

?>

Step 3

Di bawah kode jQuery digunakan untuk memanggil file php untuk mengakses audio SoundCloud menggunakan API mereka

Saya telah menggunakan  ClearTimeOut & SetTimeout javascript fungsi untuk menunda panggilan Ajax untuk menghindari permintaan pencarian yang tidak diinginkan ke SoundCloud database API

1	var timer = null;

2	jQuery("#keyword").keyup(function() {

3

4	if(timer) {

5	clearTimeout(timer);

6

}

7	timer = setTimeout(function() {

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

9	var obj = jQuery(this);

10

11	if(sc_keyword != '') {

12

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

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

15	jQuery.ajax({

16	type: "POST",

17	url: "fetch_soundcloud.php",

18	data: str,

19	cache: false,

20	success: function(htmlresp){

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

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

23

}

24

});

25

26

} else {

27	alert("Search for your favourite musics");

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

29

}

30

}, 500);

31

32

});

Format File Soundcloud JSON

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

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

3	"bpm" : null,

4	"comment_count" : 219,

5	"commentable" : true,

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

7

"description" : "Like us our fan page for more Songshttps://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",

8	"download_count" : 0,

9	"downloadable" : false,

10	"duration" : 350987,

11	"embeddable_by" : "all",

12	"favoritings_count" : 3850,

13	"genre" : "bollywood songs",

14	"id" : 104496032,

15	"isrc" : "",

16	"key_signature" : "",

17	"kind" : "track",

18	"label_id" : null,

19	"label_name" : "",

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

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

22	"original_content_size" : 10136447,

23	"original_format" : "mp3",

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

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

26	"playback_count" : 282240,

27	"policy" : "ALLOW",

28	"purchase_title" : null,

29	"purchase_url" : null,

30	"release" : "",

31	"release_day" : null,

32	"release_month" : null,

33	"release_year" : null,

34	"sharing" : "public",

35	"state" : "finished",

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

37	"streamable" : true,

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

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

40	"track_type" : "",

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

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

43	"id" : 53653218,

44	"kind" : "user",

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

46	"permalink" : "chennai-express",

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

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

49	"username" : "Chennai Express"

50

},

51	"user_id" : 53653218,

52	"video_url" : null,

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

54

}

55

]

Saya harap Anda menyukai tutorial ini :)

• Tweet
• Share
• Share
• Share
• Share