v2.2 发布
master
mengkunsoft 7 years ago
parent bebc54e5e5
commit 6d7795ec19
  1. 23
      README.MD
  2. 113
      api.php
  3. 79
      css/player.css
  4. 170
      css/small.css
  5. BIN
      favicon.ico
  6. 14
      index.html
  7. 85
      js/ajax.js
  8. 1
      js/background-blur.min.js
  9. 132
      js/functions.js
  10. 11
      js/lyric.js
  11. 35
      js/player.js

@ -1,4 +1,4 @@
MKOnlineMusicPlayer V2.1
MKOnlineMusicPlayer V2.2
========
MKOnlineMusicPlayer 是一款开源的基于网易云音乐api的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人音乐播放列表同步等功能。
@ -15,7 +15,7 @@ MKOnlineMusicPlayer 是一款开源的基于网易云音乐api的在线音乐播
### 注意事项
-----
#### 关于API文件
由于网易云音乐官方封锁了国外的访问,因此本播放器的 api.php 在海外的空间上可能无法运行,具体表现为无法搜索歌曲,因此建议在国内空间使用本播放器(其实有个“你懂的”的功能,请自行挖掘)。
由于网易云音乐官方封锁了国外的访问,因此本播放器的 api.php 在海外的空间上可能无法运行,具体表现为无法搜索歌曲,因此建议在国内空间使用本播放器(其实有个“你懂的”的功能,请 `在 api.php 中` 自行挖掘)。
#### 关于兼容性
本播放器设计支持 IE9及以上的现代浏览器。并且已在 Chrome、firefox、IE11 等浏览器测试使用正常。
@ -31,6 +31,20 @@ MKOnlineMusicPlayer 是一款开源的基于网易云音乐api的在线音乐播
### 更新日志
-----
#### v2.2 `2017/3/26`
- 用户歌单获取时新增加载中动画及遮罩,防止重复加载
- 修复中等屏幕下鼠标滑过tab边框消失的bug
- 修复某些情况下第一句歌词无法渲染的bug
- 修复在IE9下音乐无法播放的bug
- 更换背景展现方式,整体界面更美观
- 正在播放和播放历史列表支持一键清空
- 新增图片加载失败时替换处理
- 新增小屏幕下为当前显示的tab添加下划线
- 新增favicon小图标
- 新增歌曲播放时进度条小点闪烁效果
- 优化后台数据获取失败时弹出提示
- 其它的一些细节优化
#### v2.1 `2017/3/20`
- 紧急修复部分浏览器下切换歌曲造成无限播放失败循环的 BUG
- 新增点击未加载完的播放列表弹出提示
@ -100,10 +114,13 @@ MKOnlineMusicPlayer 是一款开源的基于网易云音乐api的在线音乐播
### 致谢
-----
#### 特别感谢 `网易云音乐`
#### 特别感谢 `网易云音乐`、`QQ音乐网页版`
#### 采用的开源模块
- **Jquery**:js主流开发框架 [http://jquery.com/](http://jquery.com/)
- **layer**:一款强大的web弹层组件 [http://layer.layui.com/](http://layer.layui.com/)
- **mCustomScrollbar**:jQuery自定义滚动条样式插件 [http://manos.malihu.gr/jquery-custom-content-scroller/](http://manos.malihu.gr/jquery-custom-content-scroller/)
- **background-blur**:跨浏览器磨砂效果背景图片模糊特效插件 [https://msurguy.github.io/background-blur/](https://msurguy.github.io/background-blur/)
- **Let's Kill IE6**:消灭IE [http://overtrue.me](http://overtrue.me)
##### 在开发过程中,还参照了很多开源 html 播放器的相关代码,在此一并向他们表示感谢!

@ -1,29 +1,36 @@
<?php
/**************************************************
* MKOnlinePlayer v2.1
* MKOnlinePlayer v2.2
* 后台音乐数据抓取模块
* 编写:mengkun(http://mkblog.cn)
* 时间:2017-3-20
* 时间:2017-3-26
*************************************************/
// api设置
$GLOBALS['config'] = array(
'proxy' => false, // 是否使用代理(true/false) 海外空间请将这一选项设为 true
'proxyIP' => '222.186.34.84', // 代理 IP (这里的代理是随手搜的,可能有点慢)
'proxy' => array( // 是否使用代理(true/false) 供海外空间“翻墙”用
'musicInfo'=> false, // 歌曲信息获取(如果歌曲无法播放请将这一项设为 true)
'lyric'=> false, // 歌词获取(如果歌词无法获取请将这一项设为 true)
'userlist'=> false, // 用户歌单获取(用户歌单无法加载时请将此项设为 true)
'playlist'=> false, // 系统歌单获取(系统歌单无法加载时请将此项设为 true)
'search'=> false // 搜索(搜索功能无法使用时请将此项设为 true)
),
'proxyIP' => '222.186.34.84', // 代理 IP (这里的代理是随手搜的,可能有点慢,请自己寻找更快的代理)
'proxyPort' => 8998, // 代理端口
'proxyUserpwd' => '' // 代理账号及密码(不需要则留空) 格式为 '用户名:密码'
);
//参考资料
// 参考资料
// https://github.com/darknessomi/musicbox/wiki/%E7%BD%91%E6%98%93%E4%BA%91%E9%9F%B3%E4%B9%90API%E5%88%86%E6%9E%90
/**
* Curl网易云获取数据函数
* @param $url api url
* @param $proxy 是否开启 代_理 访问
* @param $post_data post传送的数据
* @return 获取结果
*/
function curl($url, $post_data){ //从网易云音乐读取数据
function curl($url, $proxy = false, $post_data = ''){ //从网易云音乐读取数据
$curl = curl_init();
$header =array(
'Host: music.163.com',
@ -38,7 +45,7 @@ function curl($url, $post_data){ //从网易云音乐读取数据
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $post_data);
if($GLOBALS['config']['proxy'] == true) { // 开启了代理
if($proxy == true) { // 开启了代理
curl_setopt($curl, CURLOPT_PROXYAUTH, CURLAUTH_BASIC); // 代理认证模式
curl_setopt($curl, CURLOPT_PROXY, $GLOBALS['config']['proxyIP']); // 代理服务器地址
curl_setopt($curl, CURLOPT_PROXYPORT, $GLOBALS['config']['proxyPort']); // 代理服务器端口
@ -61,11 +68,10 @@ switch($types)
if(!$id){
$tempArr = array("code"=>-1,"msg"=>"歌曲ID为空");
echojson(json_encode($tempArr));
}else{
$url= "http://music.163.com/api/song/detail/?id={$id}&ids=%5B{$id}%5D&csrf_token="; //请求url
$post_data = '';
echojson(curl($url,$post_data));
}
$url= "http://music.163.com/api/song/detail/?id={$id}&ids=%5B{$id}%5D&csrf_token="; //请求url
echojson(curl($url, $GLOBALS['config']['proxy']['musicInfo']));
break;
case "lyric": //获取歌词
@ -73,38 +79,38 @@ switch($types)
if(!$id){
$tempArr = array("code"=>-1,"msg"=>"歌曲ID为空");
echojson(json_encode($tempArr));
}else{
$url = "http://music.163.com/api/song/lyric?os=pc&id=" . $id . "&lv=-1&kv=-1&tv=-1"; //请求url
$post_data = '';
echojson(curl($url,$post_data));
}
$url = "http://music.163.com/api/song/lyric?os=pc&id=" . $id . "&lv=-1&kv=-1&tv=-1"; //请求url
echojson(curl($url, $GLOBALS['config']['proxy']['lyric']));
break;
case "download": //下载歌曲
$fileurl = getParam('url'); //链接
$musicname = getParam('name'); //歌曲名字
if(!$fileurl){
$tempArr = array("code"=>-1,"msg"=>"歌曲链接为空");
$tempArr = array("code"=>-1, "msg"=>"歌曲链接为空");
echojson(json_encode($tempArr));
}else{
$ua = $_SERVER["HTTP_USER_AGENT"];
$filename = $musicname . ".mp3";
$encoded_filename = urlencode($filename);
$encoded_filename = str_replace("+", "%20", $encoded_filename);
header("Content-Type: application/force-download");
if (preg_match("/MSIE/", $ua) || preg_match("/rv\:11\.0/", $ua)) { // IE浏览器
header('Content-Disposition: attachment; filename="' . $encoded_filename . '"');
} else if (preg_match("/Firefox/", $ua)) { //火狐浏览器
header('Content-Disposition: attachment; filename*="utf8\'\'' . $filename . '"');
} else if (preg_match("/Edge/", $ua)) { //edge浏览器
header('Content-Disposition: attachment; filename="' . $encoded_filename . '"');
} else {
header('Content-Disposition: attachment; filename="' . $filename . '"');
}
$mp3file = file_get_contents($fileurl);
echo $mp3file;
}
$musicname = getParam('name', 'noname'); //歌曲名字
$ua = $_SERVER["HTTP_USER_AGENT"]; // 根据 ua 判断浏览器作对应处理,防止文件名乱码
$filename = $musicname . ".mp3";
$encoded_filename = urlencode($filename);
$encoded_filename = str_replace("+", "%20", $encoded_filename);
header("Content-Type: application/force-download");
if (preg_match("/MSIE/", $ua) || preg_match("/rv\:11\.0/", $ua)) { // IE浏览器
header('Content-Disposition: attachment; filename="' . $encoded_filename . '"');
} else if (preg_match("/Firefox/", $ua)) { //火狐浏览器
header('Content-Disposition: attachment; filename*="utf8\'\'' . $filename . '"');
} else if (preg_match("/Edge/", $ua)) { //edge浏览器
header('Content-Disposition: attachment; filename="' . $encoded_filename . '"');
} else {
header('Content-Disposition: attachment; filename="' . $filename . '"');
}
$mp3file = file_get_contents($fileurl);
echo $mp3file;
exit();
break;
case "userlist": // 获取用户歌单列表
@ -113,9 +119,9 @@ switch($types)
$tempArr = array("code"=>-1,"msg"=>"用户ID为空");
echojson(json_encode($tempArr));
}
$url= "http://music.163.com/api/user/playlist/?offset=0&limit=1001&uid=".$uid; //请求url
$post_data = '';
echojson(curl($url,$post_data));
echojson(curl($url, $GLOBALS['config']['proxy']['userlist']));
break;
case "playlist": // 获取歌单中的歌曲
@ -124,28 +130,27 @@ switch($types)
$tempArr = array("code"=>-1,"msg"=>"歌单ID为空");
echojson(json_encode($tempArr));
}
$url= "http://music.163.com/api/playlist/detail?id={$id}&updateTime=-1"; //请求url
$post_data = '';
echojson(curl($url,$post_data));
echojson(curl($url, $GLOBALS['config']['proxy']['playlist']));
break;
case "search": //搜索歌曲
default:
$s = getParam('name'); //歌名
$limit = getParam('count'); //每页显示数量
$pages = getParam('pages'); //页码
if($pages>1000 || $pages<1)$pages=1; //纠正错误的值
if($limit == "") $limit = 20;
$offset= ($pages-1) * $limit; //偏移量
if(!$s){
$tempArr = array("code"=>-1,"msg"=>"歌名为空");
echojson(json_encode($tempArr));
}else{
$url= "http://music.163.com/api/search/get/web?csrf_token="; //请求url
$post_data = 'hlpretag=<span class="s-fc7">&hlposttag=</span>&s='. $s . '&type=1&offset='. $offset . '&total=true&limit=' . $limit;
echojson(curl($url,$post_data));
}
}
$limit = getParam('count', 20); //每页显示数量
$pages = getParam('pages'); //页码
if($pages>1000 || $pages<1) $pages=1; //纠正错误的值
$offset= ($pages-1) * $limit; //偏移量
$url= "http://music.163.com/api/search/get/web?csrf_token="; //请求url
$post_data = 'hlpretag=<span class="s-fc7">&hlposttag=</span>&s='. $s . '&type=1&offset='. $offset . '&total=true&limit=' . $limit;
echojson(curl($url, $GLOBALS['config']['proxy']['search'], $post_data));
}
/**
@ -169,10 +174,8 @@ function echojson($data) //json和jsonp通用
$callback = getParam('callback');
if($callback != "") //输出jsonp格式
{
echo $callback."(".$data.")";
}
else
{
echo $data;
die($callback."(".$data.")");
} else {
die($data);
}
}

@ -1,9 +1,9 @@
@charset "utf-8";
/**************************************************
* MKOnlinePlayer v2.1
* MKOnlinePlayer v2.2
* 播放器样式表文件
* 编写mengkun(http://mkblog.cn)
* 时间2017-3-20
* 时间2017-3-26
*************************************************/
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, input, lengend, li, ol, p, pre, td, textarea, th, ul {
margin: 0;
@ -55,25 +55,51 @@ a:focus, button:focus, input:focus {
.clear-fix:after {clear: both; }
/*滚动条美化*/
.mCSB_container::-webkit-scrollbar{width:0;height:0}
#lyric::-webkit-scrollbar{width:0;height:0}
html,body{
height: 100%;
width: 100%;
background-color: #777970;
overflow: hidden;
}
#blur {
background-color: #212121;
opacity:0.3;
filter:Alpha(opacity=30);
body {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ba43a8+0,ea4fce+62,537bad+100&amp;0.38+0,0.17+61,0.8+100 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYmE0M2E4IiBzdG9wLW9wYWNpdHk9IjAuMzgiLz4KICAgIDxzdG9wIG9mZnNldD0iNjElIiBzdG9wLWNvbG9yPSIjZTk0ZmNkIiBzdG9wLW9wYWNpdHk9IjAuMTciLz4KICAgIDxzdG9wIG9mZnNldD0iNjIlIiBzdG9wLWNvbG9yPSIjZWE0ZmNlIiBzdG9wLW9wYWNpdHk9IjAuMTkiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUzN2JhZCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(-45deg, rgba(186,67,168,0.38) 0%, rgba(233,79,205,0.17) 61%, rgba(234,79,206,0.19) 62%, rgba(83,123,173,0.8) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(186,67,168,0.38)), color-stop(61%,rgba(233,79,205,0.17)), color-stop(62%,rgba(234,79,206,0.19)), color-stop(100%,rgba(83,123,173,0.8))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61ba43a8', endColorstr='#cc537bad',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
overflow: hidden;
}
#blur,#blur-canvas {
/* 模糊图像层 */
#blur-img {
position: fixed;
height: 100%;
left: -10%;
width: 120%;
overflow: hidden;
}
/* 图像遮罩层 */
.blur-mask {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;
top: 0;
left: 0;
overflow: hidden;
}
#blur-canvas{
/*z-index: -1;*/
}
#mkplayer{
display: none;
}
@ -82,6 +108,11 @@ html,body{
position: absolute;
}
.logo {
transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
display: inline-block;
font-size: 23px;
color: #829194;
@ -318,6 +349,7 @@ html,body{
background-image: url("../images/icon_list_menu.png");
float: left;
margin-left: 10px;
cursor: pointer;
}
.list-playing .icon-play{
display: none;
@ -347,8 +379,8 @@ html,body{
margin-top: 10px;
}
/* 列表中点击加载更多 */
.list-loadmore {
/* 列表中可以被点击的横条 */
.list-clickable {
cursor: pointer;
}
@ -399,6 +431,7 @@ html,body{
text-align: center;
line-height: 40px;
height: 40px;
color: #C5C5C5;
background-color: rgba(0, 0, 0, 0.12);
}
.login-btn {
@ -652,6 +685,11 @@ html,body{
top: 50%;
margin-top: -1px;
border-radius: 2px;
transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
}
/* 进度条小点 */
.mkpgb-dot {
@ -665,9 +703,24 @@ html,body{
margin-left: -5px;
top: 50%;
margin-top: -5px;
transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
}
/* 进度条禁止点击样式 */
.mkpgb-locked {
cursor: not-allowed;
cursor: default;
}
/* 闪动效果作者:qiuye */
.dot-move {
-webkit-box-shadow: 0 0 20px #fff;
-moz-animation: dot-move 3s linear 2s infinite;
-webkit-animation: dot-move 3s linear 2s infinite;
-o-animation: dot-move 3s linear 2s infinite;
-ms-animation: dot-move 3s linear 2s infinite;
}
@-webkit-keyframes dot-move{0%{-webkit-box-shadow: 0 0 20px #fff;}25%{-webkit-box-shadow: 0 0 10px #fff;}50%{-webkit-box-shadow: 0 0 0px #fff;}75%{-webkit-box-shadow: 0 0 10px #fff;}100%{-webkit-box-shadow: 0 0 20px #fff;}}
@keyframes dot-move{0%{-webkit-box-shadow: 0 0 10px #363333;}25%{-webkit-box-shadow: 0 0 7px #363333;}50%{-webkit-box-shadow: 0 0 0px #fff;}75%{-webkit-box-shadow: 0 0 6px #fff;}100%{-webkit-box-shadow: 0 0 10px #363333;}}

@ -1,92 +1,88 @@
@charset "utf-8";
/**************************************************
* MKOnlinePlayer v2.0
* MKOnlinePlayer v2.2
* 小屏幕样式修复
* 编写mengkun(http://mkblog.cn)
* 时间2017-3-16
* 时间2017-3-26
*************************************************/
/* 小于 900px 采用这个样式 */
@media screen and (max-width: 900px) {
/*隐藏头部logo*/
.header {
display: none;
}
/*中部顶格*/
.center {
top: 0;
}
.btn {
padding: 6px 8px;
}
.btn:hover {
border: none;
}
.btn-bar {
right: 0;
z-index: 999;
}
/* 调出播放器按钮 */
.btn[data-action='player'] {
display: inline-block;
}
/*隐藏右侧歌词及封面*/
.player {
display: none;
width: 100%;
}
.cover {
margin-top: 60px;
}
#lyric {
overflow-x: hidden;
overflow-y: auto;
}
.lyric {
top: 260px;
}
/*数据区域占满整个屏幕*/
.data-area {
right: 0;
}
/*音乐名字拉长*/
.music-name {
margin-right: 30%;
}
/*专辑信息不显示*/
.music-album {
display: none;
}
/*歌手名字*/
.auth-name {
width: 30%;
}
/*列表菜单不显示*/
.list-menu {
display: none!important;
}
.music-name-cult {
padding-right: 0!important;
}
/*控制按钮区域缩小*/
.con-btn {
width: 100px;
}
/*进度条调整*/
.progress {
width: auto;
margin-left: 110px;
margin-right: 10px;
height: 100%;
position: relative;
}
/*音量控制区域隐藏*/
.vol {
display: none;
}
/*隐藏头部logo*/
.header {
display: none;
}
/*中部顶格*/
.center {
top: 0;
}
.btn {
padding: 6px 8px;
}
.btn-bar {
right: 0;
z-index: 999;
}
/* 调出播放器按钮 */
.btn[data-action='player'] {
display: inline-block;
}
/*隐藏右侧歌词及封面*/
.player {
display: none;
width: 100%;
}
.cover {
margin-top: 60px;
}
#lyric {
overflow-x: hidden;
overflow-y: auto;
}
.lyric {
top: 260px;
}
/*数据区域占满整个屏幕*/
.data-area {
right: 0;
}
/*音乐名字拉长*/
.music-name {
margin-right: 30%;
}
/*专辑信息不显示*/
.music-album {
display: none;
}
/*歌手名字*/
.auth-name {
width: 30%;
}
/*列表菜单不显示*/
.list-menu {
display: none!important;
}
.music-name-cult {
padding-right: 0!important;
}
/*控制按钮区域缩小*/
.con-btn {
width: 100px;
}
/*进度条调整*/
.progress {
width: auto;
margin-left: 110px;
margin-right: 10px;
height: 100%;
position: relative;
}
/*音量控制区域隐藏*/
.vol {
display: none;
}
}
/* 小于 500px 采用这个样式 */
@ -95,6 +91,7 @@
height: 35px;
}
.btn-box {
background-color: #000;
background-color: rgba(0, 0, 0, 0.12);
position: absolute;
top: 0;
@ -112,7 +109,16 @@
border: none;
text-align: center;
line-height: 35px;
color: #6A6969;
color: #C5C5C5;
}
.btn:hover {
border: none;
}
.btn-box .active:after {
content: '';
display: block;
border-bottom: 3px solid #A2A0A0;
margin-top: -3px;
}
.center {
bottom: 60px;

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

@ -14,7 +14,7 @@
<meta name="x5-fullscreen" content="true"><!--QQ强制全屏-->
<meta name="x5-page-mode" content="app"><!--QQ应用模式-->
<title>MKOnlinePlayer v2.1</title>
<title>MKOnlinePlayer v2.2</title>
<meta name="description" content="一款开源的基于网易云音乐api的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人音乐播放列表同步等功能。"/>
<meta name="keywords" content="孟坤播放器,在线音乐播放器,MKOnlinePlayer,网易云音乐,音乐api,音乐播放器源代码"/>
@ -23,6 +23,9 @@
<script>window.location.href="plugns/killie/"</script>
<![endif]-->
<!-- favicon图标 -->
<link rel="shortcut icon" href="favicon.ico">
<!-- jQuery文件 -->
<script src="js/jquery.min.js"></script>
@ -38,13 +41,11 @@
</head>
<body>
<!-- 模糊化背景 -->
<canvas id="blur-canvas"></canvas>
<div id="blur"></div>
<div id="blur-img"></div>
<!-- 头部logo -->
<div class="header">
<div class="logo" title="Version 2.1; Based on 163music; Powered by Mengkun">
<div class="logo" title="Version 2.2; Based on 163music; Powered by Mengkun">
♫ MKOnlinePlayer
</div>
</div> <!--class="header"-->
@ -142,6 +143,9 @@
<!-- 滚动条美化插件 -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- 背景模糊化插件 -->
<script src="js/background-blur.min.js"></script>
<!-- 站长统计代码 -->
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display: none' id='cnzz_stat_icon_1261525999'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s95.cnzz.com/z_stat.php%3Fid%3D1261525999' type='text/javascript'%3E%3C/script%3E"));</script>

@ -1,8 +1,8 @@
/**************************************************
* MKOnlinePlayer v2.1
* MKOnlinePlayer v2.2
* Ajax 后台数据交互请求模块
* 编写mengkun(http://mkblog.cn)
* 时间2017-3-20
* 时间2017-3-26
*************************************************/
// ajax加载搜索结果
@ -15,13 +15,16 @@ function ajaxSearch() {
url: mkPlayer.api,
data: "types=search&count=" + mkPlayer.loadcount + "&pages=" + rem.loadPage + "&name=" + rem.wd,
dataType : "jsonp",
complete: function(XMLHttpRequest, textStatus) {
if(tmpLoading) layer.close(tmpLoading); // 关闭加载中动画
}, // complete
success: function(jsonData){
if(jsonData.code == "-1"){
layer.msg('搜索内容不能为空', {anim:6});
return false;
}
if(jsonData.result.songCount == "0")
if(jsonData.result === undefined || jsonData.result.songCount === undefined || jsonData.result.songCount == "0")
{
layer.msg('没有找到相关歌曲', {anim:6});
return false;
@ -34,7 +37,6 @@ function ajaxSearch() {
if(rem.loadPage == 1) // 加载第一页,清空列表
{
layer.close(tmpLoading); // 关闭加载中动画
musicList[0].item = [];
rem.mainList.html(''); // 清空列表中原有的元素
addListhead(); // 加载列表头
@ -75,7 +77,10 @@ function ajaxSearch() {
} else {
addListbar("more"); // 还可以点击加载更多
}
} //success
}, //success
error: function(XMLHttpRequest, textStatus, errorThrown) {
layer.msg('搜索结果获取失败 - ' + XMLHttpRequest.status);
} // error
});//ajax
}
@ -124,7 +129,10 @@ function ajaxUrl(music, callback)
callback(music); // 回调函数
return true;
}//success
}, //success
error: function(XMLHttpRequest, textStatus, errorThrown) {
layer.msg('歌曲信息获取失败 - ' + XMLHttpRequest.status);
} // error
}); //ajax
}
@ -147,13 +155,10 @@ function ajaxPlayList(lid, id, callback){
url: mkPlayer.api,
data: "types=playlist&id=" + lid,
dataType : "jsonp",
complete: function(XMLHttpRequest, textStatus) {
musicList[id].isloading = false; // 列表已经加载完了
}, // complete
success: function(jsonData){
// if(typeof jsonData.result.tracks === undefined || jsonData.result.tracks.length === 0)
// {
// alert("这个歌单中没有歌曲");
// return false;
// }
// 存储歌单信息
var tempList = {
id: lid, // 列表的网易云 id
@ -164,16 +169,18 @@ function ajaxPlayList(lid, id, callback){
item: []
};
// 存储歌单中的音乐信息
for (var i = 0; i < jsonData.result.tracks.length; i++) {
tempList.item[i] = {
musicName: jsonData.result.tracks[i].name, // 音乐名字
artistsName: jsonData.result.tracks[i].artists[0].name, // 艺术家名字
albumName: jsonData.result.tracks[i].album.name, // 专辑名字
albumPic: jsonData.result.tracks[i].album.picUrl, // 专辑图片
musicId: jsonData.result.tracks[i].id, // 网易云音乐ID
mp3Url: urlHandle(jsonData.result.tracks[i].mp3Url) // mp3链接
};
if(typeof jsonData.result.tracks !== undefined || jsonData.result.tracks.length !== 0) {
// 存储歌单中的音乐信息
for (var i = 0; i < jsonData.result.tracks.length; i++) {
tempList.item[i] = {
musicName: jsonData.result.tracks[i].name, // 音乐名字
artistsName: jsonData.result.tracks[i].artists[0].name, // 艺术家名字
albumName: jsonData.result.tracks[i].album.name, // 专辑名字
albumPic: jsonData.result.tracks[i].album.picUrl, // 专辑图片
musicId: jsonData.result.tracks[i].id, // 网易云音乐ID
mp3Url: urlHandle(jsonData.result.tracks[i].mp3Url) // mp3链接
};
}
}
// 歌单用户 id 不能丢
@ -202,15 +209,17 @@ function ajaxPlayList(lid, id, callback){
// 改变前端列表
$(".sheet-item[data-no='" + id + "'] .sheet-cover").attr('src', tempList.cover); // 专辑封面
$(".sheet-item[data-no='" + id + "'] .sheet-name").html(tempList.name); // 专辑图片
musicList[id].isloading = false; // 列表已经加载完了
$(".sheet-item[data-no='" + id + "'] .sheet-name").html(tempList.name); // 专辑名字
// 调试信息输出
if(mkPlayer.debug) {
console.log("歌单 [" +tempList.name+ "] 中的音乐获取成功");
}
} //success
}, //success
error: function(XMLHttpRequest, textStatus, errorThrown) {
layer.msg('歌单读取失败 - ' + XMLHttpRequest.status);
$(".sheet-item[data-no='" + id + "'] .sheet-name").html('<span style="color: #EA8383">读取失败</span>'); // 专辑名字
} // error
});//ajax
}
@ -245,8 +254,12 @@ function ajaxLyric(mid, callback) {
console.log("歌词获取成功");
}
callback(lyric);
}
callback(lyric); // 回调函数
}, //success
error: function(XMLHttpRequest, textStatus, errorThrown) {
layer.msg('歌词读取失败 - ' + XMLHttpRequest.status);
callback(''); // 回调函数
} // error
});//ajax
}
@ -255,17 +268,17 @@ function ajaxLyric(mid, callback) {
// 参数 用户的网易云 id
function ajaxUserList(uid)
{
var tmpLoading = layer.msg('加载中...', {icon: 16,shade: 0.01});
$.ajax({
type: "POST",
url: mkPlayer.api,
data: "types=userlist&uid=" + uid,
dataType : "jsonp",
complete: function(XMLHttpRequest, textStatus) {
if(tmpLoading) layer.close(tmpLoading); // 关闭加载中动画
}, // complete
success: function(jsonData){
if(jsonData.code == "-1"){
console.log("用户ID为空!");
return false;
}
if(jsonData.code == 400){
if(jsonData.code == "-1" || jsonData.code == 400){
layer.msg('用户 uid 输入有误');
return false;
}
@ -273,6 +286,7 @@ function ajaxUserList(uid)
if(jsonData.playlist.length === 0 || typeof(jsonData.playlist.length) === "undefined")
{
layer.msg('没找到用户 ' + uid + ' 的歌单');
return false;
}else{
var tempList,userList = [];
$("#sheet-bar").remove(); // 移除登陆条
@ -307,7 +321,10 @@ function ajaxUserList(uid)
if(mkPlayer.debug) {
console.log("用户歌单获取成功 [用户网易云ID:" + uid + "]");
}
}
}, //success
error: function(XMLHttpRequest, textStatus, errorThrown) {
layer.msg('歌单同步失败 - ' + XMLHttpRequest.status);
} // error
});//ajax
return true;
}

@ -0,0 +1 @@
!function(t){"use strict";function e(e){return this.each(function(){var i=t(this),n=i.data("plugin.backgroundBlur"),o=t.extend({},r.DEFAULTS,i.data(),"object"==typeof e&&e);n||i.data("plugin.backgroundBlur",n=new r(this,o)),"fadeIn"===e?n.fadeIn():"fadeOut"===e?n.fadeOut():"string"==typeof e&&n.generateBlurredImage(e)})}var i=function(){for(var t,e=3,i=document.createElement("div"),n=i.getElementsByTagName("i");i.innerHTML="<!--[if gt IE "+ ++e+"]><i></i><![endif]-->",n[0];);return e>4?e:t}(),n=function(){return"_"+Math.random().toString(36).substr(2,9)},o={svgns:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",createElement:function(t,e){var i=document.createElementNS(o.svgns,t);return e&&o.setAttr(i,e),i},setAttr:function(t,e){for(var i in e)"href"===i?t.setAttributeNS(o.xlink,i,e[i]):t.setAttribute(i,e[i]);return t}},r=function(e,i){this.internalID=n(),this.$element=t(e),this.$width=this.$element.width(),this.$height=this.$element.height(),this.element=e,this.options=t.extend({},r.DEFAULTS,i),this.$overlayEl=this.createOverlay(),this.$blurredImage={},this.useVelocity=this.detectVelocity(),this.attachListeners(),this.generateBlurredImage(this.options.imageURL)};r.VERSION="0.0.1",r.DEFAULTS={imageURL:"",blurAmount:10,imageClass:"",overlayClass:"",duration:!1,opacity:1},r.prototype.detectVelocity=function(){return!!window.jQuery.Velocity},r.prototype.attachListeners=function(){this.$element.on("ui.blur.loaded",t.proxy(this.fadeIn,this)),this.$element.on("ui.blur.unload",t.proxy(this.fadeOut,this))},r.prototype.fadeIn=function(){this.options.duration&&this.options.duration>0&&(this.useVelocity?this.$blurredImage.velocity({opacity:this.options.opacity},{duration:this.options.duration}):this.$blurredImage.animate({opacity:this.options.opacity},{duration:this.options.duration}))},r.prototype.fadeOut=function(){this.options.duration&&this.options.duration>0?this.useVelocity?this.$blurredImage.velocity({opacity:0},{duration:this.options.duration}):this.$blurredImage.animate({opacity:0},{duration:this.options.duration}):this.$blurredImage.css({opacity:0})},r.prototype.generateBlurredImage=function(t){var e=this.$blurredImage;this.internalID=n(),e.length>0&&(this.options.duration&&this.options.duration>0?this.useVelocity?e.first().velocity({opacity:0},{duration:this.options.duration,complete:function(){e.remove()}}):e.first().animate({opacity:0},{duration:this.options.duration,complete:function(){e.remove()}}):e.remove()),this.$blurredImage=i?this.createIMG(t,this.$width,this.$height):this.createSVG(t,this.$width,this.$height)},r.prototype.createOverlay=function(){return this.options.overlayClass&&""!==this.options.overlayClass?t("<div></div>").prependTo(this.$element).addClass(this.options.overlayClass):!1},r.prototype.createSVG=function(e,i,n){var r=this,s=o.createElement("svg",{xmlns:o.svgns,version:"1.1",width:i,height:n,id:"blurred"+this.internalID,"class":this.options.imageClass,viewBox:"0 0 "+i+" "+n,preserveAspectRatio:"none"}),a="blur"+this.internalID,u=o.createElement("filter",{id:a}),l=o.createElement("feGaussianBlur",{"in":"SourceGraphic",stdDeviation:this.options.blurAmount}),h=o.createElement("image",{x:0,y:0,width:i,height:n,externalResourcesRequired:"true",href:e,style:"filter:url(#"+a+")",preserveAspectRatio:"none"});h.addEventListener("load",function(){r.$element.trigger("ui.blur.loaded")},!0),h.addEventListener("SVGLoad",function(){r.$element.trigger("ui.blur.loaded")},!0),u.appendChild(l),s.appendChild(u),s.appendChild(h);var d=t(s);return r.options.duration&&r.options.duration>0&&(d.css({opacity:0}),window.setTimeout(function(){"0"===d.css("opacity")&&d.css({opacity:1})},this.options.duration+100)),this.element.insertBefore(s,this.element.firstChild),d},r.prototype.createIMG=function(t,e,i){var n=this,o=this.prependImage(t),r=2*this.options.blurAmount>100?100:2*this.options.blurAmount;return o.css({filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius="+r+") ",top:2.5*-this.options.blurAmount,left:2.5*-this.options.blurAmount,width:e+2.5*this.options.blurAmount,height:i+2.5*this.options.blurAmount}).attr("id","blurred"+this.internalID),o.load(function(){n.$element.trigger("ui.blur.loaded")}),this.options.duration&&this.options.duration>0&&window.setTimeout(function(){"0"===o.css("opacity")&&o.css({opacity:1})},this.options.duration+100),o},r.prototype.prependImage=function(e){var i,n=t('<img src="'+e+'" />');return i=this.$overlayEl?n.insertBefore(this.$overlayEl).attr("id",this.internalID).addClass(this.options.imageClass):n.prependTo(this.$element).attr("id",this.internalID).addClass(this.options.imageClass)};var s=t.fn.backgroundBlur;t.fn.backgroundBlur=e,t.fn.backgroundBlur.Constructor=r,t.fn.backgroundBlur.noConflict=function(){return t.fn.backgroundBlur=s,this}}(jQuery);

@ -1,8 +1,8 @@
/**************************************************
* MKOnlinePlayer v2.0
* MKOnlinePlayer v2.2
* 封装函数及UI交互模块
* 编写mengkun(http://mkblog.cn)
* 时间2017-3-16
* 时间2017-3-26
*************************************************/
// 判断是否是移动设备
var isMobile = {
@ -25,7 +25,7 @@ var isMobile = {
$(function(){
if(mkPlayer.debug) {
console.warn('播放器调试模式已开启,正常使用时请关闭调试模式');
console.warn('播放器调试模式已开启,正常使用时请在 js/player.js 中按说明关闭调试模式');
}
if(!isMobile.any()) { // 只在非移动设备使用滚动条插件
@ -179,7 +179,7 @@ $(function(){
layer.open({
title: '如何获取您的网易云ID?'
,shade: 0.6 //遮罩透明度
,anim: 1 //0-6的动画形式,-1不开启
,anim: 0 //0-6的动画形式,-1不开启
,content:
'1、首先<a href="http://music.163.com/" target="_blank">点我(http://music.163.com/)</a>打开网易云音乐官网<br>' +
'2、然后点击页面右上角的“登录”,登录您的账号<br>' +
@ -193,7 +193,6 @@ $(function(){
layer.msg('uid 只能是数字',{anim: 6});
return false;
}
// layer.msg('您输入的ID是 '+val);
layer.close(index); // 关闭输入框
ajaxUserList(val);
});
@ -201,7 +200,6 @@ $(function(){
// 刷新用户列表
$("#sheet").on("click",".login-refresh", function() {
// rem.uid = null; // 清空记录的uid
playerSavedata('ulist', '');
layer.msg('刷新歌单');
clearUserlist();
@ -209,7 +207,6 @@ $(function(){
// 退出登录
$("#sheet").on("click",".login-out", function() {
// rem.uid = null; // 清空记录的uid
playerSavedata('uid', '');
playerSavedata('ulist', '');
layer.msg('已退出');
@ -258,16 +255,36 @@ $(function(){
var oldVol; // 之前的音量值
if($(this).is('.btn-state-quiet')) {
oldVol = $(this).data("volume");
oldVol = oldVol? oldVol: (isMobile.any()? 1: mkPlayer.volume); // 没找到记录的音量,则重置为默认音量
$(this).removeClass("btn-state-quiet"); // 取消静音
rem.audio.volume = oldVol;
volume_bar.goto(oldVol); // 恢复之前的音量
} else {
oldVol = volume_bar.percent;
rem.audio.volume = 0;
$(this).addClass("btn-state-quiet"); // 开启静音
$(this).data("volume", oldVol); // 记录当前音量值
volume_bar.goto(0); // 音量归零
oldVol = 0;
}
playerSavedata('volume', oldVol); // 存储音量信息
volume_bar.goto(oldVol); // 刷新音量显示
if(rem.audio !== undefined) rem.audio.volume = oldVol; // 应用音量
});
if(mkPlayer.coverbg === true) { // 开启了封面背景
// 背景图片初始化
$('#blur-img').backgroundBlur({
// imageURL : '', // URL to the image that will be used for blurring
blurAmount : 50, // 模糊度
imageClass : 'blured-img', // 背景区应用样式
overlayClass : 'blur-mask', // 覆盖背景区class,可用于遮罩或额外的效果
// duration: 1000, // 图片淡出时间
endOpacity : 1 // 图像最终的不透明度
});
$('.blur-mask').fadeIn(1000); // 遮罩层淡出
}
// 图片加载失败处理
$('img').error(function(){
$(this).attr('src', 'images/player_cover.png');
});
// 初始化播放列表
@ -310,33 +327,26 @@ function changeCover(img) {
$("#music-cover").attr("src", img); // 改变右侧封面
$(".sheet-item[data-no='1'] .sheet-cover").attr('src', img); // 改变正在播放列表的图像
// 图像加载完成
$("#music-cover").load(function(){
if(animate) { // 渐变动画也已完成
blurCover(); // 替换图像并淡出
} else {
imgload = true; // 告诉下面的函数,图片已准备好
}
});
$("#blur-canvas").fadeOut(1000); // 先隐藏图片,方便切换时“偷梁换柱”
// 渐变动画
$("#blur").animate({opacity: "0.7"}, 1000, function(){
if(imgload) { // 如果图片已经加载好了
blurCover(); // 替换图像并淡出
} else {
animate = true; // 等待图像加载完
}
});
}
// 背景更换特效
function blurCover() {
var bCanvas = $("#blur-canvas")[0].getContext("2d");
bCanvas.drawImage($("#music-cover")[0], 10, 10, 20, 20, 0, 0, $("body").width(), $("body").height());
$("#blur-canvas").fadeIn(1000);
$("#blur").animate({opacity:"0.3"}, 1500); // 背景更换特效
if(mkPlayer.coverbg === true) { // 开启了封面背景
$("#music-cover").load(function(){
if(animate) { // 渐变动画也已完成
$('#blur-img').backgroundBlur(img); // 替换图像并淡出
$("#blur-img").animate({opacity:"1"}, 2000); // 背景更换特效
} else {
imgload = true; // 告诉下面的函数,图片已准备好
}
});
// 渐变动画
$("#blur-img").animate({opacity: "0.2"}, 1000, function(){
if(imgload) { // 如果图片已经加载好了
$('#blur-img').backgroundBlur(img); // 替换图像并淡出
$("#blur-img").animate({opacity:"1"}, 2000); // 背景更换特效
} else {
animate = true; // 等待图像加载完
}
});
}
}
// 搜索功能
@ -379,6 +389,10 @@ function loadList(list) {
if(i == 0) {
addListbar("nodata"); // 列表中没有数据
} else {
if(list == 1 || list == 2) { // 历史记录和正在播放列表允许清空
addListbar("clear"); // 清空列表
}
if(rem.playlist === undefined) {
// 未曾播放过
if(mkPlayer.autoplay == true) pause(); // 设置了自动播放,则自动播放
@ -417,25 +431,29 @@ function addItem(no, name, auth, album) {
}
// 加载列表中的提示条
// 参数:类型(more、nomore、loading、nodata)
// 参数:类型(more、nomore、loading、nodata、clear
function addListbar(types) {
var html
switch(types) {
case "more": // 还可以加载更多
html = '<div class="list-item text-center list-loadmore" title="点击加载更多数据" id="list-foot">点击加载更多...</div>';
html = '<div class="list-item text-center list-loadmore list-clickable" title="点击加载更多数据" id="list-foot">点击加载更多...</div>';
break;
case "nomore": // 数据加载完了
html = '<div class="list-item text-center" id="list-foot">全都加载完了</div>';
break;
case "loading":
case "loading": // 加载中
html = '<div class="list-item text-center" id="list-foot">播放列表加载中...</div>';
break;
case "nodata":
case "nodata": // 列表中没有内容
html = '<div class="list-item text-center" id="list-foot">可能是个假列表,什么也没有</div>';
break
break;
case "clear": // 清空列表
html = '<div class="list-item text-center list-clickable" id="list-foot" onclick="clearDislist();">清空列表</div>';
break;
}
rem.mainList.append(html);
}
@ -500,7 +518,7 @@ function refreshList() {
if(rem.paused !== true) { // 没有暂停
for(var i=0; i<musicList[rem.dislist].item.length; i++) {
// 与正在播放的歌曲 id 相同
if(musicList[rem.dislist].item[i].musicId == musicList[1].item[rem.playid].musicId) {
if((musicList[rem.dislist].item[i].musicId !== undefined) && (musicList[rem.dislist].item[i].musicId == musicList[1].item[rem.playid].musicId)) {
$(".list-item[data-no='" + i + "']").addClass("list-playing"); // 添加正在播放样式
// $(".list-item:eq(" + (i + 1) + ")").addClass("list-playing"); // 添加正在播放样式
return true; // 一般列表中只有一首,找到了赶紧跳出
@ -543,28 +561,39 @@ function sheetBar() {
// 选择要显示哪个数据区
// 参数:要显示的数据区(list、sheet、player)
function dataBox(choose) {
$('.btn-box .active').removeClass('active');
switch(choose) {
case "list": // 显示播放列表
if($(".btn[data-action='player']").css('display') !== 'none') {
$("#player").hide();
} else if ($("#player").css('display') == 'none') {
$("#player").fadeIn();
}
$("#main-list").fadeIn();
$("#sheet").fadeOut();
if(rem.dislist == 1) { // 正在播放
$(".btn[data-action='playing']").addClass('active');
} else if(rem.dislist == 0) { // 搜索
$(".btn[data-action='search']").addClass('active');
}
break;
case "sheet": // 显示专辑
if($(".btn[data-action='player']").css('display') !== 'none') {
$("#player").hide();
} else if ($("#player").css('display') == 'none') {
$("#player").fadeIn();
}
$("#sheet").fadeIn();
$("#main-list").fadeOut();
$(".btn[data-action='sheet']").addClass('active');
break;
case "player": // 显示播放器
$("#player").fadeIn();
$("#sheet").fadeOut();
$("#main-list").fadeOut();
$(".btn[data-action='player']").addClass('active');
break;
}
}
@ -669,6 +698,19 @@ function clearUserlist() {
initList();
}
// 清空当前显示的列表
function clearDislist() {
musicList[rem.dislist].item.length = 0; // 清空内容
if(rem.dislist == 1) { // 正在播放列表
playerSavedata('playing', ''); // 清空本地记录
$(".sheet-item[data-no='1'] .sheet-cover").attr('src', 'images/player_cover.png'); // 恢复正在播放的封面
} else if(rem.dislist == 2) { // 播放记录
playerSavedata('his', ''); // 清空本地记录
}
layer.msg('列表已被清空');
dataBox("sheet"); // 在主界面显示出音乐专辑
}
// 刷新播放列表,为正在播放的项添加正在播放中的标识
function refreshSheet() {
// 调试信息输出

@ -1,8 +1,8 @@
/**************************************************
* MKOnlinePlayer v2.1
* MKOnlinePlayer v2.2
* 歌词解析及滚动模块
* 编写mengkun(http://mkblog.cn)
* 时间2017-3-20
* 时间2017-3-26
*************************************************/
var lyricArea = $("#lyric"); // 歌词显示容器
@ -23,7 +23,9 @@ function lyricCallback(str) {
}
lyricArea.html(''); // 清空歌词区域的内容
lyricArea.scrollLeft(0); // 滚动到顶部
lyricArea.scrollTop(0); // 滚动到顶部
rem.lastLyric = -1;
// 显示全部歌词
var i = 0;
@ -72,11 +74,12 @@ function scrollLyric(time) {
$(".lrc-item[data-no='" + i + "']").addClass("lplaying"); // 加上正在播放样式
var scroll = (lyricArea.children().height() * i) - ($(".lyric").height() / 2);
lyricArea.stop().animate({scrollTop: scroll}, 300); // 平滑滚动到当前歌词位置
lyricArea.stop().animate({scrollTop: scroll}, 1000); // 平滑滚动到当前歌词位置(更改这个数值可以改变歌词滚动速度,单位:毫秒)
}
// 解析歌词
// 这一函数来自 https://github.com/TivonJJ/html5-music-player
// 参数:原始歌词文件
function parseLyric(lrc) {
if(lrc === '') return '';

@ -1,18 +1,21 @@
/**************************************************
* MKOnlinePlayer v2.0
* MKOnlinePlayer v2.2
* 播放器主功能模块
* 编写mengkun(http://mkblog.cn)
* 时间2017-3-16
* 时间2017-3-26
*************************************************/
// 播放器功能配置
var mkPlayer = {
api: "api.php", // api地址
wd: "陈奕迅", // 显示在搜索栏的搜索词
wd: "周杰伦", // 显示在搜索栏的搜索词
loadcount: 20, // 搜索结果一次加载多少条
defaultlist: 3, // 默认要显示的播放列表编号
autoplay: false, // 是否自动播放(true/false) *在手机端可能无法自动播放
coverbg: true, // 是否开启封面背景(true/false) *开启后会有些卡
dotshine: false, // 是否开启播放进度条的小点闪动效果[不支持IE](true/false) *开启后会有些卡
volume: 0.6, // 默认音量值(0~1之间)
debug: true // 是否开启调试模式(true/false)
version: 'v2.2', // 播放器当前版本号(仅供调试)
debug: false // 是否开启调试模式(true/false)
};
@ -60,6 +63,7 @@ function audioPlay() {
rem.paused = false; // 更新状态(未暂停)
refreshList(); // 刷新状态,显示播放的波浪
$(".btn-play").addClass("btn-state-paused"); // 恢复暂停
if(mkPlayer.dotshine === true) $("#music-progress .mkpgb-dot").addClass("dot-move"); // 小点闪烁效果
}
// 暂停
@ -69,6 +73,8 @@ function audioPause() {
$(".list-playing").removeClass("list-playing"); // 移除其它的正在播放
$(".btn-play").removeClass("btn-state-paused"); // 取消暂停
$("#music-progress .dot-move").removeClass("dot-move"); // 小点闪烁效果
}
// 播放上一首歌
@ -206,7 +212,9 @@ function play(music) {
ajaxLyric(music.musicId, lyricCallback); // ajax加载歌词
$('audio').remove(); // 移除之前的audio
var newaudio = $('<audio>').html('<source src="'+ music.mp3Url +'">').appendTo('html');
var newaudio = $('<audio><source src="'+ music.mp3Url +'"></audio>').appendTo('body');
// 以下这种方式在 IE9 下无效...
// var newaudio = $('<audio>').html('<source src="'+ music.mp3Url +'">').appendTo('body');
rem.audio = newaudio[0];
// 应用初始音量
rem.audio.volume = volume_bar.percent;
@ -218,24 +226,27 @@ function play(music) {
rem.audio.addEventListener('error', audioErr); // 播放器错误处理
rem.audio.play();
music_bar.lock(false); // 取消进度条锁定
}
// 我的要求并不高,保留这一句版权信息可好?
// 保留了,你不会损失什么;而保留版权,是对作者最大的尊重。
console.info('欢迎使用 MKOnlinePlayer!\n当前版本: v2.1 \n作者:mengkun(http://mkblog.cn)\n歌曲来源于:网易云音乐(http://music.163.com/)\nGithub:https://github.com/mengkunsoft/MKOnlineMusicPlayer');
console.info('欢迎使用 MKOnlinePlayer!\n当前版本:'+mkPlayer.version+' \n作者:mengkun(http://mkblog.cn)\n歌曲来源于:网易云音乐(http://music.163.com/)\nGithub:https://github.com/mengkunsoft/MKOnlineMusicPlayer');
// 音乐进度条拖动回调函数
function mBcallback(newVal) {
var newTime = rem.audio.duration * newVal;
// 应用新的进度
rem.audio.currentTime = newTime;
refreshLyric(newTime);
refreshLyric(newTime); // 强制滚动歌词到当前进度
}
// 音量条变动回调函数
// 参数:新的值
function vBcallback(newVal) {
rem.audio.volume = newVal;
if(rem.audio !== undefined) { // 音频对象已加载则立即改变音量
rem.audio.volume = newVal;
}
if($(".btn-quiet").is('.btn-state-quiet')) {
$(".btn-quiet").removeClass("btn-state-quiet"); // 取消静音
@ -250,9 +261,13 @@ function vBcallback(newVal) {
var initProgress = function(){
// 初始化播放进度条
music_bar = new mkpgb("#music-progress", 0, mBcallback);
music_bar.lock(true); // 未播放时锁定不让拖动
// 初始化音量设定
var tmp_vol = playerReaddata('volume');
tmp_vol = tmp_vol? tmp_vol: (isMobile.any()? 1: mkPlayer.volume);
tmp_vol = (tmp_vol != null)? tmp_vol: (isMobile.any()? 1: mkPlayer.volume);
if(tmp_vol < 0) tmp_vol = 0; // 范围限定
if(tmp_vol > 1) tmp_vol = 1;
if(tmp_vol == 0) $(".btn-quiet").addClass("btn-state-quiet"); // 添加静音样式
volume_bar = new mkpgb("#volume-progress", tmp_vol, vBcallback);
};
@ -323,7 +338,7 @@ mkpgb.prototype = {
if(percent < 0) percent = 0;
this.percent = percent;
$(this.bar + " .mkpgb-dot").css("left", (percent*100) +"%");
$(this.bar + " .mkpgb-cur").stop().animate({width: (percent*100)+"%"}, 200);
$(this.bar + " .mkpgb-cur").css("width", (percent*100)+"%");
return true;
},
// 锁定进度条

Loading…
Cancel
Save