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收集的各種有用的接口,當然也包含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ù)的獲取方式
復制代碼 代碼如下:
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空間接口
復制代碼 代碼如下:
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
復制代碼 代碼如下:
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播放器:
復制代碼 代碼如下:
var playList;
function newPlayer(data) {
playList = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
},
data, {
swfPath: "js",
supplied: "mp3",
wmode: "window"
});
}
相關(guān)文章
這篇文章主要介紹了jQuery綁定自定義事件使用技巧,通過循環(huán)綁定所有的自定義事件,在恰當?shù)臅r機調(diào)用,需要的朋友可以參考下。2016-06-06
jQuery實現(xiàn)鼠標經(jīng)過時出現(xiàn)隱藏層文字鏈接的方法
這篇文章主要介紹了jQuery實現(xiàn)鼠標經(jīng)過時出現(xiàn)隱藏層文字鏈接的方法,涉及jQuery鼠標hover事件的響應及頁面元素的動態(tài)處理技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
jquery怎樣實現(xiàn)ajax聯(lián)動框(一)
ajax聯(lián)動框想必大家早有所耳聞，接下來本文詳細介紹下使用jquery實現(xiàn)的原理及代碼，感興趣的你可以參考下，或許對你有所幫助2013-03-03
jQuery操作CheckBox的方法介紹(選中,取消,取值)
本篇文章主要是對jQuery操作CheckBox的方法(選中,取消,取值)進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jQuery 中的each函數(shù) 很方便,$.each ()函數(shù)封裝了十分強大的遍歷功能，它可以遍歷一維數(shù)組、多維數(shù)組、DOM , JSON 等等，在javaScript 開發(fā)過程中使用$each可以大大的減輕我們的工作量,這里貼一個簡單的模仿each的函數(shù),只能處理數(shù)組類型的對象。2015-04-04
貌似最近騰訊手機游戲天天愛消除挺火的，我也是粉絲之一，最近對javascript一直比較感興趣然后想用js仿造一個，應該不是太難，2015-10-10
jQuery實現(xiàn)在textarea指定位置插入字符或表情的方法
這篇文章主要介紹了jQuery實現(xiàn)在textarea指定位置插入字符或表情的方法,實例分析了jQuery操作表單元素的技巧,非常實用,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
通過jquery和css相結(jié)合的方式實現(xiàn)鼠標點擊圖片彈出畫廊切換特效，效果逼真，下面小編把源碼分享給大家供大家參考2015-11-11
這篇文章主要介紹了jQuery中:gt選擇器用法,實例分析了:gt選擇器的功能、定義及匹配大于給定索引值元素的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery中實現(xiàn)prop()函數(shù)控制多選框(全選,反選)
下面小編就為大家?guī)硪黄猨Query中實現(xiàn)prop()函數(shù)控制多選框(全選,反選)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08