parent
c12196b8da
commit
481c4c7511
39 changed files with 4873 additions and 0 deletions
@ -0,0 +1,230 @@ |
||||
<?php |
||||
/************************************************** |
||||
* MKOnlinePlayer v2.4 |
||||
* 后台音乐数据抓取模块 |
||||
* 编写：mengkun(https://mkblog.cn) |
||||
* 时间：2018-3-11 |
||||
* 特别感谢 @metowolf 提供的 Meting.php |
||||
*************************************************/ |
||||
|
||||
/************ ↓↓↓↓↓ 如果网易云音乐歌曲获取失效，请将你的 COOKIE 放到这儿 ↓↓↓↓↓ ***************/ |
||||
$netease_cookie = ''; |
||||
/************ ↑↑↑↑↑ 如果网易云音乐歌曲获取失效，请将你的 COOKIE 放到这儿 ↑↑↑↑↑ ***************/ |
||||
/** |
||||
* cookie 获取及使用方法见 |
||||
* https://github.com/mengkunsoft/MKOnlineMusicPlayer/wiki/%E7%BD%91%E6%98%93%E4%BA%91%E9%9F%B3%E4%B9%90%E9%97%AE%E9%A2%98 |
||||
* |
||||
* 更多相关问题可以查阅项目 wiki |
||||
* https://github.com/mengkunsoft/MKOnlineMusicPlayer/wiki |
||||
* |
||||
* 如果还有问题，可以提交 issues |
||||
* https://github.com/mengkunsoft/MKOnlineMusicPlayer/issues |
||||
**/ |
||||
|
||||
|
||||
define('HTTPS', false); // 如果您的网站启用了https，请将此项置为“true”，如果你的网站未启用 https，建议将此项设置为“false” |
||||
define('DEBUG', false); // 是否开启调试模式，正常使用时请将此项置为“false” |
||||
define('CACHE_PATH', 'cache/'); // 文件缓存目录,请确保该目录存在且有读写权限。如无需缓存，可将此行注释掉 |
||||
|
||||
/* |
||||
如果遇到程序不能正常运行，请开启调试模式，然后访问 http://你的网站/音乐播放器地址/api.php ，进入服务器运行环境检测。 |
||||
此外，开启调试模式后，程序将输出详细的运行错误信息，方便定位错误原因。 |
||||
|
||||
因为调试模式下程序会输出服务器环境信息，为了您的服务器安全，正常使用时请务必关闭调试。 |
||||
*/ |
||||
|
||||
|
||||
|
||||
/*****************************************************************************************************/ |
||||
if(!defined('DEBUG') || DEBUG !== true) error_reporting(0); // 屏蔽服务器错误 |
||||
|
||||
require_once('plugns/Meting.php'); |
||||
|
||||
use Metowolf\Meting; |
||||
|
||||
$source = getParam('source', 'netease'); // 歌曲源 |
||||
$API = new Meting($source); |
||||
|
||||
$API->format(true); // 启用格式化功能 |
||||
|
||||
if($source == 'kugou' || $source == 'baidu') { |
||||
define('NO_HTTPS', true); // 酷狗和百度音乐源暂不支持 https |
||||
} elseif(($source == 'netease') && $netease_cookie) { |
||||
$API->cookie($netease_cookie); // 解决网易云 Cookie 失效 |
||||
} |
||||
|
||||
// 没有缓存文件夹则创建 |
||||
if(defined('CACHE_PATH') && !is_dir(CACHE_PATH)) createFolders(CACHE_PATH); |
||||
|
||||
$types = getParam('types'); |
||||
switch($types) // 根据请求的 Api，执行相应操作 |
||||
{ |
||||
case 'url': // 获取歌曲链接 |
||||
$id = getParam('id'); // 歌曲ID |
||||
|
||||
$data = $API->url($id); |
||||
|
||||
echojson($data); |
||||
break; |
||||
|
||||
case 'pic': // 获取歌曲链接 |
||||
$id = getParam('id'); // 歌曲ID |
||||
|
||||
$data = $API->pic($id); |
||||
|
||||
echojson($data); |
||||
break; |
||||
|
||||
case 'lyric': // 获取歌词 |
||||
$id = getParam('id'); // 歌曲ID |
||||
|
||||
if(($source == 'netease') && defined('CACHE_PATH')) { |
||||
$cache = CACHE_PATH.$source.'_'.$types.'_'.$id.'.json'; |
||||
|
||||
if(file_exists($cache)) { // 缓存存在，则读取缓存 |
||||
$data = file_get_contents($cache); |
||||
} else { |
||||
$data = $API->lyric($id); |
||||
|
||||
// 只缓存链接获取成功的歌曲 |
||||
if(json_decode($data)->lyric !== '') { |
||||
file_put_contents($cache, $data); |
||||
} |
||||
} |
||||
} else { |
||||
$data = $API->lyric($id); |
||||
} |
||||
|
||||
echojson($data); |
||||
break; |
||||
|
||||
case 'download': // 下载歌曲(弃用) |
||||
$fileurl = getParam('url'); // 链接 |
||||
|
||||
header('location:$fileurl'); |
||||
exit(); |
||||
break; |
||||
|
||||
case 'userlist': // 获取用户歌单列表 |
||||
$uid = getParam('uid'); // 用户ID |
||||
|
||||
$url= 'http://music.163.com/api/user/playlist/?offset=0&limit=1001&uid='.$uid; |
||||
$data = file_get_contents($url); |
||||
|
||||
echojson($data); |
||||
break; |
||||
|
||||
case 'playlist': // 获取歌单中的歌曲 |
||||
$id = getParam('id'); // 歌单ID |
||||
|
||||
if(($source == 'netease') && defined('CACHE_PATH')) { |
||||
$cache = CACHE_PATH.$source.'_'.$types.'_'.$id.'.json'; |
||||
|
||||
if(file_exists($cache) && (date("Ymd", filemtime($cache)) == date("Ymd"))) { // 缓存存在，则读取缓存 |
||||
$data = file_get_contents($cache); |
||||
} else { |
||||
$data = $API->format(false)->playlist($id); |
||||
|
||||
// 只缓存链接获取成功的歌曲 |
||||
if(isset(json_decode($data)->playlist->tracks)) { |
||||
file_put_contents($cache, $data); |
||||
} |
||||
} |
||||
} else { |
||||
$data = $API->format(false)->playlist($id); |
||||
} |
||||
|
||||
echojson($data); |
||||
break; |
||||
|
||||
case 'search': // 搜索歌曲 |
||||
$s = getParam('name'); // 歌名 |
||||
$limit = getParam('count', 20); // 每页显示数量 |
||||
$pages = getParam('pages', 1); // 页码 |
||||
|
||||
$data = $API->search($s, [ |
||||
'page' => $pages, |
||||
'limit' => $limit |
||||
]); |
||||
|
||||
echojson($data); |
||||
break; |
||||
|
||||
default: |
||||
echo '<!doctype html><html><head><meta charset="utf-8"><title>信息</title><style>* {font-family: microsoft yahei}</style></head><body> <h2>MKOnlinePlayer</h2><h3>Github: https://github.com/mengkunsoft/MKOnlineMusicPlayer</h3><br>'; |
||||
if(!defined('DEBUG') || DEBUG !== true) { // 非调试模式 |
||||
echo '<p>Api 调试模式已关闭</p>'; |
||||
} else { |
||||
echo '<p><font color="red">您已开启 Api 调试功能，正常使用时请在 api.php 中关闭该选项！</font></p><br>'; |
||||
|
||||
echo '<p>PHP 版本：'.phpversion().' （本程序要求 PHP 5.4+）</p><br>'; |
||||
|
||||
echo '<p>服务器函数检查</p>'; |
||||
echo '<p>curl_exec: '.checkfunc('curl_exec',true).' （用于获取音乐数据）</p>'; |
||||
echo '<p>file_get_contents: '.checkfunc('file_get_contents',true).' （用于获取音乐数据）</p>'; |
||||
echo '<p>json_decode: '.checkfunc('json_decode',true).' （用于后台数据格式化）</p>'; |
||||
echo '<p>hex2bin: '.checkfunc('hex2bin',true).' （用于数据解析）</p>'; |
||||
echo '<p>openssl_encrypt: '.checkfunc('openssl_encrypt',true).' （用于数据解析）</p>'; |
||||
} |
||||
|
||||
echo '</body></html>'; |
||||
} |
||||
|
||||
/** |
||||
* 创建多层文件夹 |
||||
* @param $dir 路径 |
||||
*/ |
||||
function createFolders($dir) { |
||||
return is_dir($dir) or (createFolders(dirname($dir)) and mkdir($dir, 0755)); |
||||
} |
||||
|
||||
/** |
||||
* 检测服务器函数支持情况 |
||||
* @param $f 函数名 |
||||
* @param $m 是否为必须函数 |
||||
* @return |
||||
*/ |
||||
function checkfunc($f,$m = false) { |
||||
if (function_exists($f)) { |
||||
return '<font color="green">可用</font>'; |
||||
} else { |
||||
if ($m == false) { |
||||
return '<font color="black">不支持</font>'; |
||||
} else { |
||||
return '<font color="red">不支持</font>'; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* 获取GET或POST过来的参数 |
||||
* @param $key 键值 |
||||
* @param $default 默认值 |
||||
* @return 获取到的内容（没有则为默认值） |
||||
*/ |
||||
function getParam($key, $default='') |
||||
{ |
||||
return trim($key && is_string($key) ? (isset($_POST[$key]) ? $_POST[$key] : (isset($_GET[$key]) ? $_GET[$key] : $default)) : $default); |
||||
} |
||||
|
||||
/** |
||||
* 输出一个json或jsonp格式的内容 |
||||
* @param $data 数组内容 |
||||
*/ |
||||
function echojson($data) //json和jsonp通用 |
||||
{ |
||||
header('Content-type: application/json'); |
||||
$callback = getParam('callback'); |
||||
|
||||
if(defined('HTTPS') && HTTPS === true && !defined('NO_HTTPS')) { // 替换链接为 https |
||||
$data = str_replace('http:\/\/', 'https:\/\/', $data); |
||||
$data = str_replace('http://', 'https://', $data); |
||||
} |
||||
|
||||
if($callback) //输出jsonp格式 |
||||
{ |
||||
die(htmlspecialchars($callback).'('.$data.')'); |
||||
} else { |
||||
die($data); |
||||
} |
||||
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,805 @@ |
||||
@charset "utf-8"; |
||||
/************************************************** |
||||
* MKOnlinePlayer v2.41 |
||||
* 播放器样式表文件 |
||||
* 编写：mengkun(https://mkblog.cn) |
||||
* 时间：2018-3-13 |
||||
*************************************************/ |
||||
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; |
||||
padding: 0 |
||||
} |
||||
body, button, input, select, textarea, th { |
||||
color: #333; |
||||
background-color: #fff; |
||||
font-size: 14px; |
||||
line-height: 1.5; |
||||
font-family: poppin, 'PingFang SC', Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif; |
||||
font-family: Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif/9 |
||||
} |
||||
h1, h2, h3, h4, h5, h6 { |
||||
font-size: 100% |
||||
} |
||||
li { |
||||
list-style: none |
||||
} |
||||
img { |
||||
border: 0 none; |
||||
-ms-interpolation-mode: bicubic; |
||||
image-rendering: optimizeQuality |
||||
} |
||||
input[type=button], input[type=submit] { |
||||
cursor: pointer |
||||
} |
||||
button { |
||||
cursor: pointer |
||||
} |
||||
table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0 |
||||
} |
||||
a { |
||||
color: #333; |
||||
text-decoration: none |
||||
} |
||||
a:hover { |
||||
color: #31c27c; |
||||
text-decoration: none |
||||
} |
||||
a:focus, button:focus, input:focus { |
||||
outline: 0 |
||||
} |
||||
.text-center {text-align: center;} |
||||
.clear-fix {zoom: 1;} |
||||
.clear-fix:before, .clear-fix:after {display: table;line-height: 0;content: "";} |
||||
.clear-fix:after {clear: both; } |
||||
.hidden {display: none !important;} |
||||
/*滚动条美化*/ |
||||
.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; |
||||
} |
||||
body { |
||||
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ba43a8+0,ea4fce+62,537bad+100&0.38+0,0.17+61,0.8+100 */ |
||||
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ |
||||
background: #000000; |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7f7280', endColorstr='#000000'); |
||||
background-image: -webkit-linear-gradient(200deg, #7f7280, #000000); |
||||
background-image: -moz-linear-gradient(200deg, #7f7280, #000000); |
||||
background-image: -o-linear-gradient(200deg, #7f7280, #000000); |
||||
background-image: -ms-linear-gradient(200deg, #7f7280, #000000); |
||||
background-image: linear-gradient(200deg, #7f7280, #000000); |
||||
|
||||
overflow: hidden; |
||||
} |
||||
/* 模糊图像层 */ |
||||
#blur-img { |
||||
position: fixed; |
||||
height: 100%; |
||||
left: -10%; |
||||
width: 120%; |
||||
overflow: hidden; |
||||
} |
||||
/* 移动端使用的模糊图像层 */ |
||||
#mobile-blur { |
||||
-webkit-filter: blur(50px); |
||||
filter: blur(50px); |
||||
-webkit-transform: scale(1.15); |
||||
transform: scale(1.15); |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
z-index: 1; |
||||
width: 100%; |
||||
background-size: cover; |
||||
background-position: bottom center; |
||||
} |
||||
/* 图像遮罩层 */ |
||||
.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; |
||||
} |
||||
|
||||
.mobile-mask { |
||||
filter:alpha(opacity=60); |
||||
-moz-opacity:0.6; |
||||
opacity:0.6; |
||||
} |
||||
|
||||
#mkplayer{ |
||||
display: none; |
||||
} |
||||
.header { |
||||
height: 50px; |
||||
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; |
||||
cursor: pointer; |
||||
margin: 10px 20px; |
||||
} |
||||
.logo:hover { |
||||
color: #fff; |
||||
} |
||||
|
||||
/* 宽度约束容器 */ |
||||
.container{ |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
max-width: 1200px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
/* 中部主要容器 */ |
||||
.center{ |
||||
position: absolute; |
||||
width: 100%; |
||||
top: 50px; |
||||
bottom: 100px; |
||||
} |
||||
|
||||
/* 顶部按钮条 */ |
||||
.btn-bar { |
||||
position: absolute; |
||||
display: inline-block; |
||||
left: 0; |
||||
right: 400px; |
||||
height: 55px; |
||||
} |
||||
|
||||
|
||||
/* 顶部按钮区域 */ |
||||
.btn-box { |
||||
position: absolute; |
||||
top: 10px; |
||||
bottom: 10px; |
||||
left: 10px; |
||||
right: 10px; |
||||
} |
||||
/* 常规按钮 */ |
||||
.btn { |
||||
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; |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
user-select: none; |
||||
display: inline-block; |
||||
position: relative; |
||||
border-radius: 2px; |
||||
border: 1px solid #fff; |
||||
border: 1px solid rgba(150,150,150,.5); |
||||
color: #fff; |
||||
opacity: .8; |
||||
filter: alpha(opacity=80); |
||||
cursor: pointer; |
||||
font-size: 14px; |
||||
padding: 6px 25px; |
||||
margin: 0 2px; |
||||
} |
||||
.btn:hover { |
||||
border: 1px solid #fff; |
||||
opacity: 1; |
||||
filter: alpha(opacity=100); |
||||
} |
||||
.btn[data-action='player'] { |
||||
display: none; |
||||
} |
||||
|
||||
/* 搜索工具样式 */ |
||||
#search-area { |
||||
padding: 25px 15px; |
||||
} |
||||
.search-group { |
||||
font-size: 0; |
||||
padding-bottom: 10px; |
||||
} |
||||
.search-group>input, .search-group>button { |
||||
-webkit-box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
} |
||||
.search-group>input { |
||||
padding: 5px; |
||||
border: 1px solid #a7a1a1; |
||||
height: 35px; |
||||
width: 80%; |
||||
} |
||||
.search-group>button { |
||||
border: 1px solid #a7a1a1; |
||||
background-color: #eee; |
||||
height: 35px; |
||||
margin-left: -1px; |
||||
width: 20%; |
||||
white-space: nowrap; |
||||
text-overflow: clip; |
||||
overflow: hidden; |
||||
} |
||||
.radio-group>label { |
||||
margin-right: 10px; |
||||
cursor: pointer; |
||||
} |
||||
.radio-group>label>input { |
||||
vertical-align: -2px; |
||||
} |
||||
|
||||
/* 左侧主体数据区 */ |
||||
.data-area { |
||||
position: absolute; |
||||
left: 0; |
||||
right: 400px; |
||||
top: 60px; |
||||
bottom: 0; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
/* 数据区域容器 */ |
||||
.data-box { |
||||
position: absolute; |
||||
left: 10px; |
||||
right: 10px; |
||||
top: 10px; |
||||
bottom: 10px; |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
/*以下是播放列表 css 样式*/ |
||||
/* 列表头 */ |
||||
.list-head { |
||||
height: 40px; |
||||
} |
||||
|
||||
/* 一项数据 */ |
||||
.list-item { |
||||
width: 100%; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
color: #bdbdbe; |
||||
color: rgba(225,225,225,.8); |
||||
font-size: 14px; |
||||
overflow: hidden; |
||||
border-bottom: 1px solid rgba(150,150,150,.1); |
||||
cursor: default; |
||||
position: relative; |
||||
} |
||||
|
||||
/* 正在播放的那项 */ |
||||
.list-playing { |
||||
color: #fff; |
||||
} |
||||
|
||||
/* 列表数字 */ |
||||
.list-num { |
||||
display: block; |
||||
width: 30px; |
||||
text-align: center; |
||||
float: left; |
||||
overflow: hidden; |
||||
} |
||||
/* 正在播放的那项数字 */ |
||||
.list-playing .list-num { |
||||
background: url("../images/wave.gif") 10px 20px no-repeat; |
||||
text-indent: -99px; |
||||
} |
||||
|
||||
/* 音乐名字 */ |
||||
.music-name { |
||||
position: relative; |
||||
display: block; |
||||
width: auto; |
||||
margin-left: 40px; |
||||
margin-right: 300px; |
||||
height: 100%; |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; /*禁止双击选定*/ |
||||
-ms-user-select: none; |
||||
-o-user-select: none; |
||||
user-select: none; |
||||
} |
||||
/* 鼠标滑过时音乐名字被截断 */ |
||||
.music-name-cult { |
||||
display: block; |
||||
word-break: keep-all; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.list-item:hover .music-name-cult { |
||||
padding-right: 150px; |
||||
} |
||||
.list-playing:hover .music-name-cult { |
||||
padding-right: 100px; |
||||
} |
||||
/* 作者名称与音乐专辑 */ |
||||
.auth-name,.music-album { |
||||
position: relative; |
||||
display: block; |
||||
width: 150px; |
||||
float: right; |
||||
height: 100%; |
||||
word-break: keep-all; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
/* 移动端的菜单图标 */ |
||||
.list-mobile-menu { |
||||
display: none; |
||||
} |
||||
|
||||
/*列表中滑动出现的菜单*/ |
||||
.list-menu { |
||||
position: absolute; |
||||
right: 10px; |
||||
top: 50%; |
||||
overflow: hidden; |
||||
font-size: 0; |
||||
height: 36px; |
||||
margin-top: -18px; |
||||
float: right; |
||||
display: none; |
||||
} |
||||
.list-item:hover .list-menu { |
||||
display: block; |
||||
} |
||||
.list-head:hover .list-menu { |
||||
display: none; |
||||
} |
||||
|
||||
/* 列表中滑动出现的小图标 */ |
||||
.list-icon { |
||||
display: block; |
||||
width: 36px; |
||||
height: 36px; |
||||
background-image: url("../images/icon_list_menu.png"); |
||||
float: left; |
||||
margin-left: 10px; |
||||
cursor: pointer; |
||||
} |
||||
.list-playing .icon-play{ |
||||
display: none; |
||||
} |
||||
.icon-play { |
||||
background-position: -80px 0; |
||||
} |
||||
.icon-play:hover { |
||||
background-position: -120px 0; |
||||
} |
||||
.icon-download { |
||||
background-position: -80px -120px; |
||||
} |
||||
.icon-download:hover { |
||||
background-position: -120px -120px; |
||||
} |
||||
.icon-share { |
||||
background-position: -80px -40px; |
||||
} |
||||
.icon-share:hover { |
||||
background-position: -120px -40px; |
||||
} |
||||
|
||||
/* 分享弹窗中的链接框 */ |
||||
.share-url { |
||||
width: 100%; |
||||
margin-top: 10px; |
||||
margin-bottom: 10px; |
||||
line-height: 30px; |
||||
box-sizing: border-box; |
||||
padding: 0 5px; |
||||
border: 1px solid #ccc; |
||||
box-shadow: 1px 1px 5px rgba(0,0,0,.1) inset; |
||||
color: #333; |
||||
height: 35px; |
||||
} |
||||
.share-tips { |
||||
font-size: 12px; |
||||
color: #a9a9a9; |
||||
} |
||||
|
||||
/* 列表中可以被点击的横条 */ |
||||
.list-clickable { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
/* 以下是歌单 css 样式 */ |
||||
/* 歌单中的一项 */ |
||||
.sheet-item { |
||||
position: relative; |
||||
display: block; |
||||
width: 25%; |
||||
float: left; |
||||
text-align: center; |
||||
} |
||||
/* 歌单封面 */ |
||||
.sheet-cover { |
||||
display: block; |
||||
width: 100px; |
||||
height: 100px; |
||||
margin: 10px auto; |
||||
cursor: pointer; |
||||
} |
||||
/* 正在播放的列表 */ |
||||
.sheet-playing:before { |
||||
content: url(../images/wave.gif); |
||||
position: absolute; |
||||
top: 90px; |
||||
left: 50%; |
||||
margin-left: -45px; |
||||
} |
||||
|
||||
/* 歌单名字 */ |
||||
.sheet-name { |
||||
/*padding: 0 5px;*/ |
||||
display: inline-block; |
||||
max-width: 120px; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
-o-text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
margin-bottom: 10px; |
||||
color: #fff; |
||||
cursor: pointer; |
||||
font-size: 12px; |
||||
} |
||||
/* 播放列表分割标题栏 */ |
||||
.sheet-title-bar { |
||||
border-radius: 2px; |
||||
margin: 20px 0; |
||||
text-align: center; |
||||
line-height: 40px; |
||||
height: 40px; |
||||
color: #C5C5C5; |
||||
background-color: rgba(0, 0, 0, 0.12); |
||||
} |
||||
.login-btn { |
||||
cursor: pointer; |
||||
} |
||||
.login-btn:hover { |
||||
color: #31c27c; |
||||
} |
||||
|
||||
/* 以下是界面右侧 css 样式 */ |
||||
/* 播放器主体(歌词和封面) */ |
||||
.player { |
||||
height: 100%; |
||||
width: 400px; |
||||
float: right; |
||||
position: relative; |
||||
} |
||||
|
||||
/* 歌曲封面区域 */ |
||||
.cover { |
||||
position: relative; |
||||
display: block; |
||||
width: 186px; |
||||
height: 186px; |
||||
margin: auto; |
||||
} |
||||
|
||||
.cover:after { |
||||
content: ""; |
||||
position: absolute; |
||||
left: 9px; |
||||
top: 0; |
||||
width: 201px; |
||||
height: 180px; |
||||
background: url(../images/album_cover_player.png) 0 0 no-repeat; |
||||
pointer-events: none; |
||||
} |
||||
/* 歌曲封面图片 */ |
||||
.music-cover { |
||||
vertical-align: middle; |
||||
width: 186px; |
||||
height: 186px; |
||||
} |
||||
|
||||
/* 歌词显示区域 */ |
||||
.lyric { |
||||
position: absolute; |
||||
left: 10px; |
||||
right: 10px; |
||||
top: 195px; |
||||
bottom: 10px; |
||||
overflow: hidden; |
||||
text-align: center; |
||||
color: #bdbdbe; |
||||
color: rgba(225,225,225,.8); |
||||
line-height: 28px; |
||||
padding: 20px 0; |
||||
} |
||||
/* 歌词ul */ |
||||
#lyric { |
||||
position: absolute; |
||||
width: 100%; |
||||
top: 0; |
||||
bottom: 0; |
||||
overflow: hidden; |
||||
} |
||||
#lyric>li { |
||||
word-break: keep-all; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
/* 正在播放的那一句歌词 */ |
||||
#lyric .lplaying { |
||||
color: #31c27c; |
||||
} |
||||
/* 歌词显示区显示的提示语(如加载中、无歌词等) */ |
||||
.lyric-tip { |
||||
position: absolute; |
||||
width: 100%; |
||||
top: 50%; |
||||
} |
||||
|
||||
/* 歌曲信息按钮 */ |
||||
#music-info { |
||||
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; |
||||
position: absolute; |
||||
width: 27px; |
||||
height: 26px; |
||||
border-radius: 13px; |
||||
right: 10px; |
||||
bottom: 10px; |
||||
cursor: pointer; |
||||
color: #fff; |
||||
text-align: center; |
||||
line-height: 26px; |
||||
font-weight: bold; |
||||
background-image: url(../images/player.png); |
||||
background-position: -28px -367px; |
||||
background-color: #353535; |
||||
opacity: 0.3; |
||||
filter: Alpha(opacity=30); |
||||
} |
||||
#music-info:hover { |
||||
opacity: 1; |
||||
filter: Alpha(opacity=100); |
||||
} |
||||
/* 标题 */ |
||||
.info-title { |
||||
color: #B2AFAF |
||||
} |
||||
.info-btn { |
||||
cursor: pointer; |
||||
color: #31c27c; |
||||
} |
||||
.info-btn:hover { |
||||
text-decoration: underline; |
||||
} |
||||
/* 底部 */ |
||||
.footer { |
||||
height: 100px; |
||||
bottom: 0; |
||||
width: 100%; |
||||
position: absolute; |
||||
} |
||||
|
||||
/* 带图片的按钮 */ |
||||
.player-btn { |
||||
background-image: url("../images/player.png"); |
||||
opacity: .8; |
||||
filter: alpha(opacity=80) |
||||
} |
||||
.player-btn:hover { |
||||
opacity: 1; |
||||
filter: alpha(opacity=100) |
||||
} |
||||
/* 暂停状态 */ |
||||
.btn-state-paused { |
||||
background-position: -30px 0; |
||||
} |
||||
/* 控制按钮(上一首、播放、下一首)区域 */ |
||||
.con-btn { |
||||
float: left; |
||||
width: 130px; |
||||
height: 100%; |
||||
position: relative; |
||||
margin: 0 10px; |
||||
} |
||||
.con-btn a{ |
||||
display: inline-block; |
||||
position: absolute; |
||||
top: 50%; |
||||
} |
||||
.btn-prev{ |
||||
background-position: 0 -30px; |
||||
width: 19px; |
||||
height: 20px; |
||||
margin-top: -10px; |
||||
} |
||||
|
||||
.btn-play{ |
||||
width: 19px; |
||||
height: 29px; |
||||
margin-top: -14.5px; |
||||
left: 36%; |
||||
margin-left: -10.5px; |
||||
} |
||||
.btn-next{ |
||||
background-position: 0 -52px; |
||||
right: 30%; |
||||
width: 19px; |
||||
height: 20px; |
||||
margin-top: -10px; |
||||
} |
||||
.btn-order{ |
||||
background-position: 0 -173px; |
||||
background-size: 450%; |
||||
right: 0; |
||||
width: 25px; |
||||
height: 25px; |
||||
margin-top: -10px; |
||||
} |
||||
.btn-order-single { |
||||
background-position: 0 -196px; |
||||
} |
||||
.btn-order-list { |
||||
background-position: 0 -173px; |
||||
} |
||||
.btn-order-random { |
||||
background-position: 0 -62px; |
||||
height: 18px; |
||||
margin-top: -9px; |
||||
} |
||||
|
||||
/* 音乐进度条区域 */ |
||||
.progress { |
||||
width: auto; |
||||
margin-left: 150px; |
||||
margin-right: 200px; |
||||
height: 100%; |
||||
position: relative; |
||||
} |
||||
|
||||
/* 限制进度条的盒子 */ |
||||
.progress-box { |
||||
position: absolute; |
||||
height: 20px; |
||||
left: 10px; |
||||
right: 0; |
||||
top: 50%; |
||||
margin-top: -9px; |
||||
} |
||||
|
||||
/* 音量控制区域 */ |
||||
.vol { |
||||
float: right; |
||||
width: 200px; |
||||
height: 100%; |
||||
right: 0; |
||||
position: relative; |
||||
} |
||||
|
||||
.quiet { |
||||
width: 60px; |
||||
height: 100%; |
||||
position: relative; |
||||
float: left; |
||||
} |
||||
.btn-quiet{ |
||||
display: inline-block; |
||||
position: absolute; |
||||
width: 26px; |
||||
height: 21px; |
||||
top: 50%; |
||||
right: 0; |
||||
margin-top: -10px; |
||||
background-position: 0 -144px; |
||||
} |
||||
.btn-state-quiet { |
||||
background-position: 0 -182px; |
||||
} |
||||
.volume { |
||||
position: relative; |
||||
margin-left: 60px; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
} |
||||
/* 限制声音进度条的盒子 */ |
||||
.volume-box { |
||||
position: absolute; |
||||
height: 20px; |
||||
left: 10px; |
||||
right: 10px; |
||||
top: 50%; |
||||
margin-top: -10px; |
||||
} |
||||
|
||||
/* 以下是孟坤进度条控件样式区域 */ |
||||
/* 进度条可点击区域 */ |
||||
.mkpgb-area { |
||||
position: relative; |
||||
cursor: pointer; |
||||
height: 100%; |
||||
} |
||||
/* 进度条有背景区域 */ |
||||
.mkpgb-bar { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 0; |
||||
right: 0; |
||||
height: 2px; |
||||
margin-top: -1px; |
||||
border-radius: 2px; |
||||
background-color: #808284; |
||||
overflow: hidden; |
||||
} |
||||
/* 进度条已完成区域 */ |
||||
.mkpgb-cur { |
||||
position: absolute; |
||||
background-color: #D8D8D8; |
||||
width: 0; |
||||
height: 2px; |
||||
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 { |
||||
width: 10px; |
||||
height: 10px; |
||||
background-color: #fff; |
||||
border-radius: 5px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
left: 0px; |
||||
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: 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;}} |
||||
@ -0,0 +1,183 @@ |
||||
@charset "utf-8"; |
||||
/************************************************** |
||||
* MKOnlinePlayer v2.31 |
||||
* 小屏幕样式修复 |
||||
* 编写：mengkun(http://mkblog.cn) |
||||
* 时间：2017-9-13 |
||||
*************************************************/ |
||||
|
||||
/* 小于 900px 采用这个样式 */ |
||||
@media screen and (max-width: 900px) { |
||||
/*隐藏头部logo*/ |
||||
.header { |
||||
display: none; |
||||
} |
||||
/*中部顶格*/ |
||||
.center { |
||||
top: 0; |
||||
} |
||||
|
||||
/* 调出播放器按钮 */ |
||||
.btn[data-action='player'] { |
||||
display: inline-block; |
||||
} |
||||
|
||||
/* 按钮工具条区域 */ |
||||
.btn-bar { |
||||
height: 35px; |
||||
right: 0; |
||||
z-index: 999; |
||||
} |
||||
.btn-box { |
||||
background-color: #000; |
||||
background-color: rgba(0, 0, 0, 0.12); |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
} |
||||
.btn { |
||||
margin: 0; |
||||
padding: 0; |
||||
width: 25%; |
||||
height: 100%; |
||||
display: block; |
||||
float: left; |
||||
border: none; |
||||
text-align: center; |
||||
line-height: 35px; |
||||
color: #C5C5C5; |
||||
} |
||||
.btn:hover { |
||||
border: none; |
||||
} |
||||
.btn-box .active:after { |
||||
content: ''; |
||||
display: block; |
||||
border-bottom: 3px solid #A2A0A0; |
||||
margin-top: -3px; |
||||
} |
||||
|
||||
/* 中部容器区域 */ |
||||
.data-area { |
||||
top: 40px; |
||||
} |
||||
|
||||
/*数据区域占满整个屏幕*/ |
||||
.data-area { |
||||
right: 0; |
||||
} |
||||
|
||||
|
||||
/*列表菜单不显示*/ |
||||
.list-menu { |
||||
display: none!important; |
||||
} |
||||
.music-name-cult { |
||||
padding-right: 0!important; |
||||
} |
||||
|
||||
/* 专辑区域腾出位置 */ |
||||
.music-album { |
||||
margin-right: 30px; |
||||
} |
||||
/* 小屏幕的列表菜单 */ |
||||
.list-mobile-menu { |
||||
position: absolute; |
||||
display: block; |
||||
width: 30px; |
||||
height: 30px; |
||||
background-image: url(../images/player.png); |
||||
background-position: -30px -365px; |
||||
right: 0; |
||||
top: 50%; |
||||
-webkit-transform: translateY(-50%); |
||||
-moz-transform: translateY(-50%); |
||||
-ms-transform: translateY(-50%); |
||||
-o-transform: translateY(-50%); |
||||
transform: translateY(-50%); |
||||
z-index: 2; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
/*控制按钮区域缩小*/ |
||||
.con-btn { |
||||
width: 120px; |
||||
} |
||||
/*进度条调整*/ |
||||
.progress { |
||||
width: auto; |
||||
margin-left: 130px; |
||||
margin-right: 10px; |
||||
height: 100%; |
||||
position: relative; |
||||
} |
||||
/*音量控制区域隐藏*/ |
||||
.vol { |
||||
display: none; |
||||
} |
||||
|
||||
/*隐藏右侧歌词及封面*/ |
||||
.player { |
||||
display: none; |
||||
width: 100%; |
||||
} |
||||
.cover { |
||||
margin-top: 60px; |
||||
} |
||||
#lyric { |
||||
overflow-x: hidden; |
||||
overflow-y: auto; |
||||
} |
||||
.lyric { |
||||
top: 260px; |
||||
} |
||||
} |
||||
|
||||
/* 小于 620px 采用这个样式 */ |
||||
@media screen and (max-width: 620px) { |
||||
/*专辑信息不显示*/ |
||||
.music-album { |
||||
display: none; |
||||
} |
||||
/*歌手名字*/ |
||||
.auth-name { |
||||
width: 35%; |
||||
padding-right: 30px; |
||||
box-sizing: border-box; |
||||
} |
||||
/*音乐名字拉长*/ |
||||
.music-name { |
||||
margin-right: 35%; |
||||
} |
||||
} |
||||
|
||||
/* 小于 500px 采用这个样式 */ |
||||
@media screen and (max-width: 500px) { |
||||
.center { |
||||
bottom: 60px; |
||||
} |
||||
/* 歌单封面 */ |
||||
.sheet-item { |
||||
width: 33.33%; |
||||
} |
||||
/* 歌单名字 */ |
||||
.sheet-name { |
||||
max-width: 100px; |
||||
} |
||||
.cover { |
||||
margin-top: 50px; |
||||
} |
||||
.footer { |
||||
height: 60px; |
||||
} |
||||
} |
||||
|
||||
/* 小于 350px 采用这个样式 */ |
||||
@media screen and (max-width: 350px) { |
||||
/* 歌单封面 */ |
||||
.sheet-item { |
||||
width: 50%; |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 622 B |
@ -0,0 +1,155 @@ |
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"> |
||||
<meta name="renderer" content="webkit"> |
||||
<meta name="author" content="mengkun"> |
||||
<meta name="generator" content="KodCloud"> |
||||
<meta http-equiv="Cache-Control" content="no-siteapp"> |
||||
|
||||
<!-- 强制移动设备以app模式打开页面(即在移动设备下全屏，仅支持部分浏览器) --> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-touch-fullscreen" content="yes"> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
||||
<meta name="full-screen" content="yes"><!--UC强制全屏--> |
||||
<meta name="browsermode" content="application"><!--UC应用模式--> |
||||
<meta name="x5-fullscreen" content="true"><!--QQ强制全屏--> |
||||
<meta name="x5-page-mode" content="app"><!--QQ应用模式--> |
||||
|
||||
<title>MKOnlinePlayer v2.4</title> |
||||
<meta name="description" content="一款开源的基于网易云音乐api的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人音乐播放列表同步等功能。"/> |
||||
<meta name="keywords" content="孟坤播放器,在线音乐播放器,MKOnlinePlayer,网易云音乐,音乐api,音乐播放器源代码"/> |
||||
|
||||
<!-- 不支持IE8及以下版本浏览器 --> |
||||
<!--[if lte IE 8]> |
||||
<script>window.location.href="plugns/killie/"</script> |
||||
<![endif]--> |
||||
|
||||
<!-- favicon图标 --> |
||||
<link rel="shortcut icon" href="favicon.ico"> |
||||
|
||||
<!-- jQuery文件 --> |
||||
<script src="js/jquery.min.js"></script> |
||||
|
||||
<!-- 播放器样式表文件 --> |
||||
<link rel="stylesheet" type="text/css" href="css/player.css"> |
||||
|
||||
<!-- 小屏幕样式修复 --> |
||||
<link rel="stylesheet" type="text/css" href="css/small.css"> |
||||
|
||||
<!-- 滚动条美化样式文件 --> |
||||
<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.min.css"> |
||||
|
||||
<!-- layer弹窗插件样式文件 --> |
||||
<link rel="stylesheet" href="plugns/layer/skin/default/layer.css?v=3.0.2302" id="layuicss-skinlayercss"> |
||||
</head> |
||||
<body> |
||||
|
||||
<div id="blur-img"></div> |
||||
|
||||
<!-- 头部logo --> |
||||
<div class="header"> |
||||
<div class="logo" title="Version 2.4; Based on Meting; Powered by Mengkun"> |
||||
♫ MKOnlinePlayer |
||||
</div> |
||||
</div> <!--class="header"--> |
||||
|
||||
<!-- 中间主体区域 --> |
||||
<div class="center"> |
||||
<div class="container"> |
||||
<div class="btn-bar"> |
||||
<!-- tab按钮区 --> |
||||
<div class="btn-box" id="btn-area"> |
||||
<span class="btn" data-action="player" hidden>播放器</span> |
||||
<span class="btn" data-action="playing" title="正在播放列表">正在播放</span> |
||||
<span class="btn" data-action="sheet" title="音乐播放列表">播放列表</span> |
||||
<span class="btn" data-action="search" title="点击搜索音乐">歌曲搜索</span> |
||||
</div> |
||||
</div> <!--class="btn-bar"--> |
||||
|
||||
<div class="data-area"> |
||||
<!--歌曲歌单--> |
||||
<div id="sheet" class="data-box" hidden></div> |
||||
|
||||
<!--音乐播放列表--> |
||||
<div id="main-list" class="music-list data-box"></div> |
||||
</div> <!--class="data-area"--> |
||||
|
||||
<!-- 右侧封面及歌词展示 --> |
||||
<div class="player" id="player"> |
||||
<!--歌曲封面--> |
||||
<div class="cover"> |
||||
<img src="images/player_cover.png" class="music-cover" id="music-cover"> |
||||
</div> |
||||
<!--滚动歌词--> |
||||
<div class="lyric"> |
||||
<ul id="lyric"></ul> |
||||
</div> |
||||
<div id="music-info" title="点击查看歌曲信息"></div> |
||||
</div> |
||||
</div> <!--class="container"--> |
||||
</div> <!--class="center"--> |
||||
|
||||
<!-- 播放器底部区域 --> |
||||
<div class="footer"> |
||||
<div class="container"> |
||||
<div class="con-btn"> |
||||
<a href="javascript:;" class="player-btn btn-prev" title="上一首"></a> |
||||
<a href="javascript:;" class="player-btn btn-play" title="暂停/继续"></a> |
||||
<a href="javascript:;" class="player-btn btn-next" title="下一首"></a> |
||||
<a href="javascript:;" class="player-btn btn-order" title="循环控制"></a> |
||||
</div> <!--class="con-btn"--> |
||||
|
||||
<div class="vol"> |
||||
<div class="quiet"> |
||||
<a href="javascript:;" class="player-btn btn-quiet" title="静音"></a> |
||||
</div> |
||||
<div class="volume"> |
||||
<div class="volume-box"> |
||||
<div id="volume-progress" class="mkpgb-area"></div> |
||||
</div> |
||||
</div> |
||||
</div> <!--class="footer"--> |
||||
|
||||
<div class="progress"> |
||||
<div class="progress-box"> |
||||
<div id="music-progress" class="mkpgb-area"></div> |
||||
</div> |
||||
</div> <!--class="progress"--> |
||||
</div> <!--class="container"--> |
||||
</div> <!--class="footer"--> |
||||
|
||||
<!-- layer弹窗插件 --> |
||||
<script src="plugns/layer/layer.js"></script> |
||||
|
||||
<!-- 播放器数据加载模块 --> |
||||
<script src="js/ajax.js"></script> |
||||
|
||||
<!-- 播放器歌词解析模块 --> |
||||
<script src="js/lyric.js"></script> |
||||
|
||||
<!-- 音乐列表配置 --> |
||||
<script src="js/musicList.js"></script> |
||||
|
||||
<!-- 封装函数及ui交互模块 --> |
||||
<script src="js/functions.js"></script> |
||||
|
||||
<!-- 播放器主体功能模块 --> |
||||
<script src="js/player.js"></script> |
||||
|
||||
<!-- 滚动条美化插件 --> |
||||
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script> |
||||
|
||||
<!-- 背景模糊化插件 --> |
||||
<script src="js/background-blur.min.js"></script> |
||||
|
||||
<!-- 站长统计代码 --> |
||||
<span style="display: none"> |
||||
<!-- 各类统计代码都放在这里…… --> |
||||
|
||||
</span> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,394 @@ |
||||
/************************************************** |
||||
* MKOnlinePlayer v2.4 |
||||
* Ajax 后台数据交互请求模块 |
||||
* 编写：mengkun(https://mkblog.cn)
|
||||
* 时间：2018-3-11 |
||||
*************************************************/ |
||||
|
||||
// ajax加载搜索结果
|
||||
function ajaxSearch() { |
||||
if(rem.wd === ""){ |
||||
layer.msg('搜索内容不能为空', {anim:6}); |
||||
return false; |
||||
} |
||||
|
||||
if(rem.loadPage == 1) { // 弹出搜索提示
|
||||
var tmpLoading = layer.msg('搜索中', {icon: 16,shade: 0.01}); |
||||
} |
||||
|
||||
$.ajax({ |
||||
type: mkPlayer.method,
|
||||
url: mkPlayer.api,
|
||||
data: "types=search&count=" + mkPlayer.loadcount + "&source=" + rem.source + "&pages=" + rem.loadPage + "&name=" + rem.wd, |
||||
dataType : "jsonp", |
||||
complete: function(XMLHttpRequest, textStatus) { |
||||
if(tmpLoading) layer.close(tmpLoading); // 关闭加载中动画
|
||||
}, // complete
|
||||
success: function(jsonData){ |
||||
|
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) { |
||||
console.debug("搜索结果数：" + jsonData.length); |
||||
} |
||||
|
||||
if(rem.loadPage == 1) // 加载第一页，清空列表
|
||||
{ |
||||
if(jsonData.length === 0) // 返回结果为零
|
||||
{ |
||||
layer.msg('没有找到相关歌曲', {anim:6}); |
||||
return false; |
||||
} |
||||
musicList[0].item = []; |
||||
rem.mainList.html(''); // 清空列表中原有的元素
|
||||
addListhead(); // 加载列表头
|
||||
} else { |
||||
$("#list-foot").remove(); //已经是加载后面的页码了，删除之前的“加载更多”提示
|
||||
} |
||||
|
||||
if(jsonData.length === 0) |
||||
{ |
||||
addListbar("nomore"); // 加载完了
|
||||
return false; |
||||
} |
||||
|
||||
var tempItem = [], no = musicList[0].item.length; |
||||
|
||||
for (var i = 0; i < jsonData.length; i++) { |
||||
no ++; |
||||
tempItem = { |
||||
id: jsonData[i].id, // 音乐ID
|
||||
name: jsonData[i].name, // 音乐名字
|
||||
artist: jsonData[i].artist[0], // 艺术家名字
|
||||
album: jsonData[i].album, // 专辑名字
|
||||
source: jsonData[i].source, // 音乐来源
|
||||
url_id: jsonData[i].url_id, // 链接ID
|
||||
pic_id: jsonData[i].pic_id, // 封面ID
|
||||
lyric_id: jsonData[i].lyric_id, // 歌词ID
|
||||
pic: null, // 专辑图片
|
||||
url: null // mp3链接
|
||||
}; |
||||
musicList[0].item.push(tempItem); // 保存到搜索结果临时列表中
|
||||
addItem(no, tempItem.name, tempItem.artist, tempItem.album); // 在前端显示
|
||||
} |
||||
|
||||
rem.dislist = 0; // 当前显示的是搜索列表
|
||||
rem.loadPage ++; // 已加载的列数+1
|
||||
|
||||
dataBox("list"); // 在主界面显示出播放列表
|
||||
refreshList(); // 刷新列表，添加正在播放样式
|
||||
|
||||
if(no < mkPlayer.loadcount) { |
||||
addListbar("nomore"); // 没加载满，说明已经加载完了
|
||||
} else { |
||||
addListbar("more"); // 还可以点击加载更多
|
||||
} |
||||
|
||||
if(rem.loadPage == 2) listToTop(); // 播放列表滚动到顶部
|
||||
}, //success
|
||||
error: function(XMLHttpRequest, textStatus, errorThrown) { |
||||
layer.msg('搜索结果获取失败 - ' + XMLHttpRequest.status); |
||||
console.error(XMLHttpRequest + textStatus + errorThrown); |
||||
} // error
|
||||
});//ajax
|
||||
} |
||||
|
||||
// 完善获取音乐信息
|
||||
// 音乐所在列表ID、音乐对应ID、回调函数
|
||||
function ajaxUrl(music, callback) |
||||
{ |
||||
// 已经有数据，直接回调
|
||||
if(music.url !== null && music.url !== "err" && music.url !== "") { |
||||
callback(music); |
||||
return true; |
||||
} |
||||
// id为空，赋值链接错误。直接回调
|
||||
if(music.id === null) { |
||||
music.url = "err"; |
||||
updateMinfo(music); // 更新音乐信息
|
||||
callback(music); |
||||
return true; |
||||
} |
||||
|
||||
$.ajax({
|
||||
type: mkPlayer.method,
|
||||
url: mkPlayer.api, |
||||
data: "types=url&id=" + music.id + "&source=" + music.source, |
||||
dataType : "jsonp", |
||||
success: function(jsonData){ |
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) { |
||||
console.debug("歌曲链接：" + jsonData.url); |
||||
} |
||||
|
||||
// 解决网易云音乐部分歌曲无法播放问题
|
||||
if(music.source == "netease") { |
||||
if(jsonData.url === "") { |
||||
jsonData.url = "https://music.163.com/song/media/outer/url?id=" + music.id + ".mp3"; |
||||
} else { |
||||
jsonData.url = jsonData.url.replace(/m7c.music./g, "m7.music."); |
||||
jsonData.url = jsonData.url.replace(/m8c.music./g, "m8.music."); |
||||
} |
||||
} else if(music.source == "baidu") { // 解决百度音乐防盗链
|
||||
jsonData.url = jsonData.url.replace(/http:\/\/zhangmenshiting.qianqian.com/g, "https://gss0.bdstatic.com/y0s1hSulBw92lNKgpU_Z2jR7b2w6buu"); |
||||
} |
||||
|
||||
if(jsonData.url === "") { |
||||
music.url = "err"; |
||||
} else { |
||||
music.url = jsonData.url; // 记录结果
|
||||
} |
||||
|
||||
updateMinfo(music); // 更新音乐信息
|
||||
|
||||
callback(music); // 回调函数
|
||||
return true; |
||||
}, //success
|
||||
error: function(XMLHttpRequest, textStatus, errorThrown) { |
||||
layer.msg('歌曲链接获取失败 - ' + XMLHttpRequest.status); |
||||
console.error(XMLHttpRequest + textStatus + errorThrown); |
||||
} // error
|
||||
}); //ajax
|
||||
|
||||
} |
||||
|
||||
// 完善获取音乐封面图
|
||||
// 包含音乐信息的数组、回调函数
|
||||
function ajaxPic(music, callback) |
||||
{ |
||||
// 已经有数据，直接回调
|
||||
if(music.pic !== null && music.pic !== "err" && music.pic !== "") { |
||||
callback(music); |
||||
return true; |
||||
} |
||||
// pic_id 为空，赋值链接错误。直接回调
|
||||
if(music.pic_id === null) { |
||||
music.pic = "err"; |
||||
updateMinfo(music); // 更新音乐信息
|
||||
callback(music); |
||||
return true; |
||||
} |
||||
|
||||
$.ajax({
|
||||
type: mkPlayer.method,
|
||||
url: mkPlayer.api, |
||||
data: "types=pic&id=" + music.pic_id + "&source=" + music.source, |
||||
dataType : "jsonp", |
||||
success: function(jsonData){ |
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) { |
||||
console.log("歌曲封面：" + jsonData.url); |
||||
} |
||||
|
||||
if(jsonData.url !== "") { |
||||
music.pic = jsonData.url; // 记录结果
|
||||
} else { |
||||
music.pic = "err"; |
||||
} |
||||
|
||||
updateMinfo(music); // 更新音乐信息
|
||||
|
||||
callback(music); // 回调函数
|
||||
return true; |
||||
}, //success
|
||||
error: function(XMLHttpRequest, textStatus, errorThrown) { |
||||
layer.msg('歌曲封面获取失败 - ' + XMLHttpRequest.status); |
||||
console.error(XMLHttpRequest + textStatus + errorThrown); |
||||
} // error
|
||||
}); //ajax
|
||||
|
||||
} |
||||
|
||||
// ajax加载用户歌单
|
||||
// 参数：歌单网易云 id, 歌单存储 id，回调函数
|
||||
function ajaxPlayList(lid, id, callback) { |
||||
if(!lid) return false; |
||||
|
||||
// 已经在加载了，跳过
|
||||
if(musicList[id].isloading === true) { |
||||
return true; |
||||
} |
||||
|
||||
musicList[id].isloading = true; // 更新状态：列表加载中
|
||||
|
||||
$.ajax({ |
||||
type: mkPlayer.method,
|
||||
url: mkPlayer.api,
|
||||
data: "types=playlist&id=" + lid, |
||||
dataType : "jsonp", |
||||
complete: function(XMLHttpRequest, textStatus) { |
||||
musicList[id].isloading = false; // 列表已经加载完了
|
||||
}, // complete
|
||||
success: function(jsonData){ |
||||
// 存储歌单信息
|
||||
var tempList = { |
||||
id: lid, // 列表的网易云 id
|
||||
name: jsonData.playlist.name, // 列表名字
|
||||
cover: jsonData.playlist.coverImgUrl, // 列表封面
|
||||
creatorName: jsonData.playlist.creator.nickname, // 列表创建者名字
|
||||
creatorAvatar: jsonData.playlist.creator.avatarUrl, // 列表创建者头像
|
||||
item: [] |
||||
}; |
||||
|
||||
if(jsonData.playlist.coverImgUrl !== '') { |
||||
tempList.cover = jsonData.playlist.coverImgUrl + "?param=200y200"; |
||||
} else { |
||||
tempList.cover = musicList[id].cover; |
||||
} |
||||
|
||||
if(typeof jsonData.playlist.tracks !== undefined || jsonData.playlist.tracks.length !== 0) { |
||||
// 存储歌单中的音乐信息
|
||||
for (var i = 0; i < jsonData.playlist.tracks.length; i++) { |
||||
tempList.item[i] = { |
||||
id: jsonData.playlist.tracks[i].id, // 音乐ID
|
||||
name: jsonData.playlist.tracks[i].name, // 音乐名字
|
||||
artist: jsonData.playlist.tracks[i].ar[0].name, // 艺术家名字
|
||||
album: jsonData.playlist.tracks[i].al.name, // 专辑名字
|
||||
source: "netease", // 音乐来源
|
||||
url_id: jsonData.playlist.tracks[i].id, // 链接ID
|
||||
pic_id: null, // 封面ID
|
||||
lyric_id: jsonData.playlist.tracks[i].id, // 歌词ID
|
||||
pic: jsonData.playlist.tracks[i].al.picUrl + "?param=300y300", // 专辑图片
|
||||
url: null // mp3链接
|
||||
}; |
||||
} |
||||
} |
||||
|
||||
// 歌单用户 id 不能丢
|
||||
if(musicList[id].creatorID) { |
||||
tempList.creatorID = musicList[id].creatorID; |
||||
if(musicList[id].creatorID === rem.uid) { // 是当前登录用户的歌单，要保存到缓存中
|
||||
var tmpUlist = playerReaddata('ulist'); // 读取本地记录的用户歌单
|
||||
if(tmpUlist) { // 读取到了
|
||||
for(i=0; i<tmpUlist.length; i++) { // 匹配歌单
|
||||
if(tmpUlist[i].id == lid) { |
||||
tmpUlist[i] = tempList; // 保存歌单中的歌曲
|
||||
playerSavedata('ulist', tmpUlist); // 保存
|
||||
break; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 存储列表信息
|
||||
musicList[id] = tempList; |
||||
|
||||
// 首页显示默认列表
|
||||
if(id == mkPlayer.defaultlist) loadList(id); |
||||
if(callback) callback(id); // 调用回调函数
|
||||
|
||||
// 改变前端列表
|
||||
$(".sheet-item[data-no='" + id + "'] .sheet-cover").attr('src', tempList.cover); // 专辑封面
|
||||
$(".sheet-item[data-no='" + id + "'] .sheet-name").html(tempList.name); // 专辑名字
|
||||
|
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) { |
||||
console.debug("歌单 [" +tempList.name+ "] 中的音乐获取成功"); |
||||
} |
||||
}, //success
|
||||
error: function(XMLHttpRequest, textStatus, errorThrown) { |
||||
layer.msg('歌单读取失败 - ' + XMLHttpRequest.status); |
||||
console.error(XMLHttpRequest + textStatus + errorThrown); |
||||
$(".sheet-item[data-no='" + id + "'] .sheet-name").html('<span style="color: #EA8383">读取失败</span>'); // 专辑名字
|
||||
} // error
|
||||
});//ajax
|
||||
} |
||||
|
||||
// ajax加载歌词
|
||||
// 参数：音乐ID，回调函数
|
||||
function ajaxLyric(music, callback) { |
||||
lyricTip('歌词加载中...'); |
||||
|
||||
if(!music.lyric_id) callback(''); // 没有歌词ID，直接返回
|
||||
|
||||
$.ajax({ |
||||
type: mkPlayer.method, |
||||
url: mkPlayer.api, |
||||
data: "types=lyric&id=" + music.lyric_id + "&source=" + music.source, |
||||
dataType : "jsonp", |
||||
success: function(jsonData){ |
||||
// 调试信息输出
|
||||
if (mkPlayer.debug) { |
||||
console.debug("歌词获取成功"); |
||||
} |
||||
|
||||
if (jsonData.lyric) { |
||||
callback(jsonData.lyric, music.lyric_id); // 回调函数
|
||||
} else { |
||||
callback('', music.lyric_id); // 回调函数
|
||||
} |
||||
}, //success
|
||||
error: function(XMLHttpRequest, textStatus, errorThrown) { |
||||
layer.msg('歌词读取失败 - ' + XMLHttpRequest.status); |
||||
console.error(XMLHttpRequest + textStatus + errorThrown); |
||||
callback('', music.lyric_id); // 回调函数
|
||||
} // error
|
||||
});//ajax
|
||||
} |
||||
|
||||
|
||||
// ajax加载用户的播放列表
|
||||
// 参数 用户的网易云 id
|
||||
function ajaxUserList(uid) |
||||
{ |
||||
var tmpLoading = layer.msg('加载中...', {icon: 16,shade: 0.01}); |
||||
$.ajax({ |
||||
type: mkPlayer.method, |
||||
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" || jsonData.code == 400){ |
||||
layer.msg('用户 uid 输入有误'); |
||||
return false; |
||||
} |
||||
|
||||
if(jsonData.playlist.length === 0 || typeof(jsonData.playlist.length) === "undefined") |
||||
{ |
||||
layer.msg('没找到用户 ' + uid + ' 的歌单'); |
||||
return false; |
||||
}else{ |
||||
var tempList,userList = []; |
||||
$("#sheet-bar").remove(); // 移除登陆条
|
||||
rem.uid = uid; // 记录已同步用户 uid
|
||||
rem.uname = jsonData.playlist[0].creator.nickname; // 第一个列表(喜欢列表)的创建者即用户昵称
|
||||
layer.msg('欢迎您 '+rem.uname); |
||||
// 记录登录用户
|
||||
playerSavedata('uid', rem.uid); |
||||
playerSavedata('uname', rem.uname); |
||||
|
||||
for (var i = 0; i < jsonData.playlist.length; i++) |
||||
{ |
||||
// 获取歌单信息
|
||||
tempList = { |
||||
id: jsonData.playlist[i].id, // 列表的网易云 id
|
||||
name: jsonData.playlist[i].name, // 列表名字
|
||||
cover: jsonData.playlist[i].coverImgUrl + "?param=200y200", // 列表封面
|
||||
creatorID: uid, // 列表创建者id
|
||||
creatorName: jsonData.playlist[i].creator.nickname, // 列表创建者名字
|
||||
creatorAvatar: jsonData.playlist[i].creator.avatarUrl, // 列表创建者头像
|
||||
item: [] |
||||
}; |
||||
// 存储并显示播放列表
|
||||
addSheet(musicList.push(tempList) - 1, tempList.name, tempList.cover); |
||||
userList.push(tempList); |
||||
} |
||||
playerSavedata('ulist', userList); |
||||
// 显示退出登录的提示条
|
||||
sheetBar(); |
||||
} |
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) { |
||||
console.debug("用户歌单获取成功 [用户网易云ID：" + uid + "]"); |
||||
} |
||||
}, //success
|
||||
error: function(XMLHttpRequest, textStatus, errorThrown) { |
||||
layer.msg('歌单同步失败 - ' + XMLHttpRequest.status); |
||||
console.error(XMLHttpRequest + textStatus + errorThrown); |
||||
} // 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); |
||||
@ -0,0 +1,882 @@ |
||||
/************************************************** |
||||
* MKOnlinePlayer v2.4 |
||||
* 封装函数及UI交互模块 |
||||
* 编写：mengkun(https://mkblog.cn)
|
||||
* 时间：2018-3-11 |
||||
*************************************************/ |
||||
// 判断是否是移动设备
|
||||
var isMobile = {
|
||||
Android: function() {
|
||||
return navigator.userAgent.match(/Android/i) ? true : false;
|
||||
},
|
||||
BlackBerry: function() {
|
||||
return navigator.userAgent.match(/BlackBerry/i) ? true : false;
|
||||
},
|
||||
iOS: function() {
|
||||
return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
|
||||
},
|
||||
Windows: function() {
|
||||
return navigator.userAgent.match(/IEMobile/i) ? true : false;
|
||||
},
|
||||
any: function() { |
||||
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
|
||||
} |
||||
}; |
||||
|
||||
$(function(){ |
||||
if(mkPlayer.debug) { |
||||
console.warn('播放器调试模式已开启，正常使用时请在 js/player.js 中按说明关闭调试模式'); |
||||
} |
||||
|
||||
rem.isMobile = isMobile.any(); // 判断是否是移动设备
|
||||
rem.webTitle = document.title; // 记录页面原本的标题
|
||||
rem.errCount = 0; // 连续播放失败的歌曲数归零
|
||||
|
||||
initProgress(); // 初始化音量条、进度条（进度条初始化要在 Audio 前，别问我为什么……）
|
||||
initAudio(); // 初始化 audio 标签，事件绑定
|
||||
|
||||
|
||||
if(rem.isMobile) { // 加了滚动条插件和没加滚动条插件所操作的对象是不一样的
|
||||
rem.sheetList = $("#sheet"); |
||||
rem.mainList = $("#main-list"); |
||||
} else { |
||||
// 滚动条初始化(只在非移动端启用滚动条控件)
|
||||
$("#main-list,#sheet").mCustomScrollbar({ |
||||
theme:"minimal", |
||||
advanced:{ |
||||
updateOnContentResize: true // 数据更新后自动刷新滚动条
|
||||
} |
||||
}); |
||||
|
||||
rem.sheetList = $("#sheet .mCSB_container"); |
||||
rem.mainList = $("#main-list .mCSB_container");
|
||||
} |
||||
|
||||
addListhead(); // 列表头
|
||||
addListbar("loading"); // 列表加载中
|
||||
|
||||
// 顶部按钮点击处理
|
||||
$(".btn").click(function(){ |
||||
switch($(this).data("action")) { |
||||
case "player": // 播放器
|
||||
dataBox("player"); |
||||
break; |
||||
case "search": // 搜索
|
||||
searchBox(); |
||||
break; |
||||
|
||||
case "playing": // 正在播放
|
||||
loadList(1); // 显示正在播放列表
|
||||
break; |
||||
|
||||
case "sheet": // 播放列表
|
||||
dataBox("sheet"); // 在主界面显示出音乐专辑
|
||||
break; |
||||
} |
||||
}); |
||||
|
||||
// 列表项双击播放
|
||||
$(".music-list").on("dblclick",".list-item", function() { |
||||
var num = parseInt($(this).data("no")); |
||||
if(isNaN(num)) return false; |
||||
listClick(num); |
||||
}); |
||||
|
||||
// 移动端列表项单击播放
|
||||
$(".music-list").on("click",".list-item", function() { |
||||
if(rem.isMobile) { |
||||
var num = parseInt($(this).data("no")); |
||||
if(isNaN(num)) return false; |
||||
listClick(num); |
||||
} |
||||
}); |
||||
|
||||
// 小屏幕点击右侧小点查看歌曲详细信息
|
||||
$(".music-list").on("click",".list-mobile-menu", function() { |
||||
var num = parseInt($(this).parent().data("no")); |
||||
musicInfo(rem.dislist, num); |
||||
return false; |
||||
}); |
||||
|
||||
// 列表鼠标移过显示对应的操作按钮
|
||||
$(".music-list").on("mousemove",".list-item", function() { |
||||
var num = parseInt($(this).data("no")); |
||||
if(isNaN(num)) return false; |
||||
// 还没有追加菜单则加上菜单
|
||||
if(!$(this).data("loadmenu")) { |
||||
var target = $(this).find(".music-name"); |
||||
var html = '<span class="music-name-cult">' +
|
||||
target.html() +
|
||||
'</span>' + |
||||
'<div class="list-menu" data-no="' + num + '">' + |
||||
'<span class="list-icon icon-play" data-function="play" title="点击播放这首歌"></span>' + |
||||
'<span class="list-icon icon-download" data-function="download" title="点击下载这首歌"></span>' + |
||||
'<span class="list-icon icon-share" data-function="share" title="点击分享这首歌"></span>' + |
||||
'</div>'; |
||||
target.html(html); |
||||
$(this).data("loadmenu", true); |
||||
} |
||||
}); |
||||
|
||||
// 列表中的菜单点击
|
||||
$(".music-list").on("click",".icon-play,.icon-download,.icon-share", function() { |
||||
var num = parseInt($(this).parent().data("no")); |
||||
if(isNaN(num)) return false; |
||||
switch($(this).data("function")) { |
||||
case "play": // 播放
|
||||
listClick(num); // 调用列表点击处理函数
|
||||
break; |
||||
case "download": // 下载
|
||||
ajaxUrl(musicList[rem.dislist].item[num], download); |
||||
break; |
||||
case "share": // 分享
|
||||
// ajax 请求数据
|
||||
ajaxUrl(musicList[rem.dislist].item[num], ajaxShare); |
||||
break; |
||||
} |
||||
return true; |
||||
}); |
||||
|
||||
// 点击加载更多
|
||||
$(".music-list").on("click",".list-loadmore", function() { |
||||
$(".list-loadmore").removeClass('list-loadmore'); |
||||
$(".list-loadmore").html('加载中...'); |
||||
ajaxSearch(); |
||||
}); |
||||
|
||||
// 点击专辑显示专辑歌曲
|
||||
$("#sheet").on("click",".sheet-cover,.sheet-name", function() { |
||||
var num = parseInt($(this).parent().data("no")); |
||||
// 是用户列表，但是还没有加载数据
|
||||
if(musicList[num].item.length === 0 && musicList[num].creatorID) { |
||||
layer.msg('列表读取中...', {icon: 16,shade: 0.01,time: 500}); // 0代表加载的风格，支持0-2
|
||||
// ajax加载数据
|
||||
ajaxPlayList(musicList[num].id, num, loadList); |
||||
return true; |
||||
} |
||||
loadList(num); |
||||
}); |
||||
|
||||
// 点击同步云音乐
|
||||
$("#sheet").on("click",".login-in", function() { |
||||
layer.prompt( |
||||
{ |
||||
title: '请输入您的网易云 UID', |
||||
// value: '', // 默认值
|
||||
btn: ['确定', '取消', '帮助'], |
||||
btn3: function(index, layero){ |
||||
layer.open({ |
||||
title: '如何获取您的网易云UID？' |
||||
,shade: 0.6 //遮罩透明度
|
||||
,anim: 0 //0-6的动画形式，-1不开启
|
||||
,content:
|
||||
'1、首先<a href="http://music.163.com/" target="_blank">点我(http://music.163.com/)</a>打开网易云音乐官网<br>' + |
||||
'2、然后点击页面右上角的“登录”，登录您的账号<br>' +
|
||||
'3、点击您的头像，进入个人中心<br>' +
|
||||
'4、此时<span style="color:red">浏览器地址栏</span> <span style="color: green">/user/home?id=</span> 后面的<span style="color:red">数字</span>就是您的网易云 UID' |
||||
});
|
||||
} |
||||
}, |
||||
function(val, index){ // 输入后的回调函数
|
||||
if(isNaN(val)) { |
||||
layer.msg('uid 只能是数字',{anim: 6}); |
||||
return false; |
||||
} |
||||
layer.close(index); // 关闭输入框
|
||||
ajaxUserList(val); |
||||
}); |
||||
}); |
||||
|
||||
// 刷新用户列表
|
||||
$("#sheet").on("click",".login-refresh", function() { |
||||
playerSavedata('ulist', ''); |
||||
layer.msg('刷新歌单'); |
||||
clearUserlist(); |
||||
}); |
||||
|
||||
// 退出登录
|
||||
$("#sheet").on("click",".login-out", function() { |
||||
playerSavedata('uid', ''); |
||||
playerSavedata('ulist', ''); |
||||
layer.msg('已退出'); |
||||
clearUserlist(); |
||||
}); |
||||
|
||||
// 播放、暂停按钮的处理
|
||||
$("#music-info").click(function(){ |
||||
if(rem.playid === undefined) { |
||||
layer.msg('请先播放歌曲'); |
||||
return false; |
||||
} |
||||
|
||||
musicInfo(rem.playlist, rem.playid); |
||||
}); |
||||
|
||||
// 播放、暂停按钮的处理
|
||||
$(".btn-play").click(function(){ |
||||
pause(); |
||||
}); |
||||
|
||||
// 循环顺序的处理
|
||||
$(".btn-order").click(function(){ |
||||
orderChange(); |
||||
}); |
||||
// 上一首歌
|
||||
$(".btn-prev").click(function(){ |
||||
prevMusic(); |
||||
}); |
||||
|
||||
// 下一首
|
||||
$(".btn-next").click(function(){ |
||||
nextMusic(); |
||||
}); |
||||
|
||||
// 静音按钮点击事件
|
||||
$(".btn-quiet").click(function(){ |
||||
var oldVol; // 之前的音量值
|
||||
if($(this).is('.btn-state-quiet')) { |
||||
oldVol = $(this).data("volume"); |
||||
oldVol = oldVol? oldVol: (rem.isMobile? 1: mkPlayer.volume); // 没找到记录的音量，则重置为默认音量
|
||||
$(this).removeClass("btn-state-quiet"); // 取消静音
|
||||
} else { |
||||
oldVol = volume_bar.percent; |
||||
$(this).addClass("btn-state-quiet"); // 开启静音
|
||||
$(this).data("volume", oldVol); // 记录当前音量值
|
||||
oldVol = 0; |
||||
} |
||||
playerSavedata('volume', oldVol); // 存储音量信息
|
||||
volume_bar.goto(oldVol); // 刷新音量显示
|
||||
if(rem.audio[0] !== undefined) rem.audio[0].volume = oldVol; // 应用音量
|
||||
}); |
||||
|
||||
if((mkPlayer.coverbg === true && !rem.isMobile) || (mkPlayer.mcoverbg === true && rem.isMobile)) { // 开启了封面背景
|
||||
|
||||
if(rem.isMobile) { // 移动端采用另一种模糊方案
|
||||
$('#blur-img').html('<div class="blured-img" id="mobile-blur"></div><div class="blur-mask mobile-mask"></div>'); |
||||
} else { |
||||
// 背景图片初始化
|
||||
$('#blur-img').backgroundBlur({ |
||||
// imageURL : '', // URL to the image that will be used for blurring
|
||||
blurAmount : 50, // 模糊度
|
||||
imageClass : 'blured-img', // 背景区应用样式
|
||||
overlayClass : 'blur-mask', // 覆盖背景区class，可用于遮罩或额外的效果
|
||||
// duration: 0, // 图片淡出时间
|
||||
endOpacity : 1 // 图像最终的不透明度
|
||||
}); |
||||
} |
||||
|
||||
$('.blur-mask').fadeIn(1000); // 遮罩层淡出
|
||||
} |
||||
|
||||
// 图片加载失败处理
|
||||
$('img').error(function(){ |
||||
$(this).attr('src', 'images/player_cover.png'); |
||||
}); |
||||
|
||||
// 初始化播放列表
|
||||
initList();
|
||||
}); |
||||
|
||||
// 展现系统列表中任意首歌的歌曲信息
|
||||
function musicInfo(list, index) { |
||||
var music = musicList[list].item[index]; |
||||
var tempStr = '<span class="info-title">歌名：</span>' + music.name +
|
||||
'<br><span class="info-title">歌手：</span>' + music.artist +
|
||||
'<br><span class="info-title">专辑：</span>' + music.album; |
||||
|
||||
if(list == rem.playlist && index == rem.playid) { // 当前正在播放这首歌，那么还可以顺便获取一下时长。。
|
||||
tempStr += '<br><span class="info-title">时长：</span>' + formatTime(rem.audio[0].duration); |
||||
} |
||||
|
||||
tempStr += '<br><span class="info-title">操作：</span>' +
|
||||
'<span class="info-btn" onclick="thisDownload(this)" data-list="' + list + '" data-index="' + index + '">下载</span>' +
|
||||
'<span style="margin-left: 10px" class="info-btn" onclick="thisShare(this)" data-list="' + list + '" data-index="' + index + '">外链</span>'; |
||||
|
||||
layer.open({ |
||||
type: 0, |
||||
shade: false, |
||||
title: false, //不显示标题
|
||||
btn: false, |
||||
content: tempStr |
||||
}); |
||||
|
||||
if(mkPlayer.debug) { |
||||
console.info('id: "' + music.id + '",\n' +
|
||||
'name: "' + music.name + '",\n' + |
||||
'artist: "' + music.artist + '",\n' + |
||||
'album: "' + music.album + '",\n' + |
||||
'source: "' + music.source + '",\n' + |
||||
'url_id: "' + music.url_id + '",\n' +
|
||||
'pic_id: "' + music.pic_id + '",\n' +
|
||||
'lyric_id: "' + music.lyric_id + '",\n' +
|
||||
'pic: "' + music.pic + '",\n' + |
||||
'url: ""'); |
||||
// 'url: "' + music.url + '"');
|
||||
} |
||||
} |
||||
|
||||
// 展现搜索弹窗
|
||||
function searchBox() { |
||||
var tmpHtml = '<form onSubmit="return searchSubmit()"><div id="search-area">' +
|
||||
' <div class="search-group">' +
|
||||
' <input type="text" name="wd" id="search-wd" placeholder="搜索歌手、歌名、专辑" autofocus required>' +
|
||||
' <button class="search-submit" type="submit">搜 索</button>' +
|
||||
' </div>' +
|
||||
' <div class="radio-group" id="music-source">' +
|
||||
' <label><input type="radio" name="source" value="netease" checked=""> 网易云</label>' +
|
||||
' <label><input type="radio" name="source" value="tencent"> QQ</label>' +
|
||||
' <label><input type="radio" name="source" value="xiami"> 虾米</label>' +
|
||||
' <label><input type="radio" name="source" value="kugou"> 酷狗</label>' +
|
||||
' <label><input type="radio" name="source" value="baidu"> 百度</label>' +
|
||||
' </div>' +
|
||||
'</div></form>'; |
||||
layer.open({ |
||||
type: 1, |
||||
shade: false, |
||||
title: false, // 不显示标题
|
||||
shade: 0.5, // 遮罩颜色深度
|
||||
shadeClose: true, |
||||
content: tmpHtml, |
||||
cancel: function(){ |
||||
} |
||||
}); |
||||
|
||||
// 恢复上一次的输入
|
||||
$("#search-wd").focus().val(rem.wd); |
||||
$("#music-source input[name='source'][value='" + rem.source + "']").prop("checked", "checked"); |
||||
} |
||||
|
||||
// 搜索提交
|
||||
function searchSubmit() { |
||||
var wd = $("#search-wd").val(); |
||||
if(!wd) { |
||||
layer.msg('搜索内容不能为空', {anim:6, offset: 't'}); |
||||
$("#search-wd").focus(); |
||||
return false; |
||||
} |
||||
rem.source = $("#music-source input[name='source']:checked").val(); |
||||
|
||||
layer.closeAll('page'); // 关闭搜索框
|
||||
|
||||
rem.loadPage = 1; // 已加载页数复位
|
||||
rem.wd = wd; // 搜索词
|
||||
ajaxSearch(); // 加载搜索结果
|
||||
return false; |
||||
} |
||||
|
||||
// 下载正在播放的这首歌
|
||||
function thisDownload(obj) { |
||||
ajaxUrl(musicList[$(obj).data("list")].item[$(obj).data("index")], download); |
||||
} |
||||
|
||||
// 分享正在播放的这首歌
|
||||
function thisShare(obj) { |
||||
ajaxUrl(musicList[$(obj).data("list")].item[$(obj).data("index")], ajaxShare); |
||||
} |
||||
|
||||
// 下载歌曲
|
||||
// 参数：包含歌曲信息的数组
|
||||
function download(music) { |
||||
if(music.url == 'err' || music.url == "" || music.url == null) { |
||||
layer.msg('这首歌不支持下载'); |
||||
return; |
||||
} |
||||
openDownloadDialog(music.url, music.name + ' - ' + music.artist); |
||||
} |
||||
|
||||
/** |
||||
* 通用的打开下载对话框方法，没有测试过具体兼容性 |
||||
* @param url 下载地址，也可以是一个blob对象，必选 |
||||
* @param saveName 保存文件名，可选 |
||||
* http://www.cnblogs.com/liuxianan/p/js-download.html
|
||||
*/ |
||||
function openDownloadDialog(url, saveName) |
||||
{ |
||||
if(typeof url == 'object' && url instanceof Blob) |
||||
{ |
||||
url = URL.createObjectURL(url); // 创建blob地址
|
||||
} |
||||
var aLink = document.createElement('a'); |
||||
aLink.href = url; |
||||
aLink.target = "_blank"; |
||||
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
|
||||
var event; |
||||
if(window.MouseEvent) event = new MouseEvent('click'); |
||||
else |
||||
{ |
||||
event = document.createEvent('MouseEvents'); |
||||
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); |
||||
} |
||||
aLink.dispatchEvent(event); |
||||
} |
||||
|
||||
// 获取外链的ajax回调函数
|
||||
// 参数：包含音乐信息的数组
|
||||
function ajaxShare(music) { |
||||
if(music.url == 'err' || music.url == "" || music.url == null) { |
||||
layer.msg('这首歌不支持外链获取'); |
||||
return; |
||||
} |
||||
|
||||
var tmpHtml = '<p>' + music.artist + ' - ' + music.name + ' 的外链地址为：</p>' +
|
||||
'<input class="share-url" onmouseover="this.focus();this.select()" value="' + music.url + '">' +
|
||||
'<p class="share-tips">* 获取到的音乐外链有效期较短，请按需使用。</p>'; |
||||
|
||||
layer.open({ |
||||
title: '歌曲外链分享' |
||||
,content: tmpHtml |
||||
}); |
||||
} |
||||
|
||||
// 改变右侧封面图像
|
||||
// 新的图像地址
|
||||
function changeCover(music) { |
||||
var img = music.pic; // 获取歌曲封面
|
||||
var animate = false,imgload = false; |
||||
|
||||
if(!img) { // 封面为空
|
||||
ajaxPic(music, changeCover); // 获取歌曲封面图
|
||||
img == "err"; // 暂时用无图像占个位...
|
||||
} |
||||
|
||||
if(img == "err") { |
||||
img = "images/player_cover.png"; |
||||
} else { |
||||
if(mkPlayer.mcoverbg === true && rem.isMobile) // 移动端封面
|
||||
{
|
||||
$("#music-cover").load(function(){ |
||||
$("#mobile-blur").css('background-image', 'url("' + img + '")'); |
||||
}); |
||||
}
|
||||
else if(mkPlayer.coverbg === true && !rem.isMobile) // PC端封面
|
||||
{
|
||||
$("#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; // 等待图像加载完
|
||||
} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
$("#music-cover").attr("src", img); // 改变右侧封面
|
||||
$(".sheet-item[data-no='1'] .sheet-cover").attr('src', img); // 改变正在播放列表的图像
|
||||
} |
||||
|
||||
|
||||
// 向列表中载入某个播放列表
|
||||
function loadList(list) { |
||||
if(musicList[list].isloading === true) { |
||||
layer.msg('列表读取中...', {icon: 16,shade: 0.01,time: 500}); |
||||
return true; |
||||
} |
||||
|
||||
rem.dislist = list; // 记录当前显示的列表
|
||||
|
||||
dataBox("list"); // 在主界面显示出播放列表
|
||||
|
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) { |
||||
if(musicList[list].id) { |
||||
console.log('加载播放列表 ' + list + ' - ' + musicList[list].name + '\n' + |
||||
'id: ' + musicList[list].id + ',\n' + |
||||
'name: "' + musicList[list].name + '",\n' + |
||||
'cover: "' + musicList[list].cover + '",\n' + |
||||
'item: []'); |
||||
} else { |
||||
console.log('加载播放列表 ' + list + ' - ' + musicList[list].name); |
||||
} |
||||
} |
||||
|
||||
rem.mainList.html(''); // 清空列表中原有的元素
|
||||
addListhead(); // 向列表中加入列表头
|
||||
|
||||
if(musicList[list].item.length == 0) { |
||||
addListbar("nodata"); // 列表中没有数据
|
||||
} else { |
||||
|
||||
// 逐项添加数据
|
||||
for(var i=0; i<musicList[list].item.length; i++) { |
||||
var tmpMusic = musicList[list].item[i]; |
||||
|
||||
addItem(i + 1, tmpMusic.name, tmpMusic.artist, tmpMusic.album); |
||||
|
||||
// 音乐链接均有有效期限制,重新显示列表时清空处理
|
||||
if(list == 1 || list == 2) tmpMusic.url = ""; |
||||
} |
||||
|
||||
// 列表加载完成后的处理
|
||||
if(list == 1 || list == 2) { // 历史记录和正在播放列表允许清空
|
||||
addListbar("clear"); // 清空列表
|
||||
} |
||||
|
||||
if(rem.playlist === undefined) { // 未曾播放过
|
||||
if(mkPlayer.autoplay == true) pause(); // 设置了自动播放，则自动播放
|
||||
} else { |
||||
refreshList(); // 刷新列表，添加正在播放样式
|
||||
} |
||||
|
||||
listToTop(); // 播放列表滚动到顶部
|
||||
} |
||||
} |
||||
|
||||
// 播放列表滚动到顶部
|
||||
function listToTop() { |
||||
if(rem.isMobile) { |
||||
$("#main-list").animate({scrollTop: 0}, 200); |
||||
} else { |
||||
$("#main-list").mCustomScrollbar("scrollTo", 0, "top"); |
||||
} |
||||
} |
||||
|
||||
// 向列表中加入列表头
|
||||
function addListhead() { |
||||
var html = '<div class="list-item list-head">' + |
||||
' <span class="music-album">' + |
||||
' 专辑' + |
||||
' </span>' + |
||||
' <span class="auth-name">' + |
||||
' 歌手' + |
||||
' </span>' + |
||||
' <span class="music-name">' + |
||||
' 歌曲' + |
||||
' </span>' + |
||||
'</div>'; |
||||
rem.mainList.append(html); |
||||
} |
||||
|
||||
// 列表中新增一项
|
||||
// 参数：编号、名字、歌手、专辑
|
||||
function addItem(no, name, auth, album) { |
||||
var html = '<div class="list-item" data-no="' + (no - 1) + '">' + |
||||
' <span class="list-num">' + no + '</span>' + |
||||
' <span class="list-mobile-menu"></span>' + |
||||
' <span class="music-album">' + album + '</span>' + |
||||
' <span class="auth-name">' + auth + '</span>' + |
||||
' <span class="music-name">' + name + '</span>' + |
||||
'</div>';
|
||||
rem.mainList.append(html); |
||||
} |
||||
|
||||
// 加载列表中的提示条
|
||||
// 参数：类型（more、nomore、loading、nodata、clear）
|
||||
function addListbar(types) { |
||||
var html |
||||
switch(types) { |
||||
case "more": // 还可以加载更多
|
||||
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": // 加载中
|
||||
html = '<div class="list-item text-center" id="list-foot">播放列表加载中...</div>'; |
||||
break; |
||||
|
||||
case "nodata": // 列表中没有内容
|
||||
html = '<div class="list-item text-center" id="list-foot">可能是个假列表，什么也没有</div>'; |
||||
break; |
||||
|
||||
case "clear": // 清空列表
|
||||
html = '<div class="list-item text-center list-clickable" id="list-foot" onclick="clearDislist();">清空列表</div>'; |
||||
break; |
||||
} |
||||
rem.mainList.append(html); |
||||
} |
||||
|
||||
// 将时间格式化为 00:00 的格式
|
||||
// 参数：原始时间
|
||||
function formatTime(time){
|
||||
var hour,minute,second; |
||||
hour = String(parseInt(time/3600,10)); |
||||
if(hour.length == 1) hour='0' + hour; |
||||
|
||||
minute=String(parseInt((time%3600)/60,10)); |
||||
if(minute.length == 1) minute='0'+minute; |
||||
|
||||
second=String(parseInt(time%60,10)); |
||||
if(second.length == 1) second='0'+second; |
||||
|
||||
if(hour > 0) { |
||||
return hour + ":" + minute + ":" + second; |
||||
} else { |
||||
return minute + ":" + second; |
||||
} |
||||
} |
||||
|
||||
// url编码
|
||||
// 输入参数：待编码的字符串
|
||||
function urlEncode(String) { |
||||
return encodeURIComponent(String).replace(/'/g,"%27").replace(/"/g,"%22");
|
||||
} |
||||
|
||||
// 在 ajax 获取了音乐的信息后再进行更新
|
||||
// 参数：要进行更新的音乐
|
||||
function updateMinfo(music) { |
||||
// 不含有 id 的歌曲无法更新
|
||||
if(!music.id) return false; |
||||
|
||||
// 循环查找播放列表并更新信息
|
||||
for(var i=0; i<musicList.length; i++) { |
||||
for(var j=0; j<musicList[i].item.length; j++) { |
||||
// ID 对上了，那就更新信息
|
||||
if(musicList[i].item[j].id == music.id && musicList[i].item[j].source == music.source) { |
||||
musicList[i].item[j] == music; // 更新音乐信息
|
||||
j = musicList[i].item.length; // 一个列表中只找一首，找到了就跳出
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 刷新当前显示的列表，如果有正在播放则添加样式
|
||||
function refreshList() { |
||||
// 还没播放过，不用对比了
|
||||
if(rem.playlist === undefined) return true; |
||||
|
||||
$(".list-playing").removeClass("list-playing"); // 移除其它的正在播放
|
||||
|
||||
if(rem.paused !== true) { // 没有暂停
|
||||
for(var i=0; i<musicList[rem.dislist].item.length; i++) { |
||||
// 与正在播放的歌曲 id 相同
|
||||
if((musicList[rem.dislist].item[i].id !== undefined) &&
|
||||
(musicList[rem.dislist].item[i].id == musicList[1].item[rem.playid].id) &&
|
||||
(musicList[rem.dislist].item[i].source == musicList[1].item[rem.playid].source)) { |
||||
$(".list-item[data-no='" + i + "']").addClass("list-playing"); // 添加正在播放样式
|
||||
|
||||
return true; // 一般列表中只有一首，找到了赶紧跳出
|
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
// 添加一个歌单
|
||||
// 参数：编号、歌单名字、歌单封面
|
||||
function addSheet(no, name, cover) { |
||||
if(!cover) cover = "images/player_cover.png"; |
||||
if(!name) name = "读取中..."; |
||||
|
||||
var html = '<div class="sheet-item" data-no="' + no + '">' + |
||||
' <img class="sheet-cover" src="' +cover+ '">' + |
||||
' <p class="sheet-name">' +name+ '</p>' + |
||||
'</div>';
|
||||
rem.sheetList.append(html); |
||||
} |
||||
// 清空歌单显示
|
||||
function clearSheet() { |
||||
rem.sheetList.html(''); |
||||
} |
||||
|
||||
// 歌单列表底部登陆条
|
||||
function sheetBar() { |
||||
var barHtml; |
||||
if(playerReaddata('uid')) { |
||||
barHtml = '已同步 ' + rem.uname + ' 的歌单 <span class="login-btn login-refresh">[刷新]</span> <span class="login-btn login-out">[退出]</span>'; |
||||
} else { |
||||
barHtml = '我的歌单 <span class="login-btn login-in">[点击同步]</span>'; |
||||
} |
||||
barHtml = '<span id="sheet-bar"><div class="clear-fix"></div>' + |
||||
'<div id="user-login" class="sheet-title-bar">' + barHtml +
|
||||
'</div></span>';
|
||||
rem.sheetList.append(barHtml); |
||||
} |
||||
|
||||
// 选择要显示哪个数据区
|
||||
// 参数：要显示的数据区（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 || rem.dislist == rem.playlist) { // 正在播放
|
||||
$(".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; |
||||
} |
||||
} |
||||
|
||||
// 将当前歌曲加入播放历史
|
||||
// 参数：要添加的音乐
|
||||
function addHis(music) { |
||||
if(rem.playlist == 2) return true; // 在播放“播放记录”列表则不作改变
|
||||
|
||||
if(musicList[2].item.length > 300) musicList[2].item.length = 299; // 限定播放历史最多是 300 首
|
||||
|
||||
if(music.id !== undefined && music.id !== '') { |
||||
// 检查历史数据中是否有这首歌，如果有则提至前面
|
||||
for(var i=0; i<musicList[2].item.length; i++) { |
||||
if(musicList[2].item[i].id == music.id && musicList[2].item[i].source == music.source) { |
||||
musicList[2].item.splice(i, 1); // 先删除相同的
|
||||
i = musicList[2].item.length; // 找到了，跳出循环
|
||||
} |
||||
} |
||||
} |
||||
|
||||
// 再放到第一位
|
||||
musicList[2].item.unshift(music); |
||||
|
||||
playerSavedata('his', musicList[2].item); // 保存播放历史列表
|
||||
} |
||||
|
||||
// 初始化播放列表
|
||||
function initList() { |
||||
// 登陆过，那就读取出用户的歌单，并追加到系统歌单的后面
|
||||
if(playerReaddata('uid')) { |
||||
rem.uid = playerReaddata('uid'); |
||||
rem.uname = playerReaddata('uname'); |
||||
// musicList.push(playerReaddata('ulist'));
|
||||
var tmp_ulist = playerReaddata('ulist'); // 读取本地记录的用户歌单
|
||||
|
||||
if(tmp_ulist) musicList.push.apply(musicList, tmp_ulist); // 追加到系统歌单的后面
|
||||
} |
||||
|
||||
// 显示所有的歌单
|
||||
for(var i=1; i<musicList.length; i++) { |
||||
|
||||
if(i == 1) { // 正在播放列表
|
||||
// 读取正在播放列表
|
||||
var tmp_item = playerReaddata('playing'); |
||||
if(tmp_item) { // 读取到了正在播放列表
|
||||
musicList[1].item = tmp_item; |
||||
mkPlayer.defaultlist = 1; // 默认显示正在播放列表
|
||||
} |
||||
|
||||
} else if(i == 2) { // 历史记录列表
|
||||
// 读取历史记录
|
||||
var tmp_item = playerReaddata('his'); |
||||
if(tmp_item) { |
||||
musicList[2].item = tmp_item; |
||||
} |
||||
|
||||
// 列表不是用户列表，并且信息为空，需要ajax读取列表
|
||||
}else if(!musicList[i].creatorID && (musicList[i].item == undefined || (i>2 && musicList[i].item.length == 0))) {
|
||||
musicList[i].item = []; |
||||
if(musicList[i].id) { // 列表ID已定义
|
||||
// ajax获取列表信息
|
||||
ajaxPlayList(musicList[i].id, i); |
||||
} else { // 列表 ID 未定义
|
||||
if(!musicList[i].name) musicList[i].name = '未命名'; |
||||
} |
||||
} |
||||
|
||||
// 在前端显示出来
|
||||
addSheet(i, musicList[i].name, musicList[i].cover); |
||||
} |
||||
|
||||
// 登陆了，但歌单又没有，说明是在刷新歌单
|
||||
if(playerReaddata('uid') && !tmp_ulist) { |
||||
ajaxUserList(rem.uid); |
||||
return true; |
||||
} |
||||
|
||||
// 首页显示默认列表
|
||||
if(mkPlayer.defaultlist >= musicList.length) mkPlayer.defaultlist = 1; // 超出范围，显示正在播放列表
|
||||
|
||||
if(musicList[mkPlayer.defaultlist].isloading !== true) loadList(mkPlayer.defaultlist); |
||||
|
||||
// 显示最后一项登陆条
|
||||
sheetBar(); |
||||
} |
||||
|
||||
// 清空用户的同步列表
|
||||
function clearUserlist() { |
||||
if(!rem.uid) return false; |
||||
|
||||
// 查找用户歌单起点
|
||||
for(var i=1; i<musicList.length; i++) { |
||||
if(musicList[i].creatorID !== undefined && musicList[i].creatorID == rem.uid) break; // 找到了就退出
|
||||
} |
||||
|
||||
// 删除记忆数组
|
||||
musicList.splice(i, musicList.length - i); // 先删除相同的
|
||||
musicList.length = i; |
||||
|
||||
// 刷新列表显示
|
||||
clearSheet(); |
||||
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() { |
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) { |
||||
console.log("开始播放列表 " + musicList[rem.playlist].name + " 中的歌曲"); |
||||
} |
||||
|
||||
$(".sheet-playing").removeClass("sheet-playing"); // 移除其它的正在播放
|
||||
|
||||
$(".sheet-item[data-no='" + rem.playlist + "']").addClass("sheet-playing"); // 添加样式
|
||||
} |
||||
|
||||
// 播放器本地存储信息
|
||||
// 参数：键值、数据
|
||||
function playerSavedata(key, data) { |
||||
key = 'mkPlayer2_' + key; // 添加前缀，防止串用
|
||||
data = JSON.stringify(data); |
||||
// 存储，IE6~7 不支持HTML5本地存储
|
||||
if (window.localStorage) { |
||||
localStorage.setItem(key, data);
|
||||
} |
||||
} |
||||
|
||||
// 播放器读取本地存储信息
|
||||
// 参数：键值
|
||||
// 返回：数据
|
||||
function playerReaddata(key) { |
||||
if(!window.localStorage) return ''; |
||||
key = 'mkPlayer2_' + key; |
||||
return JSON.parse(localStorage.getItem(key)); |
||||
} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,105 @@ |
||||
/************************************************** |
||||
* MKOnlinePlayer v2.31 |
||||
* 歌词解析及滚动模块 |
||||
* 编写：mengkun(http://mkblog.cn)
|
||||
* 时间：2017-9-13 |
||||
*************************************************/ |
||||
|
||||
var lyricArea = $("#lyric"); // 歌词显示容器
|
||||
|
||||
// 在歌词区显示提示语（如歌词加载中、无歌词等）
|
||||
function lyricTip(str) { |
||||
lyricArea.html("<li class='lyric-tip'>"+str+"</li>"); // 显示内容
|
||||
} |
||||
|
||||
// 歌曲加载完后的回调函数
|
||||
// 参数：歌词源文件
|
||||
function lyricCallback(str, id) { |
||||
if(id !== musicList[rem.playlist].item[rem.playid].id) return; // 返回的歌词不是当前这首歌的，跳过
|
||||
|
||||
rem.lyric = parseLyric(str); // 解析获取到的歌词
|
||||
|
||||
if(rem.lyric === '') { |
||||
lyricTip('没有歌词'); |
||||
return false; |
||||
} |
||||
|
||||
lyricArea.html(''); // 清空歌词区域的内容
|
||||
lyricArea.scrollTop(0); // 滚动到顶部
|
||||
|
||||
rem.lastLyric = -1; |
||||
|
||||
// 显示全部歌词
|
||||
var i = 0; |
||||
for(var k in rem.lyric){ |
||||
var txt = rem.lyric[k]; |
||||
if(!txt) txt = " "; |
||||
var li = $("<li data-no='"+i+"' class='lrc-item'>"+txt+"</li>"); |
||||
lyricArea.append(li); |
||||
i++; |
||||
} |
||||
} |
||||
|
||||
// 强制刷新当前时间点的歌词
|
||||
// 参数：当前播放时间（单位：秒）
|
||||
function refreshLyric(time) { |
||||
if(rem.lyric === '') return false; |
||||
|
||||
time = parseInt(time); // 时间取整
|
||||
var i = 0; |
||||
for(var k in rem.lyric){ |
||||
if(k >= time) break; |
||||
i = k; // 记录上一句的
|
||||
} |
||||
|
||||
scrollLyric(i); |
||||
} |
||||
|
||||
// 滚动歌词到指定句
|
||||
// 参数：当前播放时间（单位：秒）
|
||||
function scrollLyric(time) { |
||||
if(rem.lyric === '') return false; |
||||
|
||||
time = parseInt(time); // 时间取整
|
||||
|
||||
if(rem.lyric === undefined || rem.lyric[time] === undefined) return false; // 当前时间点没有歌词
|
||||
|
||||
if(rem.lastLyric == time) return true; // 歌词没发生改变
|
||||
|
||||
var i = 0; // 获取当前歌词是在第几行
|
||||
for(var k in rem.lyric){ |
||||
if(k == time) break; |
||||
i ++; |
||||
} |
||||
rem.lastLyric = time; // 记录方便下次使用
|
||||
$(".lplaying").removeClass("lplaying"); // 移除其余句子的正在播放样式
|
||||
$(".lrc-item[data-no='" + i + "']").addClass("lplaying"); // 加上正在播放样式
|
||||
|
||||
var scroll = (lyricArea.children().height() * i) - ($(".lyric").height() / 2);
|
||||
lyricArea.stop().animate({scrollTop: scroll}, 1000); // 平滑滚动到当前歌词位置(更改这个数值可以改变歌词滚动速度，单位：毫秒)
|
||||
|
||||
} |
||||
|
||||
// 解析歌词
|
||||
// 这一函数来自 https://github.com/TivonJJ/html5-music-player
|
||||
// 参数：原始歌词文件
|
||||
function parseLyric(lrc) { |
||||
if(lrc === '') return ''; |
||||
var lyrics = lrc.split("\n"); |
||||
var lrcObj = {}; |
||||
for(var i=0;i<lyrics.length;i++){ |
||||
var lyric = decodeURIComponent(lyrics[i]); |
||||
var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g; |
||||
var timeRegExpArr = lyric.match(timeReg); |
||||
if(!timeRegExpArr)continue; |
||||
var clause = lyric.replace(timeReg,''); |
||||
for(var k = 0,h = timeRegExpArr.length;k < h;k++) { |
||||
var t = timeRegExpArr[k]; |
||||
var min = Number(String(t.match(/\[\d*/i)).slice(1)), |
||||
sec = Number(String(t.match(/\:\d*/i)).slice(1)); |
||||
var time = min * 60 + sec; |
||||
lrcObj[time] = clause; |
||||
} |
||||
} |
||||
return lrcObj; |
||||
} |
||||
@ -0,0 +1,149 @@ |
||||
/************************************************** |
||||
* MKOnlinePlayer v2.32 |
||||
* 播放列表配置模块 |
||||
* 编写：mengkun(http://mkblog.cn)
|
||||
* 时间：2017-9-15 |
||||
*************************************************/ |
||||
// 建议修改前先备份一下
|
||||
// 获取 歌曲的网易云音乐ID 或 网易云歌单ID 的方法：
|
||||
// 先在 js/player.js 中开启调试模式，然后按 F12 打开浏览器的控制台。播放歌曲或点开歌单即可看到相应信息
|
||||
|
||||
var musicList = [ |
||||
// 以下三个系统预留列表请勿更改，否则可能导致程序无法正常运行！
|
||||
// 预留列表：搜索结果
|
||||
{ |
||||
name: "搜索结果", // 播放列表名字
|
||||
cover: "", // 播放列表封面
|
||||
creatorName: "", // 列表创建者名字
|
||||
creatorAvatar: "", // 列表创建者头像
|
||||
item: [] |
||||
}, |
||||
// 预留列表：正在播放
|
||||
{ |
||||
name: "正在播放", // 播放列表名字
|
||||
cover: "", // 播放列表封面
|
||||
creatorName: "", // 列表创建者名字
|
||||
creatorAvatar: "", // 列表创建者头像
|
||||
item: [] |
||||
}, |
||||
// 预留列表：播放历史
|
||||
{ |
||||
name: "播放历史", // 播放列表名字
|
||||
cover: "images/history.png", // 播放列表封面
|
||||
creatorName: "", // 列表创建者名字
|
||||
creatorAvatar: "", // 列表创建者头像
|
||||
item: [] |
||||
},
|
||||
// 以上三个系统预留列表请勿更改，否则可能导致程序无法正常运行！
|
||||
//*********************************************
|
||||
// 自定义列表开始，您可以自由添加您的自定义列表
|
||||
{ |
||||
id: 3778678 // 云音乐热歌榜
|
||||
}, |
||||
{ |
||||
id: 3779629 // 云音乐新歌榜
|
||||
}, |
||||
{ |
||||
id: 4395559 // 华语金曲榜
|
||||
}, |
||||
{ |
||||
id: 64016 // 中国TOP排行榜（内地榜）
|
||||
}, |
||||
{ |
||||
id: 112504 // 中国TOP排行榜（港台榜）
|
||||
}, |
||||
{ |
||||
id: 19723756 // 云音乐飙升榜
|
||||
}, |
||||
{ |
||||
id: 2884035 // "网易原创歌曲榜"
|
||||
}, |
||||
// 自定义列表教程开始！
|
||||
// 方式一：手动创建列表并添加歌曲信息
|
||||
// 温馨提示：各大音乐平台获取到的外链有效期均较短，因此 url 值应该设置为空，以让程序临时抓取
|
||||
{ |
||||
name: "自定义列表", // 播放列表名字
|
||||
cover: "https://p3.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg", // 播放列表封面图像
|
||||
creatorName: "", // 列表创建者名字(暂时没用到，可空)
|
||||
creatorAvatar: "", // 列表创建者头像(暂时没用到，可空)
|
||||
item: [ // 这里面放歌曲
|
||||
{ |
||||
id: "436514312", // 音乐ID
|
||||
name: "成都", // 音乐名字
|
||||
artist: "赵雷", // 艺术家名字
|
||||
album: "成都", // 专辑名字
|
||||
source: "netease", // 音乐来源
|
||||
url_id: "436514312", // 链接ID
|
||||
pic_id: "2946691234868155", // 封面ID
|
||||
lyric_id: "436514312", // 歌词ID
|
||||
pic: "https://p3.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg", // 专辑图片
|
||||
url: "" // mp3链接（此项建议不填，除非你有该歌曲的比较稳定的外链）
|
||||
}, |
||||
// 下面演示插入各个平台的音乐。。。
|
||||
{ |
||||
id: "65528", |
||||
name: "淘汰", |
||||
artist: "陈奕迅", |
||||
album: "认了吧", |
||||
source: "netease", // 网易云
|
||||
url_id: "65528", |
||||
pic_id: "18782957139233959", |
||||
lyric_id: "65528", |
||||
pic: "https://p3.music.126.net/BFuOepLmD63tY75UJs1c0Q==/18872017579169120.jpg", |
||||
url: "" |
||||
}, |
||||
{ |
||||
id: "001JD1SR29d1hS", |
||||
name: "特别的爱给特别的你", |
||||
artist: "伍思凯", |
||||
album: "特别的爱给特别的你", |
||||
source: "tencent", // 腾讯
|
||||
url_id: "001JD1SR29d1hS", |
||||
pic_id: "004DYsvN2QCYcj", |
||||
lyric_id: "001JD1SR29d1hS", |
||||
pic: "https://y.gtimg.cn/music/photo_new/T002R300x300M000004DYsvN2QCYcj.jpg?max_age=2592000", |
||||
url: "" // 腾讯的外链有效期较短，插入时 url [必须]设置空值，播放时再临时抓取
|
||||
}, |
||||
{ |
||||
id: "81175", |
||||
name: "让我欢喜让我忧", |
||||
artist: "周华健", |
||||
album: "让我欢喜让我忧", |
||||
source: "xiami", // 虾米
|
||||
url_id: "81175", |
||||
pic_id: "81175", |
||||
lyric_id: "81175", |
||||
pic: "https://pic.xiami.net/images/album/img58/1258/66271400572139.jpg@300h_300w_100q_1c.jpg", |
||||
url: "" // 虾米的外链有效期较短，插入时 url [必须]设置空值，播放时再临时抓取
|
||||
}, |
||||
{ |
||||
id: "2a24dea6c74884195fe5b9732fd95ca8", |
||||
name: "小幸运", |
||||
artist: "金玟岐", |
||||
album: "金玟岐翻唱作品集", |
||||
source: "kugou", // 酷狗
|
||||
url_id: "2a24dea6c74884195fe5b9732fd95ca8", |
||||
pic_id: "2a24dea6c74884195fe5b9732fd95ca8", |
||||
lyric_id: "2a24dea6c74884195fe5b9732fd95ca8", |
||||
pic: "http://singerimg.kugou.com/uploadpic/softhead/400/20161226/20161226105135733.jpg", |
||||
url: "" // 酷狗的外链有效期较短，插入时 url [必须]设置空值，播放时再临时抓取
|
||||
}, |
||||
{ |
||||
id: "121004737", |
||||
name: "难忘今宵", |
||||
artist: "李谷一", |
||||
album: "难忘今宵", |
||||
source: "baidu", // 百度
|
||||
url_id: "121004737", |
||||
pic_id: "121004737", |
||||
lyric_id: "121004737", |
||||
pic: "http://musicdata.baidu.com/data2/pic/2733cd9816b8618afd3038d5d9444940/266105319/266105319.jpg@s_0,w_150", |
||||
url: "" // 百度的外链有效期较短，插入时 url [必须]设置空值，播放时再临时抓取
|
||||
} // 列表中最后一首歌大括号后面不要加逗号
|
||||
] |
||||
}, |
||||
// 方式二：直接提供网易云歌单ID
|
||||
{ |
||||
id: 440103454 // 网易云歌单ID
|
||||
} // 播放列表的最后一项大括号后面不要加逗号
|
||||
]; |
||||
@ -0,0 +1,473 @@ |
||||
/************************************************** |
||||
* MKOnlinePlayer v2.41 |
||||
* 播放器主功能模块 |
||||
* 编写：mengkun(https://mkblog.cn)
|
||||
* 时间：2018-3-13 |
||||
*************************************************/ |
||||
// 播放器功能配置
|
||||
var mkPlayer = { |
||||
api: "api.php", // api地址
|
||||
loadcount: 20, // 搜索结果一次加载多少条
|
||||
method: "POST", // 数据传输方式(POST/GET)
|
||||
defaultlist: 3, // 默认要显示的播放列表编号
|
||||
autoplay: false, // 是否自动播放(true/false) *此选项在移动端可能无效
|
||||
coverbg: true, // 是否开启封面背景(true/false) *开启后会有些卡
|
||||
mcoverbg: true, // 是否开启[移动端]封面背景(true/false)
|
||||
dotshine: true, // 是否开启播放进度条的小点闪动效果[不支持IE](true/false) *开启后会有些卡
|
||||
mdotshine: false, // 是否开启[移动端]播放进度条的小点闪动效果[不支持IE](true/false)
|
||||
volume: 0.6, // 默认音量值(0~1之间)
|
||||
version: "v2.41", // 播放器当前版本号(仅供调试)
|
||||
debug: false // 是否开启调试模式(true/false)
|
||||
}; |
||||
|
||||
|
||||
|
||||
/******************************************************* |
||||
* 以下内容是播放器核心文件，不建议进行修改，否则可能导致播放器无法正常使用! |
||||
*
|
||||
* 哈哈，吓唬你的！想改就改呗！不过建议修改之前先【备份】,要不然改坏了弄不好了。 |
||||
******************************************************/ |
||||
|
||||
// 存储全局变量
|
||||
var rem = []; |
||||
|
||||
// 音频错误处理函数
|
||||
function audioErr() { |
||||
// 没播放过，直接跳过
|
||||
if(rem.playlist === undefined) return true; |
||||
|
||||
if(rem.errCount > 10) { // 连续播放失败的歌曲过多
|
||||
layer.msg('似乎出了点问题~播放已停止'); |
||||
rem.errCount = 0; |
||||
} else { |
||||
rem.errCount++; // 记录连续播放失败的歌曲数目
|
||||
layer.msg('当前歌曲播放失败，自动播放下一首'); |
||||
nextMusic(); // 切换下一首歌
|
||||
}
|
||||
} |
||||
|
||||
// 点击暂停按钮的事件
|
||||
function pause() { |
||||
if(rem.paused === false) { // 之前是播放状态
|
||||
rem.audio[0].pause(); // 暂停
|
||||
} else { |
||||
// 第一次点播放
|
||||
if(rem.playlist === undefined) { |
||||
rem.playlist = rem.dislist; |
||||
|
||||
musicList[1].item = musicList[rem.playlist].item; // 更新正在播放列表中音乐
|
||||
|
||||
// 正在播放 列表项已发生变更，进行保存
|
||||
playerSavedata('playing', musicList[1].item); // 保存正在播放列表
|
||||
|
||||
listClick(0); |
||||
} |
||||
rem.audio[0].play(); |
||||
} |
||||
} |
||||
|
||||
// 循环顺序
|
||||
function orderChange() { |
||||
var orderDiv = $(".btn-order"); |
||||
orderDiv.removeClass(); |
||||
switch(rem.order) { |
||||
case 1: // 单曲循环 -> 列表循环
|
||||
orderDiv.addClass("player-btn btn-order btn-order-list"); |
||||
orderDiv.attr("title", "列表循环"); |
||||
layer.msg("列表循环"); |
||||
rem.order = 2; |
||||
break; |
||||
|
||||
case 3: // 随机播放 -> 单曲循环
|
||||
orderDiv.addClass("player-btn btn-order btn-order-single"); |
||||
orderDiv.attr("title", "单曲循环"); |
||||
layer.msg("单曲循环"); |
||||
rem.order = 1; |
||||
break; |
||||
|
||||
// case 2:
|
||||
default: // 列表循环(其它) -> 随机播放
|
||||
orderDiv.addClass("player-btn btn-order btn-order-random"); |
||||
orderDiv.attr("title", "随机播放"); |
||||
layer.msg("随机播放"); |
||||
rem.order = 3; |
||||
} |
||||
} |
||||
|
||||
// 播放
|
||||
function audioPlay() { |
||||
rem.paused = false; // 更新状态（未暂停）
|
||||
refreshList(); // 刷新状态，显示播放的波浪
|
||||
$(".btn-play").addClass("btn-state-paused"); // 恢复暂停
|
||||
|
||||
if((mkPlayer.dotshine === true && !rem.isMobile) || (mkPlayer.mdotshine === true && rem.isMobile)) { |
||||
$("#music-progress .mkpgb-dot").addClass("dot-move"); // 小点闪烁效果
|
||||
} |
||||
|
||||
var music = musicList[rem.playlist].item[rem.playid]; // 获取当前播放的歌曲信息
|
||||
var msg = " 正在播放: " + music.name + " - " + music.artist; // 改变浏览器标题
|
||||
|
||||
// 清除定时器
|
||||
if (rem.titflash !== undefined )
|
||||
{ |
||||
clearInterval(rem.titflash); |
||||
} |
||||
// 标题滚动
|
||||
titleFlash(msg); |
||||
} |
||||
// 标题滚动
|
||||
function titleFlash(msg) { |
||||
|
||||
// 截取字符
|
||||
var tit = function() { |
||||
msg = msg.substring(1,msg.length)+ msg.substring(0,1); |
||||
document.title = msg; |
||||
}; |
||||
// 设置定时间 300ms滚动
|
||||
rem.titflash = setInterval(function(){tit()}, 300); |
||||
} |
||||
// 暂停
|
||||
function audioPause() { |
||||
rem.paused = true; // 更新状态（已暂停）
|
||||
|
||||
$(".list-playing").removeClass("list-playing"); // 移除其它的正在播放
|
||||
|
||||
$(".btn-play").removeClass("btn-state-paused"); // 取消暂停
|
||||
|
||||
$("#music-progress .dot-move").removeClass("dot-move"); // 小点闪烁效果
|
||||
|
||||
// 清除定时器
|
||||
if (rem.titflash !== undefined )
|
||||
{ |
||||
clearInterval(rem.titflash); |
||||
} |
||||
document.title = rem.webTitle; // 改变浏览器标题
|
||||
} |
||||
|
||||
// 播放上一首歌
|
||||
function prevMusic() { |
||||
playList(rem.playid - 1); |
||||
} |
||||
|
||||
// 播放下一首歌
|
||||
function nextMusic() { |
||||
switch (rem.order ? rem.order : 1) { |
||||
case 1,2:
|
||||
playList(rem.playid + 1); |
||||
break; |
||||
case 3:
|
||||
if (musicList[1] && musicList[1].item.length) { |
||||
var id = parseInt(Math.random() * musicList[1].item.length); |
||||
playList(id); |
||||
} |
||||
break; |
||||
default: |
||||
playList(rem.playid + 1);
|
||||
break; |
||||
} |
||||
} |
||||
// 自动播放时的下一首歌
|
||||
function autoNextMusic() { |
||||
if(rem.order && rem.order === 1) { |
||||
playList(rem.playid); |
||||
} else { |
||||
nextMusic(); |
||||
} |
||||
} |
||||
|
||||
// 歌曲时间变动回调函数
|
||||
function updateProgress(){ |
||||
// 暂停状态不管
|
||||
if(rem.paused !== false) return true; |
||||
// 同步进度条
|
||||
music_bar.goto(rem.audio[0].currentTime / rem.audio[0].duration); |
||||
// 同步歌词显示
|
||||
scrollLyric(rem.audio[0].currentTime); |
||||
} |
||||
|
||||
// 显示的列表中的某一项点击后的处理函数
|
||||
// 参数：歌曲在列表中的编号
|
||||
function listClick(no) { |
||||
// 记录要播放的歌曲的id
|
||||
var tmpid = no; |
||||
|
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) { |
||||
console.log("点播了列表中的第 " + (no + 1) + " 首歌 " + musicList[rem.dislist].item[no].name); |
||||
} |
||||
|
||||
// 搜索列表的歌曲要额外处理
|
||||
if(rem.dislist === 0) { |
||||
|
||||
// 没播放过
|
||||
if(rem.playlist === undefined) { |
||||
rem.playlist = 1; // 设置播放列表为 正在播放 列表
|
||||
rem.playid = musicList[1].item.length - 1; // 临时设置正在播放的曲目为 正在播放 列表的最后一首
|
||||
} |
||||
|
||||
// 获取选定歌曲的信息
|
||||
var tmpMusic = musicList[0].item[no]; |
||||
|
||||
|
||||
// 查找当前的播放列表中是否已经存在这首歌
|
||||
for(var i=0; i<musicList[1].item.length; i++) { |
||||
if(musicList[1].item[i].id == tmpMusic.id && musicList[1].item[i].source == tmpMusic.source) { |
||||
tmpid = i; |
||||
playList(tmpid); // 找到了直接播放
|
||||
return true; // 退出函数
|
||||
} |
||||
} |
||||
|
||||
|
||||
// 将点击的这项追加到正在播放的条目的下方
|
||||
musicList[1].item.splice(rem.playid + 1, 0, tmpMusic); |
||||
tmpid = rem.playid + 1; |
||||
|
||||
// 正在播放 列表项已发生变更，进行保存
|
||||
playerSavedata('playing', musicList[1].item); // 保存正在播放列表
|
||||
} else { // 普通列表
|
||||
// 与之前不是同一个列表了（在播放别的列表的歌曲）或者是首次播放
|
||||
if((rem.dislist !== rem.playlist && rem.dislist !== 1) || rem.playlist === undefined) { |
||||
rem.playlist = rem.dislist; // 记录正在播放的列表
|
||||
musicList[1].item = musicList[rem.playlist].item; // 更新正在播放列表中音乐
|
||||
|
||||
// 正在播放 列表项已发生变更，进行保存
|
||||
playerSavedata('playing', musicList[1].item); // 保存正在播放列表
|
||||
|
||||
// 刷新正在播放的列表的动画
|
||||
refreshSheet(); // 更改正在播放的列表的显示
|
||||
} |
||||
} |
||||
|
||||
playList(tmpid); |
||||
|
||||
return true; |
||||
} |
||||
|
||||
// 播放正在播放列表中的歌曲
|
||||
// 参数：歌曲在列表中的ID
|
||||
function playList(id) { |
||||
// 第一次播放
|
||||
if(rem.playlist === undefined) { |
||||
pause(); |
||||
return true; |
||||
} |
||||
|
||||
// 没有歌曲，跳出
|
||||
if(musicList[1].item.length <= 0) return true; |
||||
|
||||
// ID 范围限定
|
||||
if(id >= musicList[1].item.length) id = 0; |
||||
if(id < 0) id = musicList[1].item.length - 1; |
||||
|
||||
// 记录正在播放的歌曲在正在播放列表中的 id
|
||||
rem.playid = id; |
||||
|
||||
// 如果链接为空，则 ajax 获取数据后再播放
|
||||
if(musicList[1].item[id].url === null || musicList[1].item[id].url === "") { |
||||
ajaxUrl(musicList[1].item[id], play); |
||||
} else { |
||||
play(musicList[1].item[id]); |
||||
} |
||||
} |
||||
|
||||
// 初始化 Audio
|
||||
function initAudio() { |
||||
rem.audio = $('<audio></audio>').appendTo('body'); |
||||
|
||||
// 应用初始音量
|
||||
rem.audio[0].volume = volume_bar.percent; |
||||
// 绑定歌曲进度变化事件
|
||||
rem.audio[0].addEventListener('timeupdate', updateProgress); // 更新进度
|
||||
rem.audio[0].addEventListener('play', audioPlay); // 开始播放了
|
||||
rem.audio[0].addEventListener('pause', audioPause); // 暂停
|
||||
$(rem.audio[0]).on('ended', autoNextMusic); // 播放结束
|
||||
rem.audio[0].addEventListener('error', audioErr); // 播放器错误处理
|
||||
} |
||||
|
||||
|
||||
// 播放音乐
|
||||
// 参数：要播放的音乐数组
|
||||
function play(music) { |
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) { |
||||
console.log('开始播放 - ' + music.name); |
||||
|
||||
console.info('id: "' + music.id + '",\n' +
|
||||
'name: "' + music.name + '",\n' + |
||||
'artist: "' + music.artist + '",\n' + |
||||
'album: "' + music.album + '",\n' + |
||||
'source: "' + music.source + '",\n' + |
||||
'url_id: "' + music.url_id + '",\n' +
|
||||
'pic_id: "' + music.pic_id + '",\n' +
|
||||
'lyric_id: "' + music.lyric_id + '",\n' +
|
||||
'pic: "' + music.pic + '",\n' + |
||||
'url: "' + music.url + '"'); |
||||
} |
||||
|
||||
// 遇到错误播放下一首歌
|
||||
if(music.url == "err") { |
||||
audioErr(); // 调用错误处理函数
|
||||
return false; |
||||
} |
||||
|
||||
addHis(music); // 添加到播放历史
|
||||
|
||||
// 如果当前主界面显示的是播放历史，那么还需要刷新列表显示
|
||||
if(rem.dislist == 2 && rem.playlist !== 2) { |
||||
loadList(2); |
||||
} else { |
||||
refreshList(); // 更新列表显示
|
||||
} |
||||
|
||||
try { |
||||
rem.audio[0].pause(); |
||||
rem.audio.attr('src', music.url); |
||||
rem.audio[0].play(); |
||||
} catch(e) { |
||||
audioErr(); // 调用错误处理函数
|
||||
return; |
||||
} |
||||
|
||||
rem.errCount = 0; // 连续播放失败的歌曲数归零
|
||||
music_bar.goto(0); // 进度条强制归零
|
||||
changeCover(music); // 更新封面展示
|
||||
ajaxLyric(music, lyricCallback); // ajax加载歌词
|
||||
music_bar.lock(false); // 取消进度条锁定
|
||||
} |
||||
|
||||
|
||||
// 我的要求并不高，保留这一句版权信息可好？
|
||||
// 保留了，你不会损失什么；而保留版权，是对作者最大的尊重。
|
||||
console.info('欢迎使用 MKOnlinePlayer!\n当前版本：'+mkPlayer.version+' \n作者：mengkun(https://mkblog.cn)\n歌曲来源于各大音乐平台\nGithub：https://github.com/mengkunsoft/MKOnlineMusicPlayer'); |
||||
|
||||
// 音乐进度条拖动回调函数
|
||||
function mBcallback(newVal) { |
||||
var newTime = rem.audio[0].duration * newVal; |
||||
// 应用新的进度
|
||||
rem.audio[0].currentTime = newTime; |
||||
refreshLyric(newTime); // 强制滚动歌词到当前进度
|
||||
} |
||||
|
||||
// 音量条变动回调函数
|
||||
// 参数：新的值
|
||||
function vBcallback(newVal) { |
||||
if(rem.audio[0] !== undefined) { // 音频对象已加载则立即改变音量
|
||||
rem.audio[0].volume = newVal; |
||||
} |
||||
|
||||
if($(".btn-quiet").is('.btn-state-quiet')) { |
||||
$(".btn-quiet").removeClass("btn-state-quiet"); // 取消静音
|
||||
} |
||||
|
||||
if(newVal === 0) $(".btn-quiet").addClass("btn-state-quiet"); |
||||
|
||||
playerSavedata('volume', 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 != null)? tmp_vol: (rem.isMobile? 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); |
||||
};
|
||||
|
||||
// mk进度条插件
|
||||
// 进度条框 id，初始量，回调函数
|
||||
mkpgb = function(bar, percent, callback){
|
||||
this.bar = bar; |
||||
this.percent = percent; |
||||
this.callback = callback; |
||||
this.locked = false; |
||||
this.init();
|
||||
}; |
||||
|
||||
mkpgb.prototype = { |
||||
// 进度条初始化
|
||||
init : function(){
|
||||
var mk = this,mdown = false; |
||||
// 加载进度条html元素
|
||||
$(mk.bar).html('<div class="mkpgb-bar"></div><div class="mkpgb-cur"></div><div class="mkpgb-dot"></div>'); |
||||
// 获取偏移量
|
||||
mk.minLength = $(mk.bar).offset().left;
|
||||
mk.maxLength = $(mk.bar).width() + mk.minLength; |
||||
// 窗口大小改变偏移量重置
|
||||
$(window).resize(function(){ |
||||
mk.minLength = $(mk.bar).offset().left;
|
||||
mk.maxLength = $(mk.bar).width() + mk.minLength; |
||||
}); |
||||
// 监听小点的鼠标按下事件
|
||||
$(mk.bar + " .mkpgb-dot").mousedown(function(e){ |
||||
e.preventDefault(); // 取消原有事件的默认动作
|
||||
}); |
||||
// 监听进度条整体的鼠标按下事件
|
||||
$(mk.bar).mousedown(function(e){ |
||||
if(!mk.locked) mdown = true; |
||||
barMove(e); |
||||
}); |
||||
// 监听鼠标移动事件，用于拖动
|
||||
$("html").mousemove(function(e){ |
||||
barMove(e); |
||||
}); |
||||
// 监听鼠标弹起事件，用于释放拖动
|
||||
$("html").mouseup(function(e){ |
||||
mdown = false; |
||||
}); |
||||
|
||||
function barMove(e) { |
||||
if(!mdown) return; |
||||
var percent = 0; |
||||
if(e.clientX < mk.minLength){
|
||||
percent = 0;
|
||||
}else if(e.clientX > mk.maxLength){
|
||||
percent = 1; |
||||
}else{
|
||||
percent = (e.clientX - mk.minLength) / (mk.maxLength - mk.minLength); |
||||
} |
||||
mk.callback(percent); |
||||
mk.goto(percent); |
||||
return true; |
||||
} |
||||
|
||||
mk.goto(mk.percent); |
||||
|
||||
return true; |
||||
}, |
||||
// 跳转至某处
|
||||
goto : function(percent) { |
||||
if(percent > 1) percent = 1; |
||||
if(percent < 0) percent = 0; |
||||
this.percent = percent; |
||||
$(this.bar + " .mkpgb-dot").css("left", (percent*100) +"%");
|
||||
$(this.bar + " .mkpgb-cur").css("width", (percent*100)+"%"); |
||||
return true; |
||||
}, |
||||
// 锁定进度条
|
||||
lock : function(islock) { |
||||
if(islock) { |
||||
this.locked = true; |
||||
$(this.bar).addClass("mkpgb-locked"); |
||||
} else { |
||||
this.locked = false; |
||||
$(this.bar).removeClass("mkpgb-locked"); |
||||
} |
||||
return true; |
||||
} |
||||
};
|
||||
|
||||
// 快捷键切歌，代码来自 @茗血(https://www.52benxi.cn/)
|
||||
document.onkeydown = function showkey(e) { |
||||
var key = e.keyCode || e.which || e.charCode; |
||||
var ctrl = e.ctrlKey || e.metaKey; |
||||
var isFocus = $('input').is(":focus");
|
||||
if (ctrl && key == 37) playList(rem.playid - 1); // Ctrl+左方向键 切换上一首歌
|
||||
if (ctrl && key == 39) playList(rem.playid + 1); // Ctrl+右方向键 切换下一首歌
|
||||
if (key == 32 && isFocus == false) pause(); // 空格键 播放/暂停歌曲
|
||||
} |
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 79 KiB |
@ -0,0 +1,109 @@ |
||||
<!-- |
||||
* Let's Kill IE6 插件 |
||||
* @author Carlos <anzhengchao@gmail.com> |
||||
* @link http://overtrue.me |
||||
* @version 2.2 |
||||
--> |
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||
<head> |
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
||||
<title>不支持的浏览器</title> |
||||
</head> |
||||
<body> |
||||
|
||||
|
||||
<style> |
||||
body { |
||||
background:#fff !important; |
||||
} |
||||
#lets-kill-ie6-wrapper { |
||||
position:fixed; |
||||
height:100%; |
||||
height:100%; |
||||
top:0; |
||||
left:0; |
||||
right:0; |
||||
bottom:0; |
||||
z-index:99999999; |
||||
background:#fff; |
||||
} |
||||
#lets-kill-ie6,#lets-kill-ie6 * { |
||||
margin:0; |
||||
padding:0; |
||||
} |
||||
#lets-kill-ie6 { |
||||
height:450px; |
||||
width:702px; |
||||
position:absolute; |
||||
left:50%; |
||||
margin-left:-351px; |
||||
top:50%; |
||||
margin-top:-265px |
||||
} |
||||
#lets-kill-ie6 div.lets-kill-ie6-top { |
||||
background:#fff url(img/top.jpg) center center no-repeat; |
||||
height:360px; |
||||
clear:both |
||||
} |
||||
#lets-kill-ie6 a.lets-kill-ie6-a { |
||||
outline:0; |
||||
float:left; |
||||
border:1px solid #fff; |
||||
display:inline-block; |
||||
width:98px; |
||||
height:87px; |
||||
background-position:center center; |
||||
background-repeat:no-repeat |
||||
} |
||||
#lets-kill-ie6 a.lets-kill-ie6-a:hover { |
||||
border:1px solid #bebebe |
||||
} |
||||
#lets-kill-ie6 a.chrome { |
||||
background-image:url(img/chrome.jpg) |
||||
} |
||||
#lets-kill-ie6 a.firefox { |
||||
background-image:url(img/firefox.jpg) |
||||
} |
||||
#lets-kill-ie6 a.safari { |
||||
background-image:url(img/safari.jpg) |
||||
} |
||||
#lets-kill-ie6 a.opera { |
||||
background-image:url(img/opera.jpg) |
||||
} |
||||
#lets-kill-ie6 a.c360 { |
||||
background-image:url(img/360.jpg) |
||||
} |
||||
|
||||
#lets-kill-ie6 .lets-kill-ie6-links { |
||||
height:100px; |
||||
padding-left:120px; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
<div id="lets-kill-ie6-wrapper"> |
||||
<div id="lets-kill-ie6"> |
||||
<div class="lets-kill-ie6-top"> |
||||
</div> |
||||
<div class="lets-kill-ie6-links"> |
||||
<a href="http://dl.360safe.com/netunion/20140425/360se+14478+n4a1de2568d.exe" target="_blank" class="lets-kill-ie6-a c360" |
||||
title="360安全浏览器（chrome内核）"> |
||||
</a> |
||||
<a href="http://www.google.cn/chrome/browser/" target="_blank" class="lets-kill-ie6-a chrome" |
||||
title="谷歌Chrome浏览器"> |
||||
</a> |
||||
<a href="http://www.firefox.com.cn/" target="_blank" class="lets-kill-ie6-a firefox" |
||||
title="火狐浏览器"> |
||||
</a> |
||||
<a href="http://support.apple.com/downloads/#internet" target="_blank" |
||||
class="lets-kill-ie6-a safari" title="苹果Safari浏览器"> |
||||
</a> |
||||
<a href="http://www.opera.com/" target="_blank" class="lets-kill-ie6-a opera" |
||||
title="Opera浏览器"> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,2 @@ |
||||
/*! layer mobile-v2.0.0 Web弹层组件 MIT License http://layer.layui.com/mobile By 贤心 */ |
||||
;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window); |
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 701 B |
|
After Width: | Height: | Size: 1.7 KiB |
Loading…
Reference in new issue