我用最独特的方式为情人节准备了这些。。。

版权声明: https://blog.csdn.net/qq_41730930/article/details/79327764

原创文|Space9

虽然不一样的专业 但也无法阻挡我们之间心的靠近
同样的呼吸 同样的心 吸引着我们走向了彼此
我们的相遇是如此的传奇 因为你 有了不一样的改变
每天的生活变得更加快乐 人生目标也坚定了许多
遇见你是我一生最美的幸运
在你的陪伴下 我加入了全民K歌 唱出了自己
情人节我为你准备了这些 希望你能喜欢这个独特的方式

实现过程

基础部分

文件目录结构
favicon.ico      //网站头像文件
index.html       //网站首页文件
jquery.min.js   // jQuery库文件
jsUrlHelper.js  //网址参数的解析文件

2018-02-13_172457.png

  • 新建index.html文件
    桌面新建文本文档,修改文件名为index.html,接着就开始我们的开发工作啦
    之间设置网站标题,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(网站头像) 网址前面的小图标
    将下面的代码,添加在之间就可以了
<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库文件
    将下面的代码,同样添加在之间,并将两个文件放置到与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歌官网并登录
  • 然后复制全民K歌主页地址,粘贴到这个网站
  • 接着点击确定,即可预加载歌曲列表
  • 最后选择要下载的歌曲,点击播放之后,就可以看到下载按钮。

源码交流

您可以Fork我的项目

如果你不是专业人士,这里我还提供了直接下载的方式
链接: http://t.cn/Eo6X1hT

本文仅为个人学习使用,不得用于任何商业用途,否则后果自负!如侵犯到您的权益,请及时通知我,我会及时处理。

展开阅读全文

没有更多推荐了,返回首页