演示地址: 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接口

我们来解析音乐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"
});
}

原文转自:jQuery+JSON+jPlayer实现QQ空间音乐查询

jQuery+JSON+jPlayer实现QQ空间音乐查询的更多相关文章

  1. 自己制作QQ空间音乐的具体方法

    1.打开QQ邮箱找到左栏下方的“文件中转站”--点击收藏文件--上传到收藏  将MP3或WMA音乐文件上传 上传完成点下载 下图:   2.点“保存”将最上面一排的地址全部复制  下图   3.为了更 ...

  2. jQuery插件实现图片展开效果,jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  3. 每日技术总结:jquery datetimepicker,微博QQ好友QQ空间微信等分享接口

    前言: 1.jquery datetimepicker 今天遇到一个日期控件格式的问题,默认选中显示的并不是设定的值,而是当天的日期.于是去查了一遍文档. 参考文章:jquery datetimepi ...

  4. 类似于qq空间类型的评论和回复

    最近学习thinkphp,做了一个博客系统,其中感觉实现一个类似于qq空间的评论和回复功能比较复杂,所以把这次的经历记录下来,与大家共勉,具体的方法就不说了,在这里分享一下思路. 目标就是这种,关键是 ...

  5. 90后的青春,定格在被淡忘的QQ空间里

    QQ空间,这个曾经陪我们从童年到少年再到成年,从2G时代再到如今的4G末,占据了我们太多的青春回忆,如今好友空间动态更新的不在像从前那样频繁.依稀记得当年的好友买卖,抢车位再或者情侣空间,现在想想那时 ...

  6. JS时间轴效果(类似于qq空间时间轴效果)

    在上一家公司写了一个时间轴效果,今天整理了下,感觉有必要写一篇博客出来 给大家分享分享 当然代码还有很多不足的地方,希望大家多指点指点下,此效果类似于QQ空间或者人人网空间时间轴效果,当时也是为了需求 ...

  7. QQ空间动态爬虫

    作者:虚静 链接:https://zhuanlan.zhihu.com/p/24656161 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 先说明几件事: 题目的意 ...

  8. qq空间返回顶部代码

    点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

随机推荐

  1. 关于webbrowser控件自动登陆的问题

    原文:关于webbrowser控件自动登陆的问题 楼主dtb(陈少)2004-03-04 22:16:55 在 VB / 网络编程 提问 请问怎么用webbrowser自动登陆www.jp168.co ...

  2. MVC 5 Web编程2 -- URL映射

    ASP.NET MVC 5 Web编程2 -- URL映射(路由原理) 2015-02-12 08:50 by hangwei, 704 阅读, 5 评论, 收藏, 编辑 本章将讲述ASP.NET M ...

  3. Asp.Net MVC5入门学习系列⑥

    原文:Asp.Net MVC5入门学习系列⑥ 接着上次的篇幅,我们这篇手动来写一个查询的流程代码! 搜索/查询 流程功能的实现 那现在要做搜索(查询)功能我们第一步应该做什么呢!第一次是不是我们应该去 ...

  4. MySql状态查看方法 MySql如何查看连接数和状态?

    原文:MySql状态查看方法 MySql如何查看连接数和状态? 如果是root帐号,你能看到所有用户的当前连接.如果是其它普通帐号,只能看到自己占用的连接 怎么进入mysql命令行呢? mysql的安 ...

  5. 前端构建利器Grunt—Bower

    runt + Bower—前端构建利器 目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web ...

  6. VBS学习日记(一个) 开始了解

    Vbs 一个 Windows 脚本,其代表 :Microsoft Visual Basic Script Editon.( 微软可视化BASIC 脚本版),VBS 是 Visual Basic 的的一 ...

  7. hdu5024(dp)

    意甲冠军: 薛期呵和王熙凤不想很接近生活(因为假定他们一起,柴可能取代王熙凤) 现在'.'事情是这样的.'#'一堵墙.薛期呵对宝让生活远: 因此,选择一个最长的公路,让他们住在两端: 路达一个转折点. ...

  8. Spring IOC之BeanFactory

    BeanFactory提供了SpringIOC功能的基础但是它只是直接在用在和第三方框架的整合中,而且现在对于大部分的Spring用户来讲这一句成为了过去.BeanFactory和相关的接口,例如Be ...

  9. js判断浏览器类型(手机和电脑终端)

    工作中经常会用到通过js来判断浏览器的功能!今天这里通过js来判断浏览器是来自移动设备还是pc设备! 代码如下: var browser={ versions:function(){ var u = ...

  10. 【SSRS】入门篇(二) -- 建立数据源

    原文:[SSRS]入门篇(二) -- 建立数据源 通过 [SSRS]入门篇(一) -- 创建SSRS项目 这篇,我们建立了一个SSRS项目: 接下来,我们以 AdventureWorks2012 示例 ...