快捷導(dǎo)航

jQuery+JSON+jPlayer實現(xiàn)QQ空間音樂查詢功能示例

更新時間：2013年06月17日 15:15:44 作者：

本文為大家介紹下jQuery+JSON+jPlayer實現(xiàn)QQ空間音樂查詢，具體的實現(xiàn)過程感興趣的朋友可以了解下哈，希望對大家有所幫助

演示地址: http://bejson.com/demos/qqmusic/
代碼下載:http://www.jqdemo.com/932.html
查詢QQ音樂是很早前就出來的一個接口。
這里使用jQuery和jPlayer來實現(xiàn)QQ空間音樂的查詢。
首先感謝bejson收集的各種有用的接口,當(dāng)然也包含QQ空間音樂接口。
它的網(wǎng)址是:http://www.bejson.com/webInterface.php
我們要使用的接口位于bejson接口頁面中的音樂接口欄里。
QQ音樂接口地址:
http://qzone-music.qq.com/fcg-bin/fcg_music_fav_getinfo.fcg?dirinfo=0&dirid=1&uin=QQ號&p=0.519638272547262&g_tk=1284234856
這里給出核心代碼:
1.gtk參數(shù)的獲取方式

復(fù)制代碼代碼如下:

 
function getGTK() { 
var str = "@HR3etVm80"; 
var hash = 5381; 
for (var i = 0, 
len = str.length; i < len; ++i) { 
hash += (hash << 5) + str.charAt(i).charCodeAt(); 
} 
var gtk = hash & 0x7fffffff; 
//document.getElementById("gtk").value = gtk; 
return gtk; 
} 

2.請求QQ空間接口

復(fù)制代碼代碼如下:

 
function getMusicId() { 
var qqNo = document.getElementById("qqNo").value; 
var url = 'http://qzone-music.qq.com/fcg-bin/cgi_playlist_xml.fcg?uin=' + qqNo + '&json=1&g_tk=' + getGTK(); 
$.getScript(url); 
} 

3.回調(diào)拼裝JSON
根據(jù)返回的JSON接口

我們來解析音樂JSON

復(fù)制代碼代碼如下:

 
function jsonCallback(data) { 
if(data.code==1){ 
alert(data.msg); 
return; 
} 
var songs = data.qqmusic.playlist.song; 
var dataStr = "["; 
for (var i = 0; i < songs.length; i++) { 
dataStr += "{"; 
dataStr += "title:'" + songs[i].xsong_name + "',"; 
dataStr += "mp3:'" + songs[i].xsong_url + "'"; 
dataStr += "}"; 
if (i < songs.length) { 
dataStr += ','; 
} 
} 
dataStr += ']'; 
eval("ds=" + dataStr); 
newPlayer(ds); 
} 

最后我們調(diào)用jPlay播放器:

復(fù)制代碼代碼如下:

 
var playList; 
function newPlayer(data) { 
playList = new jPlayerPlaylist({ 
jPlayer: "#jquery_jplayer_1", 
cssSelectorAncestor: "#jp_container_1" 
}, 
data, { 
swfPath: "js", 
supplied: "mp3", 
wmode: "window" 
}); 
} 

您可能感興趣的文章: