原创文｜Space9
虽然不一样的专业 但也无法阻挡我们之间心的靠近
同样的呼吸 同样的心 吸引着我们走向了彼此
我们的相遇是如此的传奇 因为你 有了不一样的改变
每天的生活变得更加快乐 人生目标也坚定了许多
遇见你是我一生最美的幸运
在你的陪伴下 我加入了全民K歌 唱出了自己
情人节我为你准备了这些 希望你能喜欢这个独特的方式
实现过程
基础部分
文件目录结构
favicon.ico //网站头像文件
index.html //网站首页文件
jquery.min.js // jQuery库文件
jsUrlHelper.js //网址参数的解析文件
2018-02-13_172457.png
- 新建index.html文件
桌面新建文本文档，修改文件名为index.html，接着就开始我们的开发工作啦
在<title></title>之间设置网站标题，background后面设置背景图片地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>全民K歌歌曲下载</title>
</head>
<body background="http://www.w3school.com.cn/i/eg_bg_06.gif">
用户主页：
<input type="text" id="homePage" placeholder="输入网址" autofocus="autofocus" />
<input type="button" id="btn" value="确定" onclick="myfunction()" />
</body>
</html>
- 添加favicon(网站头像) 网址前面的小图标
将下面的代码，添加在<head></head>之间就可以了
<link href="favicon.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" />
<link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
- 引入网站需要的js库文件
将下面的代码，同样添加在<head></head>之间，并将两个文件放置到与index.html文件相同的目录
<script src="./jquery.min.js?=2.1.4"></script>
<script src="./jsUrlHelper.js"></script> //URL网址的解析库文件，引用自网上
- 添加键盘Enter键的响应动作
原始只能通过鼠标点击确定，所以我们为键盘点击添加动作
document.onkeydown = function (e) {
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which;
if (code == 13) {
$("#btn").click();
}
}
核心部分
- 通过用户点击确定按钮，触发myfunction来解析URL，获取其中的参数uid的值
var userId;
var myfunction = function(){
urlUid=document.getElementById("homePage").value; //从页面获取用户主页地址
userId=jsUrlHelper.getUrlParam(urlUid,"uid"); //通过URL解析库获取参数uid值
fun();
}
- 利用ajax向接口发送get请求，并设定dataType为jsonp，以及回调函数名为MusicJsonCallback(必须设定为这个名称，因为这是接口自带的返回数据参数),来获取用户主页的歌曲列表
var more_flag=1;
var index=1;
var fun = function() {
if (more_flag==1) {
var src = "http://node.kg.qq.com/cgi/fcgi-bin/kg_ugc_get_homepage?type=get_ugc&start="+index+"&num=8&share_uid="+userId;
$.ajax({
type: "GET",
url: src,
dataType: "jsonp", //指定服务器返回的数据类型
jsonpCallback: "MusicJsonCallback", //指定回调函数名称
}).done(function(data) {
more_flag=data.data.has_more; //默认一页加载8首歌，查看是否还有下一页
index++;
fun();
}).fail(function() {
console.log("error");
})
} else {
console.log(num); //显示加载的总歌曲数量
}
}
- 按照接口形式拼接url播放地址
var num=0;
function MusicJsonCallback (data) {
for(i=0;i<data.data.ugclist.length; i++){
var url ="http://node.kg.qq.com/cgi/fcgi-bin/fcg_get_play_url?shareid=" + data.data.ugclist[i].shareid;
num++;
}
}
- 获得播放地址之后，在页面动态添加audio标签和p标签，显示歌曲列表
var p = document.createElement('p');//创建p节点
p.innerHTML = (num+1)+": "+data.data.ugclist[i].title;//p节点显示歌曲名称
var audio = document.createElement('audio'); //生成一个audio元素
audio.controls = true; //向用户显示控件，比如播放按钮
audio.src = url; //音乐的路径
audio.preload = "none"; //规定是否预加载音频，none表示当页面加载后不载入音频
document.body.appendChild(p); //把p添加到页面中
document.body.appendChild(audio); //把audio添加到页面中
到这里就已经全部设计完成，下面是成果展示及使用说明
成果展示
-
在线全民K歌歌曲下载
2018-02-12_103127.png
使用说明
- 首先你得先在电脑上进入全民K歌官网并登录
- 然后复制全民K歌主页地址，粘贴到这个网站
- 接着点击确定，即可预加载歌曲列表
- 最后选择要下载的歌曲，点击播放之后，就可以看到下载按钮。
源码交流
您可以Fork我的项目
如果你不是专业人士，这里我还提供了直接下载的方式
链接: https://pan.baidu.com/s/1jJhtVPO 密码: hrys
上一篇：全民K歌 我的崇拜 后台API接口
下一篇：QQ语音消息转换成WAV格式
本文仅为个人学习使用，不得用于任何商业用途，否则后果自负！如侵犯到您的权益,请及时通知我,我会及时处理。
网友评论