jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例


Posted in Javascript onJune 17, 2013

jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
演示地址: http://bejson.com/demos/qqmusic/
代码下载:http://www.jqdemo.com/932.html
查询QQ音乐是很早前就出来的一个接口。
这里使用jQuery和jPlayer来实现QQ空间音乐的查询。
首先感谢bejson收集的各种有用的接口,当然也包含QQ空间音乐接口。
它的网址是: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参数的获取方式

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.回调拼装JSON
根据返回的JSON接口
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例 
我们来解析音乐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); 
}

最后我们调用jPlay播放器:
var playList; 
function newPlayer(data) { 
playList = new jPlayerPlaylist({ 
jPlayer: "#jquery_jplayer_1", 
cssSelectorAncestor: "#jp_container_1" 
}, 
data, { 
swfPath: "js", 
supplied: "mp3", 
wmode: "window" 
}); 
}
Javascript 相关文章推荐
动态加载iframe
Jun 16 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
详谈javascript中的cookie
Jun 03 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
在 HTML 页面中使用 React的场景分析
Jan 18 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
JS图片无缝滚动(简单利于使用)
Jun 17 #Javascript
js二级地域选择的实现方法
Jun 17 #Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 #Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 #Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 #Javascript
js特效,页面下雪的小例子
Jun 17 #Javascript
js弹出窗口之弹出层的小例子
Jun 17 #Javascript
You might like
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
大学四年规划书范文
2013/12/27 职场文书
材料员岗位职责
2014/03/13 职场文书
防沙治沙典型材料
2014/05/07 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
教师四风问题整改措施
2014/09/25 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
小学科学课教学反思
2016/02/23 职场文书
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript