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 相关文章推荐
通过jquery实现tab标签浏览效果
Feb 20 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
javascript相关事件的几个概念
May 21 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
在vue项目中使用md5加密的方法
Sep 14 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP 加密解密内部算法
2010/04/22 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
tensorflow之并行读入数据详解
2020/02/05 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
阿里旅行:飞猪
2017/01/05 全球购物
数据库基础的一些面试题
2012/02/25 面试题
DTD的含义以及作用
2014/01/26 面试题
会计电算化大学生职业规划书
2014/02/05 职场文书
2013年军训通讯稿
2014/02/05 职场文书
财务科科长岗位职责
2014/03/10 职场文书
创业女性典型材料
2014/05/02 职场文书
励志演讲稿800字
2014/08/21 职场文书
公司安全管理制度范本
2015/08/05 职场文书
golang json数组拼接的实例
2021/04/28 Golang
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python