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 相关文章推荐
Extjs学习笔记之七 布局
Jan 08 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
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中header设置常见文件类型的content-type
2015/06/23 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
PHP微商城开源代码实例
2019/03/27 PHP
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Python如何实现定时器功能
2020/05/28 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
高中语文教学反思
2014/01/16 职场文书
学校搬迁方案
2014/06/15 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
小学班级特色活动方案
2014/08/31 职场文书
房屋维修申请报告
2015/05/18 职场文书
2016年元旦致辞
2015/08/01 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
python数字图像处理:图像的绘制
2022/06/28 Python