mengkunsoft
parent
58981381d6
commit
8d4951890a
|
|
@ -1,17 +0,0 @@
|
|||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
|
||||
# Custom for Visual Studio
|
||||
*.cs diff=csharp
|
||||
|
||||
# Standard to msysgit
|
||||
*.doc diff=astextplain
|
||||
*.DOC diff=astextplain
|
||||
*.docx diff=astextplain
|
||||
*.DOCX diff=astextplain
|
||||
*.dot diff=astextplain
|
||||
*.DOT diff=astextplain
|
||||
*.pdf diff=astextplain
|
||||
*.PDF diff=astextplain
|
||||
*.rtf diff=astextplain
|
||||
*.RTF diff=astextplain
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
# Windows image file caches
|
||||
Thumbs.db
|
||||
ehthumbs.db
|
||||
|
||||
# Folder config file
|
||||
Desktop.ini
|
||||
|
||||
# Recycle Bin used on file shares
|
||||
$RECYCLE.BIN/
|
||||
|
||||
# Windows Installer files
|
||||
*.cab
|
||||
*.msi
|
||||
*.msm
|
||||
*.msp
|
||||
|
||||
# Windows shortcuts
|
||||
*.lnk
|
||||
|
||||
# =========================
|
||||
# Operating System Files
|
||||
# =========================
|
||||
|
||||
# OSX
|
||||
# =========================
|
||||
|
||||
.DS_Store
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
|
||||
# Thumbnails
|
||||
._*
|
||||
|
||||
# Files that might appear on external disk
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
|
||||
# Directories potentially created on remote AFP share
|
||||
.AppleDB
|
||||
.AppleDesktop
|
||||
Network Trash Folder
|
||||
Temporary Items
|
||||
.apdisk
|
||||
107
README.MD
107
README.MD
|
|
@ -1,18 +1,95 @@
|
|||
======================================
|
||||
2016/10/27 MK在线音乐播放器 V 1.1
|
||||
MKOnlineMusicPlayer V2.0
|
||||
========
|
||||
MKOnlineMusicPlayer 是一款开源的基于网易云音乐api的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人音乐播放列表同步等功能。
|
||||
|
||||
修复宽屏下背景覆盖缺失的BUG；
|
||||
修复打开页面后直接点击播放无效的BUG；
|
||||
修复EDGE浏览器点击下载时文件名为乱码的BUG；
|
||||
播放已下架的音乐，会给出无法播放的提示；
|
||||
修复歌词获取失败时无法清除原有歌词的BUG；
|
||||
暂停播放时停止歌词滚动，方便复制歌词；
|
||||
搜索内容为空时会弹出提示。
|
||||
前端界面参照 QQ 音乐网页版进行布局，同时采用了流行的响应式设计，无论是在PC端还是在手机端，均能给您带来原生 app 般的使用体验。
|
||||
|
||||
======================================
|
||||
2016/10/25 MK在线音乐播放器 V 1.0
|
||||
### 相关链接
|
||||
-----
|
||||
**在线演示** [http://lab.mkblog.cn/music/](http://lab.mkblog.cn/music/)
|
||||
|
||||
支持搜索并播放音乐；
|
||||
支持一键提取音乐外链；
|
||||
支持音乐下载；
|
||||
支持显示歌曲封面、歌词。
|
||||
**详细介绍** [http://mkblog.cn/757/](http://mkblog.cn/757/)
|
||||
|
||||
**GitHub** [https://github.com/mengkunsoft/MKOnlineMusicPlayer](https://github.com/mengkunsoft/MKOnlineMusicPlayer)
|
||||
|
||||
### 注意事项
|
||||
-----
|
||||
#### 关于API文件
|
||||
由于网易云音乐官方封锁了国外的访问，因此本播放器的 api.php 在海外的空间上可能无法运行(其实有个“你懂的”的功能，请自行挖掘)，建议在国内空间使用。
|
||||
|
||||
#### 关于兼容性
|
||||
本播放器设计支持 IE9及以上的现代浏览器。并且已在 Chrome、firefox、IE11 等浏览器测试使用正常。
|
||||
|
||||
#### 关于版权
|
||||
本播放器由 [mengkun(http://mkblog.cn)](http://mkblog.cn) 开发，您可以随意修改、使用、转载。使用或转载时`请务必保留出处`，抱拳了各位老铁们！
|
||||
|
||||
#### 关于歌曲
|
||||
播放器中采用了 [网易云音乐(http://music.163.com/)](http://music.163.com/) 的 api，因此相对应的歌曲版权归网易云音乐所有。支持正版音乐，请使用官方版网易云。
|
||||
|
||||
#### 其它
|
||||
作者很忙，非诚勿扰。欢迎提交 BUG 及好的建议，不欢迎一上来就问一些基础的东西及唠东唠西。
|
||||
|
||||
### 更新日志
|
||||
-----
|
||||
#### v2.0 Beta `2017/3/18`
|
||||
- 所有代码均推翻重写，前端界面全新改版
|
||||
- 完善对手机端的适配，新支持 IE9~IE11 浏览器
|
||||
- 修复 IE11 下点击下载歌曲名字乱码的BUG
|
||||
- 新增“正在播放”、“播放历史”列表功能
|
||||
- 新增后台自定义播放列表功能，支持多种列表定义模式
|
||||
- 新增本地记录用户设置及播放列表功能
|
||||
- 进度条支持响应点击事件
|
||||
|
||||
#### v1.3 `未发布`
|
||||
- 新增同步用户歌单功能
|
||||
- 修复一些已知BUG
|
||||
(因逻辑过于混乱，代码过于庞杂，此版本废弃)
|
||||
|
||||
#### v1.1 `2016/10/27`
|
||||
- 修复宽屏下背景覆盖缺失的BUG
|
||||
- 修复打开页面后直接点击播放无效的BUG
|
||||
- 修复EDGE浏览器点击下载时文件名为乱码的BUG
|
||||
- 优化播放已下架的音乐，会给出无法播放的提示
|
||||
- 修复歌词获取失败时无法清除原有歌词的BUG
|
||||
- 暂停播放时停止歌词滚动，方便复制歌词
|
||||
- 优化搜索内容为空时弹出提示
|
||||
|
||||
#### v1.0 `2016/10/25`
|
||||
- 完成搜索并播放音乐功能
|
||||
- 完成一键提取音乐外链功能
|
||||
- 完成音乐下载功能
|
||||
- 完成显示歌曲封面、歌词功能
|
||||
|
||||
|
||||
### 开发文档[待完善]
|
||||
-----
|
||||
#### 播放列表DIY教程
|
||||
本播放器支持后台自定义播放列表。打开 `js/musicList.js`，按照里面的说明对应修改即可。
|
||||
|
||||
#### 播放器DIY教程
|
||||
除了自定义播放列表，本播放器还支持一些 DIY 设定，比如修改 api.php 文件的默认路径、修改搜索框的默认搜索内容等。具体请打开 `js/player.js` 查看
|
||||
|
||||
#### rem 变量表
|
||||
程序中的rem数组用于存储全局变量，具体的成员(部分)及作用见下表：
|
||||
|
||||
| 变量名 | 用途 |
|
||||
| ----------- | ----------- |
|
||||
| rem.playlist | 当前正在播放的播放列表编号 |
|
||||
| rem.playid | 正在播放的这首歌在播放列表中的编号 |
|
||||
| rem.dislist | 当前显示的列表的列表编号 |
|
||||
| rem.loadPage | 搜索功能已加载的页码 |
|
||||
| rem.wd | 当前的搜索词 |
|
||||
| rem.uid | 当前已同步的用户的网易云 ID |
|
||||
| rem.uname | 已登录用户的用户名 |
|
||||
| rem.sheetList | 歌单容器操作对象 |
|
||||
| rem.mainList | 歌曲列表容器操作对象 |
|
||||
|
||||
### 致谢
|
||||
-----
|
||||
#### 特别感谢 `网易云音乐`
|
||||
|
||||
#### 采用的开源模块
|
||||
- **Jquery**：js主流开发框架 [http://jquery.com/](http://jquery.com/)
|
||||
- **layer**：一款强大的web弹层组件 [http://layer.layui.com/](http://layer.layui.com/)
|
||||
- **mCustomScrollbar**：jQuery自定义滚动条样式插件 [http://manos.malihu.gr/jquery-custom-content-scroller/](http://manos.malihu.gr/jquery-custom-content-scroller/)
|
||||
- **Let's Kill IE6**：消灭IE [http://overtrue.me](http://overtrue.me)
|
||||
|
|
|
|||
320
api.php
320
api.php
|
|
@ -1,144 +1,178 @@
|
|||
<?php
|
||||
|
||||
/*
|
||||
MK在线音乐播放器 V 1.0
|
||||
支持搜索并播放音乐；
|
||||
支持一键提取音乐外链；
|
||||
支持显示歌曲封面、歌词。
|
||||
|
||||
首发于吾爱破解论坛（http://www.52pojie.cn/）
|
||||
孟坤网页实验室（http://lab.mkblog.cn/）出品
|
||||
|
||||
前端界面修改自 http://sc.chinaz.com/jiaoben/150714514230.htm
|
||||
音乐资源来自于 网易云音乐
|
||||
|
||||
二次开发请保留以上信息，谢谢！
|
||||
*/
|
||||
|
||||
//参考资料
|
||||
//https://segmentfault.com/q/1010000002941430/a-1020000002941456
|
||||
//http://www.itiyun.com/ent-163-music-api.html
|
||||
//http://moonlib.com/606.html
|
||||
//http://www.miyay.cn/83.html
|
||||
|
||||
//前端界面来自 http://sc.chinaz.com/jiaoben/150714514230.htm
|
||||
|
||||
header("Content-type:text/html;charset=utf-8");
|
||||
|
||||
function curl($url,$post_data){ //从网易云音乐读取数据
|
||||
$curl = curl_init();
|
||||
|
||||
curl_setopt($curl, CURLOPT_URL,$url);
|
||||
curl_setopt($curl, CURLOPT_RETURNTRANSFER,1);
|
||||
|
||||
$header =array(
|
||||
'Host: music.163.com',
|
||||
'Origin: http://music.163.com',
|
||||
'User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36',
|
||||
'Content-Type: application/x-www-form-urlencoded',
|
||||
'Referer: http://music.163.com/search/',
|
||||
);
|
||||
|
||||
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
|
||||
|
||||
curl_setopt($curl, CURLOPT_POST, 1);
|
||||
curl_setopt($curl, CURLOPT_POSTFIELDS, $post_data);
|
||||
$src = curl_exec($curl);
|
||||
curl_close($curl);
|
||||
return $src;
|
||||
}
|
||||
|
||||
@$types = $_POST['types']?$_POST['types']:$_GET['types']; //api类型
|
||||
switch($types)
|
||||
{
|
||||
case "musicInfo": //获取歌曲信息
|
||||
@$id = $_POST['id']?$_POST['id']:$_GET['id']; //歌曲ID
|
||||
if(!$id){
|
||||
$tempArr = array("code"=>-1,"msg"=>"歌曲ID为空");
|
||||
echojson(json_encode($tempArr));
|
||||
}else{
|
||||
$url= "http://music.163.com/api/song/detail/?id={$id}&ids=%5B{$id}%5D&csrf_token="; //请求url
|
||||
$post_data = '';
|
||||
echojson(curl($url,$post_data));
|
||||
}
|
||||
break;
|
||||
|
||||
case "lyric": //获取歌词
|
||||
@$id = $_POST['id']?$_POST['id']:$_GET['id']; //歌曲ID
|
||||
if(!$id){
|
||||
$tempArr = array("code"=>-1,"msg"=>"歌曲ID为空");
|
||||
echojson(json_encode($tempArr));
|
||||
}else{
|
||||
$url = "http://music.163.com/api/song/lyric?os=pc&id=" . $id . "&lv=-1&kv=-1&tv=-1"; //请求url
|
||||
$post_data = '';
|
||||
echojson(curl($url,$post_data));
|
||||
}
|
||||
break;
|
||||
|
||||
case "download": //下载歌曲
|
||||
@$fileurl = $_POST['url']?$_POST['url']:$_GET['url']; //链接
|
||||
@$musicname = $_POST['name']?$_POST['name']:$_GET['name']; //歌曲名字
|
||||
|
||||
if(!$fileurl){
|
||||
$tempArr = array("code"=>-1,"msg"=>"歌曲链接为空");
|
||||
echojson(json_encode($tempArr));
|
||||
}else{
|
||||
|
||||
$ua = $_SERVER["HTTP_USER_AGENT"];
|
||||
$filename = $musicname . ".mp3";
|
||||
$encoded_filename = urlencode($filename);
|
||||
$encoded_filename = str_replace("+", "%20", $encoded_filename);
|
||||
header("Content-Type: application/force-download");
|
||||
if (preg_match("/MSIE/", $ua)) {
|
||||
header('Content-Disposition: attachment; filename="' . $encoded_filename . '"');
|
||||
} else if (preg_match("/Firefox/", $ua)) { //火狐浏览器
|
||||
header('Content-Disposition: attachment; filename*="utf8\'\'' . $filename . '"');
|
||||
} else if (preg_match("/Edge/", $ua)) { //edge浏览器
|
||||
header('Content-Disposition: attachment; filename="' . $encoded_filename . '"');
|
||||
} else {
|
||||
header('Content-Disposition: attachment; filename="' . $filename . '"');
|
||||
}
|
||||
//echo $musicname;
|
||||
//header("Content-Type: application/force-download");
|
||||
//header('Content-Disposition: attachment; filename="'.$musicname.'.mp3"');
|
||||
//header('Content-Transfer-Encoding: binary');
|
||||
$mp3file = file_get_contents($fileurl);
|
||||
echo $mp3file;
|
||||
}
|
||||
break;
|
||||
|
||||
case "userlist": //获取用户歌单
|
||||
//http://music.163.com/api/user/playlist/?offset=0&limit=1001&uid=275545417
|
||||
break;
|
||||
|
||||
case "search": //搜索歌曲
|
||||
default:
|
||||
@$s = $_POST['name']?$_POST['name']:$_GET['name']; //歌名
|
||||
@$limit = $_POST['count']?$_POST['count']:$_GET['count']; //每页显示数量
|
||||
@$pages = $_POST['pages']?$_POST['pages']:$_GET['pages']; //页码
|
||||
if($pages>1000 || $pages<1)$pages=1; //纠正错误的值
|
||||
if($limit == "") $limit = 20;
|
||||
@$offset= ($pages-1) * $limit; //偏移量
|
||||
|
||||
if(!$s){
|
||||
$tempArr = array("code"=>-1,"msg"=>"歌名为空");
|
||||
echojson(json_encode($tempArr));
|
||||
}else{
|
||||
$url= "http://music.163.com/api/search/get/web?csrf_token="; //请求url
|
||||
$post_data = 'hlpretag=<span class="s-fc7">&hlposttag=</span>&s='. $s . '&type=1&offset='. $offset . '&total=true&limit=' . $limit;
|
||||
echojson(curl($url,$post_data));
|
||||
}
|
||||
}
|
||||
|
||||
function echojson($data) //json和jsonp通用
|
||||
{
|
||||
@$callback = $_POST['callback']?$_POST['callback']:$_GET['callback'];
|
||||
if($callback != "") //输出jsonp格式
|
||||
{
|
||||
echo $callback."(".$data.")";
|
||||
}
|
||||
else
|
||||
{
|
||||
echo $data;
|
||||
}
|
||||
<?php
|
||||
/**************************************************
|
||||
* MKOnlinePlayer v2.0
|
||||
* 后台音乐数据抓取模块
|
||||
* 编写：mengkun(http://mkblog.cn)
|
||||
* 时间：2017-3-16
|
||||
*************************************************/
|
||||
|
||||
// api设置
|
||||
$GLOBALS['config'] = array(
|
||||
'proxy' => false, // 是否使用代理（true/false）
|
||||
'proxyIP' => '222.186.34.84', // 代理 IP
|
||||
'proxyPort' => 8998, // 代理端口
|
||||
'proxyUserpwd' => '' // 代理账号及密码(不需要则留空) 格式为 '用户名:密码'
|
||||
);
|
||||
|
||||
//参考资料
|
||||
// https://github.com/darknessomi/musicbox/wiki/%E7%BD%91%E6%98%93%E4%BA%91%E9%9F%B3%E4%B9%90API%E5%88%86%E6%9E%90
|
||||
|
||||
/**
|
||||
* Curl网易云获取数据函数
|
||||
* @param $url api url
|
||||
* @param $post_data post传送的数据
|
||||
* @return 获取结果
|
||||
*/
|
||||
function curl($url, $post_data){ //从网易云音乐读取数据
|
||||
$curl = curl_init();
|
||||
$header =array(
|
||||
'Host: music.163.com',
|
||||
'Origin: http://music.163.com',
|
||||
'User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36',
|
||||
'Content-Type: application/x-www-form-urlencoded',
|
||||
'Referer: http://music.163.com/search/',
|
||||
);
|
||||
curl_setopt($curl, CURLOPT_URL,$url);
|
||||
curl_setopt($curl, CURLOPT_RETURNTRANSFER,1);
|
||||
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
|
||||
curl_setopt($curl, CURLOPT_POST, 1);
|
||||
curl_setopt($curl, CURLOPT_POSTFIELDS, $post_data);
|
||||
|
||||
if($GLOBALS['config']['proxy'] == true) { // 开启了代理
|
||||
curl_setopt($curl, CURLOPT_PROXYAUTH, CURLAUTH_BASIC); // 代理认证模式
|
||||
curl_setopt($curl, CURLOPT_PROXY, $GLOBALS['config']['proxyIP']); // 代理服务器地址
|
||||
curl_setopt($curl, CURLOPT_PROXYPORT, $GLOBALS['config']['proxyPort']); // 代理服务器端口
|
||||
if($GLOBALS['config']['proxyUserpwd'] != '') {
|
||||
curl_setopt($curl, CURLOPT_PROXYUSERPWD, $GLOBALS['config']['proxyUserpwd']); // http代理认证帐号，username:password的格式
|
||||
}
|
||||
curl_setopt($curl, CURLOPT_PROXYTYPE, CURLPROXY_HTTP); // 使用http代理模式
|
||||
}
|
||||
|
||||
$src = curl_exec($curl);
|
||||
curl_close($curl);
|
||||
return $src;
|
||||
}
|
||||
|
||||
$types = getParam('types'); //api类型
|
||||
switch($types)
|
||||
{
|
||||
case "musicInfo": //获取歌曲信息
|
||||
$id = getParam('id'); //歌曲ID
|
||||
if(!$id){
|
||||
$tempArr = array("code"=>-1,"msg"=>"歌曲ID为空");
|
||||
echojson(json_encode($tempArr));
|
||||
}else{
|
||||
$url= "http://music.163.com/api/song/detail/?id={$id}&ids=%5B{$id}%5D&csrf_token="; //请求url
|
||||
$post_data = '';
|
||||
echojson(curl($url,$post_data));
|
||||
}
|
||||
break;
|
||||
|
||||
case "lyric": //获取歌词
|
||||
$id = getParam('id'); //歌曲ID
|
||||
if(!$id){
|
||||
$tempArr = array("code"=>-1,"msg"=>"歌曲ID为空");
|
||||
echojson(json_encode($tempArr));
|
||||
}else{
|
||||
$url = "http://music.163.com/api/song/lyric?os=pc&id=" . $id . "&lv=-1&kv=-1&tv=-1"; //请求url
|
||||
$post_data = '';
|
||||
echojson(curl($url,$post_data));
|
||||
}
|
||||
break;
|
||||
|
||||
case "download": //下载歌曲
|
||||
$fileurl = getParam('url'); //链接
|
||||
$musicname = getParam('name'); //歌曲名字
|
||||
|
||||
if(!$fileurl){
|
||||
$tempArr = array("code"=>-1,"msg"=>"歌曲链接为空");
|
||||
echojson(json_encode($tempArr));
|
||||
}else{
|
||||
$ua = $_SERVER["HTTP_USER_AGENT"];
|
||||
$filename = $musicname . ".mp3";
|
||||
$encoded_filename = urlencode($filename);
|
||||
$encoded_filename = str_replace("+", "%20", $encoded_filename);
|
||||
header("Content-Type: application/force-download");
|
||||
if (preg_match("/MSIE/", $ua) || preg_match("/rv\:11\.0/", $ua)) { // IE浏览器
|
||||
header('Content-Disposition: attachment; filename="' . $encoded_filename . '"');
|
||||
} else if (preg_match("/Firefox/", $ua)) { //火狐浏览器
|
||||
header('Content-Disposition: attachment; filename*="utf8\'\'' . $filename . '"');
|
||||
} else if (preg_match("/Edge/", $ua)) { //edge浏览器
|
||||
header('Content-Disposition: attachment; filename="' . $encoded_filename . '"');
|
||||
} else {
|
||||
header('Content-Disposition: attachment; filename="' . $filename . '"');
|
||||
}
|
||||
$mp3file = file_get_contents($fileurl);
|
||||
echo $mp3file;
|
||||
}
|
||||
break;
|
||||
|
||||
case "userlist": // 获取用户歌单列表
|
||||
$uid = getParam('uid'); //用户ID
|
||||
if(!$uid){
|
||||
$tempArr = array("code"=>-1,"msg"=>"用户ID为空");
|
||||
echojson(json_encode($tempArr));
|
||||
}
|
||||
$url= "http://music.163.com/api/user/playlist/?offset=0&limit=1001&uid=".$uid; //请求url
|
||||
$post_data = '';
|
||||
echojson(curl($url,$post_data));
|
||||
break;
|
||||
|
||||
case "playlist": // 获取歌单中的歌曲
|
||||
$id = getParam('id'); //歌单ID
|
||||
if(!$id){
|
||||
$tempArr = array("code"=>-1,"msg"=>"歌单ID为空");
|
||||
echojson(json_encode($tempArr));
|
||||
}
|
||||
$url= "http://music.163.com/api/playlist/detail?id={$id}&updateTime=-1"; //请求url
|
||||
$post_data = '';
|
||||
echojson(curl($url,$post_data));
|
||||
break;
|
||||
|
||||
case "search": //搜索歌曲
|
||||
default:
|
||||
$s = getParam('name'); //歌名
|
||||
$limit = getParam('count'); //每页显示数量
|
||||
$pages = getParam('pages'); //页码
|
||||
if($pages>1000 || $pages<1)$pages=1; //纠正错误的值
|
||||
if($limit == "") $limit = 20;
|
||||
$offset= ($pages-1) * $limit; //偏移量
|
||||
|
||||
if(!$s){
|
||||
$tempArr = array("code"=>-1,"msg"=>"歌名为空");
|
||||
echojson(json_encode($tempArr));
|
||||
}else{
|
||||
$url= "http://music.163.com/api/search/get/web?csrf_token="; //请求url
|
||||
$post_data = 'hlpretag=<span class="s-fc7">&hlposttag=</span>&s='. $s . '&type=1&offset='. $offset . '&total=true&limit=' . $limit;
|
||||
echojson(curl($url,$post_data));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取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($callback != "") //输出jsonp格式
|
||||
{
|
||||
echo $callback."(".$data.")";
|
||||
}
|
||||
else
|
||||
{
|
||||
echo $data;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
1120
css/player.css
1120
css/player.css
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,145 @@
|
|||
@charset "utf-8";
|
||||
/**************************************************
|
||||
* MKOnlinePlayer v2.0
|
||||
* 小屏幕样式修复
|
||||
* 编写：mengkun(http://mkblog.cn)
|
||||
* 时间：2017-3-16
|
||||
*************************************************/
|
||||
|
||||
/* 小于 900px 采用这个样式 */
|
||||
@media screen and (max-width: 900px) {
|
||||
/*隐藏头部logo*/
|
||||
.header {
|
||||
display: none;
|
||||
}
|
||||
/*中部顶格*/
|
||||
.center {
|
||||
top: 0;
|
||||
}
|
||||
.btn {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
.btn:hover {
|
||||
border: none;
|
||||
}
|
||||
.btn-bar {
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
/* 调出播放器按钮 */
|
||||
.btn[data-action='player'] {
|
||||
display: inline-block;
|
||||
}
|
||||
/*隐藏右侧歌词及封面*/
|
||||
.player {
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
.cover {
|
||||
margin-top: 60px;
|
||||
}
|
||||
#lyric {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.lyric {
|
||||
top: 260px;
|
||||
}
|
||||
|
||||
|
||||
/*数据区域占满整个屏幕*/
|
||||
.data-area {
|
||||
right: 0;
|
||||
}
|
||||
/*音乐名字拉长*/
|
||||
.music-name {
|
||||
margin-right: 30%;
|
||||
}
|
||||
/*专辑信息不显示*/
|
||||
.music-album {
|
||||
display: none;
|
||||
}
|
||||
/*歌手名字*/
|
||||
.auth-name {
|
||||
width: 30%;
|
||||
}
|
||||
/*列表菜单不显示*/
|
||||
.list-menu {
|
||||
display: none!important;
|
||||
}
|
||||
.music-name-cult {
|
||||
padding-right: 0!important;
|
||||
}
|
||||
/*控制按钮区域缩小*/
|
||||
.con-btn {
|
||||
width: 100px;
|
||||
}
|
||||
/*进度条调整*/
|
||||
.progress {
|
||||
width: auto;
|
||||
margin-left: 110px;
|
||||
margin-right: 10px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
/*音量控制区域隐藏*/
|
||||
.vol {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* 小于 500px 采用这个样式 */
|
||||
@media screen and (max-width: 500px) {
|
||||
.btn-bar {
|
||||
height: 35px;
|
||||
}
|
||||
.btn-box {
|
||||
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: #6A6969;
|
||||
}
|
||||
.center {
|
||||
bottom: 60px;
|
||||
}
|
||||
.data-area {
|
||||
top: 40px;
|
||||
}
|
||||
/* 歌单封面 */
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
images/bg.png
BIN
images/bg.png
Binary file not shown.
|
Before Width: | Height: | Size: 272 B |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
images/icons.png
BIN
images/icons.png
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
BIN
images/logo.png
BIN
images/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
BIN
images/pause.png
BIN
images/pause.png
Binary file not shown.
|
Before Width: | Height: | Size: 165 B |
BIN
images/play.png
BIN
images/play.png
Binary file not shown.
|
Before Width: | Height: | Size: 831 B |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
images/pro.png
BIN
images/pro.png
Binary file not shown.
|
Before Width: | Height: | Size: 125 B |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
BIN
images/sbtn.png
BIN
images/sbtn.png
Binary file not shown.
|
Before Width: | Height: | Size: 391 B |
Binary file not shown.
|
Before Width: | Height: | Size: 532 B |
BIN
images/tao.gif
BIN
images/tao.gif
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.9 KiB |
BIN
images/wave.gif
BIN
images/wave.gif
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 622 B |
324
index.html
324
index.html
|
|
@ -1,194 +1,152 @@
|
|||
<!--
|
||||
MK在线音乐播放器 V 1.1
|
||||
支持搜索并播放音乐；
|
||||
支持一键提取音乐外链；
|
||||
支持显示歌曲封面、歌词。
|
||||
|
||||
首发于吾爱破解论坛（http://www.52pojie.cn/）
|
||||
孟坤网页实验室（http://lab.mkblog.cn/）出品
|
||||
|
||||
前端界面修改自 http://sc.chinaz.com/jiaoben/150714514230.htm
|
||||
音乐资源来自于 网易云音乐
|
||||
|
||||
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>在线听歌</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
<!--[if IE]>
|
||||
<script type="text/javascript" language="javascript">
|
||||
alert("本播放器暂不支持IE！请换一个浏览器……");
|
||||
//window.location="/oops.html";
|
||||
</script>
|
||||
<style>body{display: none;}</style>
|
||||
<![endif]-->
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
||||
|
||||
<!-- 强制移动设备以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.0</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]-->
|
||||
|
||||
<!-- jQuery文件 -->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
|
||||
<!-- 播放器样式表文件 -->
|
||||
<link rel="stylesheet" type="text/css" href="css/player.css">
|
||||
|
||||
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
|
||||
<script type="text/javascript" src="js/jquery-ui.js"></script>
|
||||
<script type="text/javascript" src="js/canvas.js"></script>
|
||||
<script type="text/javascript" src="js/player.js"></script>
|
||||
|
||||
<!-- 小屏幕样式修复 -->
|
||||
<link rel="stylesheet" type="text/css" href="css/small.css">
|
||||
|
||||
<!-- 滚动条美化样式文件 -->
|
||||
<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.min.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--模糊画布-->
|
||||
<div class="blur">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="playerMain">
|
||||
<div class="top">
|
||||
<a href="#" class="logo" title="孟坤在线听歌V1.1 歌曲来自网易云音乐">♫ 在线听歌</a>
|
||||
<div class="search">
|
||||
<form id="search-input-form">
|
||||
<input name="pages" id="pages" type="text" value="1" hidden>
|
||||
<div class="searchBtn" id="searchBtn"></div>
|
||||
<input type="text" class="searchTxt" name = "name" id="searchTxt" value="薛之谦">
|
||||
</form>
|
||||
</div>
|
||||
<div class="mainNav">
|
||||
<!--div class="tipLogin">
|
||||
马上
|
||||
<a href="#" class="loginA">登录</a>
|
||||
</div-->
|
||||
<a href="http://mkblog.cn" class="myroom" target="_blank">孟坤博客</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="mainWrap">
|
||||
<div class="leftBar">
|
||||
<ul class="menuUL">
|
||||
<li class="menuLi cur">
|
||||
<a href="#">
|
||||
<i class="icon iplay"></i>
|
||||
正在播放
|
||||
</a>
|
||||
</li>
|
||||
<li class="menuLi cannotclick">
|
||||
<a href="#">
|
||||
<i class="icon ihst"></i>
|
||||
播放历史
|
||||
</a>
|
||||
</li>
|
||||
<li class="menuLi cannotclick">
|
||||
<a href="#">
|
||||
<i class="icon ishouc"></i>
|
||||
我收藏的单曲
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!--div class="collectOut">
|
||||
<span class="colS">我创建的精选集</span>
|
||||
<a href="#" class="colA"></a>
|
||||
</div>
|
||||
<div class="cellectList"></div-->
|
||||
<audio id="audio" src=""></audio>
|
||||
</div>
|
||||
<div class="mainBody">
|
||||
<div class="playHd">
|
||||
<div class="phInner">
|
||||
<div class="col">歌曲</div>
|
||||
<div class="col">演唱者</div>
|
||||
<div class="col">专辑</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playBd">
|
||||
<div class="scrollView">
|
||||
<ul class="songUL" id="musicList">
|
||||
|
||||
<li class="songList loadmoreRemove"><div class="songLMain listtipbar">播放器加载失败，请刷新网页</div></li>
|
||||
|
||||
<li class="songList"></li>
|
||||
<script type="text/javascript" src="js/ajaxList.js"></script>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playFt">
|
||||
<div class="track">
|
||||
<div class="uiCheck">
|
||||
<input class="checkAll" type="checkbox" select="0">
|
||||
</div>
|
||||
<div class="uiItem">
|
||||
<a href="#" class="itIcon itDele">删除</a>
|
||||
</div>
|
||||
<div class="uiItem">
|
||||
<a href="#" class="itIcon itShou">收藏</a>
|
||||
</div>
|
||||
<div class="uiItem">
|
||||
<a href="#" class="itIcon itJin">添加到精选集</a>
|
||||
</div>
|
||||
<div class="uiItem">
|
||||
<a href="#" class="itIcon itMore">更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mainOuther">
|
||||
<div class="albumCover">
|
||||
<a href="#" class="image-light">
|
||||
<img src="http://p3.music.126.net/J3VtOLW7ilNc0byWk37n3g==/3387595325986974.jpg" id="canvas1">
|
||||
</a>
|
||||
</div>
|
||||
<div class="albumSale">
|
||||
<!--a href="#" class="asA">
|
||||
<img src="">
|
||||
</a-->
|
||||
</div>
|
||||
<div id="lyr"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="playerWrap">
|
||||
<div class="playerCon">
|
||||
<a href="#" class="pbtn prevBtn"></a>
|
||||
<a href="#" class="pbtn playBtn"></a>
|
||||
<a href="#" class="pbtn nextBtn"></a>
|
||||
<!--a href="#" class="mode"></a-->
|
||||
</div>
|
||||
<div class="playInfo">
|
||||
<div class="trackInfo">
|
||||
<a href="#" class="songName"></a>
|
||||
-
|
||||
<a href="#" class="songPlayer"></a>
|
||||
<!--div class="trackCon">
|
||||
<a href="#" class="tc1"></a>
|
||||
<a href="#" class="tc2"></a>
|
||||
<a href="#" class="tc3"></a>
|
||||
</div-->
|
||||
</div>
|
||||
<div class="playerLength">
|
||||
<div class="position">00:00</div>
|
||||
<div class="progress">
|
||||
<div class="pro1"></div>
|
||||
<div class="pro2">
|
||||
<a href="#" class="dian"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="duration">00:00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vol">
|
||||
<!--a href="#" class="pinBtn">高品质音效</a-->
|
||||
<div class="volm">
|
||||
<div class="volSpeaker"></div>
|
||||
<div class="volControl">
|
||||
<a href="#" class="dian2"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!--<div class="bottom">-->
|
||||
</div> <!--class="playerMain"-->
|
||||
|
||||
<div id="msgbox" class="pop-box"></div>
|
||||
<div id="mask" class="mask"></div>
|
||||
|
||||
<!-- 播放器本体 -->
|
||||
<audio id="mkplayer" src=""></audio>
|
||||
|
||||
<!-- 模糊化背景 -->
|
||||
<canvas id="blur-canvas"></canvas>
|
||||
<div id="blur"></div>
|
||||
|
||||
<!-- 头部logo -->
|
||||
<div class="header">
|
||||
<div class="logo" title="Version 2.0; Based on 163music; 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-box" id="search-area" hidden>
|
||||
<span class="input">
|
||||
<input type="text" name="wd" id="search-wd" placeholder="搜索歌手、歌名、专辑">
|
||||
</span>
|
||||
<span class="search-btn search-close" title="点击关闭搜索框">╳</span>
|
||||
<span class="search-btn search-submit">搜索</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="点击查看歌曲信息">i</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>
|
||||
</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 type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display: none' id='cnzz_stat_icon_1261525999'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s95.cnzz.com/z_stat.php%3Fid%3D1261525999' type='text/javascript'%3E%3C/script%3E"));</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
/**************************************************
|
||||
* MKOnlinePlayer v2.0
|
||||
* Ajax 后台数据交互请求模块
|
||||
* 编写：mengkun(http://mkblog.cn)
|
||||
* 时间：2017-3-16
|
||||
*************************************************/
|
||||
|
||||
// ajax加载搜索结果
|
||||
function ajaxSearch() {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: mkPlayer.api,
|
||||
data: "types=search&count=" + mkPlayer.loadcount + "&pages=" + rem.loadPage + "&name=" + rem.wd,
|
||||
dataType : "jsonp",
|
||||
success: function(jsonData){
|
||||
if(jsonData.code == "-1"){
|
||||
layer.msg('搜索内容不能为空', {anim:6});
|
||||
return false;
|
||||
}
|
||||
|
||||
if(jsonData.result.songCount == "0")
|
||||
{
|
||||
layer.msg('没有找到相关歌曲', {anim:6});
|
||||
return false;
|
||||
}
|
||||
|
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) {
|
||||
console.log("搜索结果获取成功");
|
||||
}
|
||||
|
||||
if(rem.loadPage == 1) // 加载第一页，清空列表
|
||||
{
|
||||
musicList[0].item = [];
|
||||
rem.mainList.html(''); // 清空列表中原有的元素
|
||||
addListhead(); // 加载列表头
|
||||
} else {
|
||||
$("#list-foot").remove(); //已经是加载后面的页码了，删除之前的“加载更多”提示
|
||||
}
|
||||
|
||||
if(typeof jsonData.result.songs === undefined || typeof jsonData.result.songs == "undefined")
|
||||
{
|
||||
addListbar("nomore"); // 加载完了
|
||||
return false;
|
||||
}
|
||||
|
||||
var tempItem = [], no = musicList[0].item.length;
|
||||
|
||||
for (var i = 0; i < jsonData.result.songs.length; i++) {
|
||||
no ++;
|
||||
tempItem = {
|
||||
musicName: jsonData.result.songs[i].name, // 音乐名字
|
||||
artistsName: jsonData.result.songs[i].artists[0].name, // 艺术家名字
|
||||
albumName: jsonData.result.songs[i].album.name, // 专辑名字
|
||||
albumPic: null, // 专辑图片
|
||||
musicId: jsonData.result.songs[i].id, // 网易云音乐ID
|
||||
mp3Url: null // mp3链接
|
||||
};
|
||||
musicList[0].item.push(tempItem); // 保存到搜索结果临时列表中
|
||||
addItem(no, tempItem.musicName, tempItem.artistsName, tempItem.albumName); // 在前端显示
|
||||
}
|
||||
|
||||
rem.dislist = 0; // 当前显示的是搜索列表
|
||||
rem.loadPage ++; // 已加载的列数+1
|
||||
|
||||
dataBox("list"); // 在主界面显示出播放列表
|
||||
refreshList(); // 刷新列表，添加正在播放样式
|
||||
|
||||
if(no < mkPlayer.loadcount) {
|
||||
addListbar("nomore"); // 没加载满，说明已经加载完了
|
||||
} else {
|
||||
addListbar("more"); // 还可以点击加载更多
|
||||
}
|
||||
} //success
|
||||
});//ajax
|
||||
}
|
||||
|
||||
// 完善获取音乐信息
|
||||
// 音乐所在列表ID、音乐对应ID、回调函数
|
||||
function ajaxUrl(music, callback)
|
||||
{
|
||||
// 已经有数据，直接回调
|
||||
if(music.mp3Url !== null && music.mp3Url !== "err") {
|
||||
callback(music);
|
||||
return true;
|
||||
}
|
||||
// id为空，赋值链接错误。直接回调
|
||||
if(music.musicId === null) {
|
||||
musicList[listID].item[musicID].mp3Url = "err";
|
||||
callback(music);
|
||||
return true;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: mkPlayer.api,
|
||||
data: "types=musicInfo&id=" + music.musicId,
|
||||
dataType : "jsonp",
|
||||
success: function(jsonData){
|
||||
var mp3Url, picUrl;
|
||||
if(jsonData.code == 200 || typeof(jsonData.songs[0].mp3Url) !== undefined){
|
||||
mp3Url = urlHandle(jsonData.songs[0].mp3Url); // 获取音乐链接
|
||||
if(typeof(jsonData.songs[0].picUrl) !== undefined) {
|
||||
picUrl = jsonData.songs[0].album.picUrl; // 获取音乐图片
|
||||
}
|
||||
}
|
||||
|
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) {
|
||||
console.log("歌曲信息获取成功");
|
||||
}
|
||||
|
||||
if(!mp3Url) mp3Url = "err";
|
||||
if(!picUrl) picUrl = null;
|
||||
|
||||
music.mp3Url = mp3Url; // 记录结果
|
||||
music.albumPic = picUrl;
|
||||
|
||||
updateMinfo(music); // 更新音乐信息
|
||||
|
||||
callback(music); // 回调函数
|
||||
return true;
|
||||
}//success
|
||||
}); //ajax
|
||||
|
||||
}
|
||||
|
||||
// ajax加载用户歌单
|
||||
// 参数：歌单网易云 id, 歌单存储 id，回调函数
|
||||
function ajaxPlayList(lid, id, callback){
|
||||
if(!lid) return false;
|
||||
|
||||
// 已经在加载了，跳过
|
||||
if(musicList[id].isloading === true) {
|
||||
layer.load(2, {shade: false,time: 500}); //0代表加载的风格，支持0-2
|
||||
return true;
|
||||
}
|
||||
|
||||
musicList[id].isloading = true; // 更新状态：列表加载中
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: mkPlayer.api,
|
||||
data: "types=playlist&id=" + lid,
|
||||
dataType : "jsonp",
|
||||
success: function(jsonData){
|
||||
// if(typeof jsonData.result.tracks === undefined || jsonData.result.tracks.length === 0)
|
||||
// {
|
||||
// alert("这个歌单中没有歌曲");
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// 存储歌单信息
|
||||
var tempList = {
|
||||
id: lid, // 列表的网易云 id
|
||||
name: jsonData.result.name, // 列表名字
|
||||
cover: jsonData.result.coverImgUrl, // 列表封面
|
||||
creatorName: jsonData.result.creator.nickname, // 列表创建者名字
|
||||
creatorAvatar: jsonData.result.creator.avatarUrl, // 列表创建者头像
|
||||
item: []
|
||||
};
|
||||
|
||||
// 存储歌单中的音乐信息
|
||||
for (var i = 0; i < jsonData.result.tracks.length; i++) {
|
||||
tempList.item[i] = {
|
||||
musicName: jsonData.result.tracks[i].name, // 音乐名字
|
||||
artistsName: jsonData.result.tracks[i].artists[0].name, // 艺术家名字
|
||||
albumName: jsonData.result.tracks[i].album.name, // 专辑名字
|
||||
albumPic: jsonData.result.tracks[i].album.picUrl, // 专辑图片
|
||||
musicId: jsonData.result.tracks[i].id, // 网易云音乐ID
|
||||
mp3Url: urlHandle(jsonData.result.tracks[i].mp3Url) // mp3链接
|
||||
};
|
||||
}
|
||||
|
||||
// 歌单用户 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); // 专辑图片
|
||||
|
||||
musicList[id].isloading = false; // 列表已经加载完了
|
||||
|
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) {
|
||||
console.log("歌单 [" +tempList.name+ "] 中的音乐获取成功");
|
||||
}
|
||||
} //success
|
||||
});//ajax
|
||||
}
|
||||
|
||||
// ajax加载歌词
|
||||
// 参数：音乐ID，回调函数
|
||||
function ajaxLyric(mid, callback) {
|
||||
if(!mid) return false;
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: mkPlayer.api,
|
||||
data: "types=lyric&id=" + mid,
|
||||
dataType : "jsonp",
|
||||
success: function(jsonData){
|
||||
if(jsonData.code == -1) {
|
||||
console.log("歌曲ID为空");
|
||||
return false;
|
||||
}
|
||||
|
||||
var lyric;
|
||||
if ((jsonData.nolyric === true)||(typeof jsonData.lrc === undefined) || (typeof jsonData.lrc == "undefined")||(typeof jsonData.lrc.lyric === undefined) || (typeof jsonData.lrc.lyric == "undefined")) //没有歌词
|
||||
{
|
||||
lyric = '';
|
||||
} else {
|
||||
lyric = jsonData.lrc.lyric;
|
||||
}
|
||||
|
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) {
|
||||
console.log("歌词获取成功");
|
||||
}
|
||||
|
||||
callback(lyric);
|
||||
}
|
||||
});//ajax
|
||||
}
|
||||
|
||||
|
||||
// ajax加载用户的播放列表
|
||||
// 参数 用户的网易云 id
|
||||
function ajaxUserList(uid)
|
||||
{
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: mkPlayer.api,
|
||||
data: "types=userlist&uid=" + uid,
|
||||
dataType : "jsonp",
|
||||
success: function(jsonData){
|
||||
if(jsonData.code == "-1"){
|
||||
console.log("用户ID为空！");
|
||||
return false;
|
||||
}
|
||||
if(jsonData.code == 400){
|
||||
layer.msg('用户 uid 输入有误');
|
||||
return false;
|
||||
}
|
||||
|
||||
if(jsonData.playlist.length === 0 || typeof(jsonData.playlist.length) === "undefined")
|
||||
{
|
||||
layer.msg('没找到用户 ' + uid + ' 的歌单');
|
||||
}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, // 列表封面
|
||||
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.log("用户歌单获取成功 [用户网易云ID：" + uid + "]");
|
||||
}
|
||||
}
|
||||
});//ajax
|
||||
return true;
|
||||
}
|
||||
173
js/ajaxList.js
173
js/ajaxList.js
|
|
@ -1,173 +0,0 @@
|
|||
/*
|
||||
MK在线音乐播放器 V 1.1
|
||||
支持搜索并播放音乐；
|
||||
支持一键提取音乐外链；
|
||||
支持显示歌曲封面、歌词。
|
||||
|
||||
首发于吾爱破解论坛（http://www.52pojie.cn/）
|
||||
孟坤网页实验室（http://lab.mkblog.cn/）出品
|
||||
|
||||
前端界面修改自 http://sc.chinaz.com/jiaoben/150714514230.htm
|
||||
音乐资源来自于 网易云音乐
|
||||
|
||||
二次开发请保留以上信息，谢谢！
|
||||
*/
|
||||
|
||||
$(function(){
|
||||
/*歌曲列表效果*/
|
||||
$(".songList").hover(function(){
|
||||
$(this).find(".more").show();
|
||||
$(this).find(".dele").show();
|
||||
},function(){
|
||||
$(this).find(".more").hide();
|
||||
$(this).find(".dele").hide();
|
||||
});
|
||||
|
||||
$(".cannotclick").click(function(){
|
||||
showTips("Sorry,该功能暂未上线!");
|
||||
});
|
||||
|
||||
/*复选框*/
|
||||
$('.checkIn').click(function(){
|
||||
var s = $(this).attr("select");
|
||||
if (s == "0") {
|
||||
$(this).css("background-position","-37px -710px");
|
||||
$(this).attr("select","1");
|
||||
}
|
||||
if (s == "1") {
|
||||
$(this).css("background-position","");
|
||||
$(this).attr("select","0");
|
||||
}
|
||||
});
|
||||
|
||||
/*点击列表播放按钮*/
|
||||
$('.start em').click(function(){
|
||||
/*开始放歌*/
|
||||
songIndex = $(this).attr("sonN"); //获取歌曲在列表中的ID
|
||||
musicID = $(this).attr("musicID"); //获取歌曲的网易云ID
|
||||
|
||||
if((typeof($(this).attr("musicURL"))=="undefined") || (typeof($(this).attr("musicURL"))=="undefined")) //先直接读取看有没有
|
||||
{
|
||||
$.ajax({ //调用jquery的ajax方法
|
||||
type: "POST", //设置ajax方法提交数据的形式
|
||||
url: APIurl, //把数据提交到ok.php
|
||||
data: "types=musicInfo&id=" + musicID, //输入框writer中的值作为提交的数据
|
||||
dataType : "jsonp",
|
||||
jsonp: "callback",//参数名
|
||||
jsonpCallback:"mkPlayerCallBack",//函数名
|
||||
success: function(jsonData){ //提交成功后的回调，msg变量是ok.php输出的内容。
|
||||
|
||||
//console.log(jsonData); //控制台输出返回的json（用于调试）
|
||||
//jsonData=JSON.parse(jsonData);
|
||||
|
||||
switch(jsonData.code)
|
||||
{
|
||||
case "-1":
|
||||
console.log("歌曲ID为空");
|
||||
break;
|
||||
|
||||
//case "200":
|
||||
default:
|
||||
var mp3Url = jsonData.songs[0].mp3Url; //获取音乐链接
|
||||
var picUrl = jsonData.songs[0].album.picUrl; //获取音乐图片
|
||||
if(mp3Url === null) //已下架的歌曲获取到的链接为空
|
||||
{
|
||||
showTips("抱歉，这首歌暂时无法播放！"); //弹出提示
|
||||
}
|
||||
else
|
||||
{
|
||||
mp3Url = mp3Url.replace("http:\/\/m", "http://p"); //替换无版权链接算法
|
||||
//console.log("mp3链接地址已获取-" + mp3Url);
|
||||
playmp3(mp3Url,picUrl); //播放音乐
|
||||
$(".start em[sonN=" + songIndex + "]").attr({musicURL:mp3Url,picURL:picUrl}); //保存获取的结果
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}); //ajax
|
||||
}
|
||||
else
|
||||
{
|
||||
musicURL = $(this).attr("musicURL"); //获取歌曲的url
|
||||
picURL = $(this).attr("picURL"); //获取歌曲的图片地址
|
||||
playmp3(musicURL,picURL); //播放音乐
|
||||
}
|
||||
}); /*点击列表播放按钮*/
|
||||
|
||||
function playmp3(url,picUrl){ //播放音乐
|
||||
$("#audio").attr("src",url);
|
||||
audio=document.getElementById("audio");//获得音频元素
|
||||
|
||||
$(".dian").css("left",0); //进度条归位
|
||||
$(".duration").html("00:00");//总时间归零
|
||||
$(".position").html("00:00");//当前时间归零
|
||||
|
||||
audio.play();
|
||||
audio.addEventListener('timeupdate',updateProgress,false); //显示歌曲总长度
|
||||
audio.addEventListener('play',audioPlay,false); //开始播放了
|
||||
audio.addEventListener('pause',audioPause,false); //暂停
|
||||
audio.addEventListener('ended',audioEnded,false); //播放结束
|
||||
|
||||
/*播放歌词*/
|
||||
getReady(songIndex);//准备播放
|
||||
mPlay();//显示歌词
|
||||
//对audio元素监听pause事件
|
||||
|
||||
/*底部显示歌曲信息*/
|
||||
var songName=$(".start em[sonN=" + songIndex + "]").parent().parent().find(".colsn").html();
|
||||
var singerName =$(".start em[sonN=" + songIndex + "]").parent().parent().find(".colcn").html();
|
||||
$(".songName").html(songName);
|
||||
$(".songPlayer").html(singerName);
|
||||
|
||||
/*外观改变*/
|
||||
var html="";
|
||||
html+='<div class="manyou">';
|
||||
html+=' <a href="' + APIurl +'?types=download&url=' + url + '&name=' + urlEncode(songName) + ' - ' + urlEncode(singerName) + '" class="manyouA" target="_blank">下载这首歌曲</a>';
|
||||
html+='</div>';
|
||||
$(".start em").css({
|
||||
"background":"",
|
||||
"color":""
|
||||
});
|
||||
$(".manyou").remove(); //移除之前的漫游(歌曲下载)
|
||||
$(".songList").css("background-color","#fff"); //把列表框所有条目背景色还原
|
||||
|
||||
$(".start em[sonN=" + songIndex + "]").parent().parent().parent().append(html);
|
||||
$(".start em[sonN=" + songIndex + "]").parent().parent().parent().css("background-color","#f0f0f0");
|
||||
|
||||
|
||||
/*换右侧图片*/
|
||||
$("#canvas1").attr("src",picUrl); //歌曲封面
|
||||
$("#canvas1").load(function(){
|
||||
loadBG();
|
||||
});
|
||||
|
||||
//setTimeout('loadBG()',100);
|
||||
|
||||
$(".blur").css("opacity","0");
|
||||
$(".blur").animate({opacity:"1"},1000);
|
||||
}
|
||||
/*双击播放*/
|
||||
$('.songList').dblclick(function(){
|
||||
//console.log("双击播放");
|
||||
var sid = $(this).find(".start em").html();
|
||||
$(".start em[sonN="+sid+"]").click();
|
||||
});
|
||||
|
||||
//更多 按钮的点击事件
|
||||
$(".more").click(function(){
|
||||
var songUrl = $(this).parent().parent().find(".start em").attr("musicURL"); //获取外链
|
||||
|
||||
if((typeof(songUrl)=="undefined") || (typeof(songUrl)=="undefined")) //还没播放过（额，这是一个偷懒的做法，得改！）
|
||||
{
|
||||
showTips("请先播放这首歌再尝试获取外链");
|
||||
return 1;
|
||||
}
|
||||
|
||||
var songName = $(this).parent().parent().find(".colsn").html(); //获取歌名
|
||||
var singerName = $(this).parent().parent().find(".colcn").html(); //获取歌手
|
||||
//alert(songUrl+songName+singerName);
|
||||
|
||||
showMusicUrl(singerName + ' - ' + songName,songUrl); //显示歌曲外链
|
||||
});
|
||||
|
||||
});
|
||||
611
js/canvas.js
611
js/canvas.js
|
|
@ -1,611 +0,0 @@
|
|||
/*
|
||||
|
||||
StackBlur - a fast almost Gaussian Blur For Canvas
|
||||
|
||||
Version: 0.5
|
||||
Author: Mario Klingemann
|
||||
Contact: mario@quasimondo.com
|
||||
Website: http://www.quasimondo.com/StackBlurForCanvas
|
||||
Twitter: @quasimondo
|
||||
|
||||
In case you find this class useful - especially in commercial projects -
|
||||
I am not totally unhappy for a small donation to my PayPal account
|
||||
mario@quasimondo.de
|
||||
|
||||
Or support me on flattr:
|
||||
https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript
|
||||
|
||||
Copyright (c) 2010 Mario Klingemann
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
files (the "Software"), to deal in the Software without
|
||||
restriction, including without limitation the rights to use,
|
||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the
|
||||
Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
var mul_table = [
|
||||
512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,
|
||||
454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,
|
||||
482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,
|
||||
437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,
|
||||
497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,
|
||||
320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,
|
||||
446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,
|
||||
329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,
|
||||
505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,
|
||||
399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,
|
||||
324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,
|
||||
268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,
|
||||
451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,
|
||||
385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,
|
||||
332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,
|
||||
289,287,285,282,280,278,275,273,271,269,267,265,263,261,259];
|
||||
|
||||
|
||||
var shg_table = [
|
||||
9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17,
|
||||
17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19,
|
||||
19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20,
|
||||
20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21,
|
||||
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21,
|
||||
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22,
|
||||
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22,
|
||||
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23,
|
||||
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
|
||||
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
|
||||
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
|
||||
23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
|
||||
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
|
||||
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
|
||||
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
|
||||
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24 ];
|
||||
|
||||
function stackBlurImage( imageID, canvasID, radius, blurAlphaChannel )
|
||||
{
|
||||
|
||||
var img = document.getElementById( imageID );
|
||||
var w = img.naturalWidth;
|
||||
var h = img.naturalHeight;
|
||||
|
||||
var canvas = document.getElementById( canvasID );
|
||||
|
||||
canvas.style.width = w + "px";
|
||||
canvas.style.height = h + "px";
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
|
||||
var context = canvas.getContext("2d");
|
||||
context.clearRect( 0, 0, w, h );
|
||||
context.drawImage( img, 0, 0 );
|
||||
|
||||
if ( isNaN(radius) || radius < 1 ) return;
|
||||
|
||||
if ( blurAlphaChannel )
|
||||
stackBlurCanvasRGBA( canvasID, 0, 0, w, h, radius );
|
||||
else
|
||||
stackBlurCanvasRGB( canvasID, 0, 0, w, h, radius );
|
||||
}
|
||||
|
||||
|
||||
function stackBlurCanvasRGBA( id, top_x, top_y, width, height, radius )
|
||||
{
|
||||
if ( isNaN(radius) || radius < 1 ) return;
|
||||
radius |= 0;
|
||||
|
||||
var canvas = document.getElementById( id );
|
||||
var context = canvas.getContext("2d");
|
||||
var imageData;
|
||||
|
||||
try {
|
||||
try {
|
||||
imageData = context.getImageData( top_x, top_y, width, height );
|
||||
} catch(e) {
|
||||
|
||||
// NOTE: this part is supposedly only needed if you want to work with local files
|
||||
// so it might be okay to remove the whole try/catch block and just use
|
||||
//imageData = context.getImageData( top_x, top_y, width, height );
|
||||
try {
|
||||
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
|
||||
imageData = context.getImageData( top_x, top_y, width, height );
|
||||
} catch(e) {
|
||||
//alert("Cannot access local image");
|
||||
throw new Error("unable to access local image data: " + e);
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch(e) {
|
||||
//alert("Cannot access image");
|
||||
throw new Error("unable to access image data: " + e);
|
||||
}
|
||||
|
||||
var pixels = imageData.data;
|
||||
|
||||
var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum,
|
||||
r_out_sum, g_out_sum, b_out_sum, a_out_sum,
|
||||
r_in_sum, g_in_sum, b_in_sum, a_in_sum,
|
||||
pr, pg, pb, pa, rbs;
|
||||
|
||||
var div = radius + radius + 1;
|
||||
var w4 = width << 2;
|
||||
var widthMinus1 = width - 1;
|
||||
var heightMinus1 = height - 1;
|
||||
var radiusPlus1 = radius + 1;
|
||||
var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2;
|
||||
|
||||
var stackStart = new BlurStack();
|
||||
var stack = stackStart;
|
||||
for ( i = 1; i < div; i++ )
|
||||
{
|
||||
stack = stack.next = new BlurStack();
|
||||
if ( i == radiusPlus1 ) var stackEnd = stack;
|
||||
}
|
||||
stack.next = stackStart;
|
||||
var stackIn = null;
|
||||
var stackOut = null;
|
||||
|
||||
yw = yi = 0;
|
||||
|
||||
var mul_sum = mul_table[radius];
|
||||
var shg_sum = shg_table[radius];
|
||||
|
||||
for ( y = 0; y < height; y++ )
|
||||
{
|
||||
r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;
|
||||
|
||||
r_out_sum = radiusPlus1 * ( pr = pixels[yi] );
|
||||
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] );
|
||||
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] );
|
||||
a_out_sum = radiusPlus1 * ( pa = pixels[yi+3] );
|
||||
|
||||
r_sum += sumFactor * pr;
|
||||
g_sum += sumFactor * pg;
|
||||
b_sum += sumFactor * pb;
|
||||
a_sum += sumFactor * pa;
|
||||
|
||||
stack = stackStart;
|
||||
|
||||
for( i = 0; i < radiusPlus1; i++ )
|
||||
{
|
||||
stack.r = pr;
|
||||
stack.g = pg;
|
||||
stack.b = pb;
|
||||
stack.a = pa;
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
for( i = 1; i < radiusPlus1; i++ )
|
||||
{
|
||||
p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 );
|
||||
r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i );
|
||||
g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs;
|
||||
b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs;
|
||||
a_sum += ( stack.a = ( pa = pixels[p+3])) * rbs;
|
||||
|
||||
r_in_sum += pr;
|
||||
g_in_sum += pg;
|
||||
b_in_sum += pb;
|
||||
a_in_sum += pa;
|
||||
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
|
||||
stackIn = stackStart;
|
||||
stackOut = stackEnd;
|
||||
for ( x = 0; x < width; x++ )
|
||||
{
|
||||
pixels[yi+3] = pa = (a_sum * mul_sum) >> shg_sum;
|
||||
if ( pa != 0 )
|
||||
{
|
||||
pa = 255 / pa;
|
||||
pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa;
|
||||
pixels[yi+1] = ((g_sum * mul_sum) >> shg_sum) * pa;
|
||||
pixels[yi+2] = ((b_sum * mul_sum) >> shg_sum) * pa;
|
||||
} else {
|
||||
pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0;
|
||||
}
|
||||
|
||||
r_sum -= r_out_sum;
|
||||
g_sum -= g_out_sum;
|
||||
b_sum -= b_out_sum;
|
||||
a_sum -= a_out_sum;
|
||||
|
||||
r_out_sum -= stackIn.r;
|
||||
g_out_sum -= stackIn.g;
|
||||
b_out_sum -= stackIn.b;
|
||||
a_out_sum -= stackIn.a;
|
||||
|
||||
p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2;
|
||||
|
||||
r_in_sum += ( stackIn.r = pixels[p]);
|
||||
g_in_sum += ( stackIn.g = pixels[p+1]);
|
||||
b_in_sum += ( stackIn.b = pixels[p+2]);
|
||||
a_in_sum += ( stackIn.a = pixels[p+3]);
|
||||
|
||||
r_sum += r_in_sum;
|
||||
g_sum += g_in_sum;
|
||||
b_sum += b_in_sum;
|
||||
a_sum += a_in_sum;
|
||||
|
||||
stackIn = stackIn.next;
|
||||
|
||||
r_out_sum += ( pr = stackOut.r );
|
||||
g_out_sum += ( pg = stackOut.g );
|
||||
b_out_sum += ( pb = stackOut.b );
|
||||
a_out_sum += ( pa = stackOut.a );
|
||||
|
||||
r_in_sum -= pr;
|
||||
g_in_sum -= pg;
|
||||
b_in_sum -= pb;
|
||||
a_in_sum -= pa;
|
||||
|
||||
stackOut = stackOut.next;
|
||||
|
||||
yi += 4;
|
||||
}
|
||||
yw += width;
|
||||
}
|
||||
|
||||
|
||||
for ( x = 0; x < width; x++ )
|
||||
{
|
||||
g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;
|
||||
|
||||
yi = x << 2;
|
||||
r_out_sum = radiusPlus1 * ( pr = pixels[yi]);
|
||||
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]);
|
||||
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]);
|
||||
a_out_sum = radiusPlus1 * ( pa = pixels[yi+3]);
|
||||
|
||||
r_sum += sumFactor * pr;
|
||||
g_sum += sumFactor * pg;
|
||||
b_sum += sumFactor * pb;
|
||||
a_sum += sumFactor * pa;
|
||||
|
||||
stack = stackStart;
|
||||
|
||||
for( i = 0; i < radiusPlus1; i++ )
|
||||
{
|
||||
stack.r = pr;
|
||||
stack.g = pg;
|
||||
stack.b = pb;
|
||||
stack.a = pa;
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
yp = width;
|
||||
|
||||
for( i = 1; i <= radius; i++ )
|
||||
{
|
||||
yi = ( yp + x ) << 2;
|
||||
|
||||
r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i );
|
||||
g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs;
|
||||
b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs;
|
||||
a_sum += ( stack.a = ( pa = pixels[yi+3])) * rbs;
|
||||
|
||||
r_in_sum += pr;
|
||||
g_in_sum += pg;
|
||||
b_in_sum += pb;
|
||||
a_in_sum += pa;
|
||||
|
||||
stack = stack.next;
|
||||
|
||||
if( i < heightMinus1 )
|
||||
{
|
||||
yp += width;
|
||||
}
|
||||
}
|
||||
|
||||
yi = x;
|
||||
stackIn = stackStart;
|
||||
stackOut = stackEnd;
|
||||
for ( y = 0; y < height; y++ )
|
||||
{
|
||||
p = yi << 2;
|
||||
pixels[p+3] = pa = (a_sum * mul_sum) >> shg_sum;
|
||||
if ( pa > 0 )
|
||||
{
|
||||
pa = 255 / pa;
|
||||
pixels[p] = ((r_sum * mul_sum) >> shg_sum ) * pa;
|
||||
pixels[p+1] = ((g_sum * mul_sum) >> shg_sum ) * pa;
|
||||
pixels[p+2] = ((b_sum * mul_sum) >> shg_sum ) * pa;
|
||||
} else {
|
||||
pixels[p] = pixels[p+1] = pixels[p+2] = 0;
|
||||
}
|
||||
|
||||
r_sum -= r_out_sum;
|
||||
g_sum -= g_out_sum;
|
||||
b_sum -= b_out_sum;
|
||||
a_sum -= a_out_sum;
|
||||
|
||||
r_out_sum -= stackIn.r;
|
||||
g_out_sum -= stackIn.g;
|
||||
b_out_sum -= stackIn.b;
|
||||
a_out_sum -= stackIn.a;
|
||||
|
||||
p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2;
|
||||
|
||||
r_sum += ( r_in_sum += ( stackIn.r = pixels[p]));
|
||||
g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1]));
|
||||
b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2]));
|
||||
a_sum += ( a_in_sum += ( stackIn.a = pixels[p+3]));
|
||||
|
||||
stackIn = stackIn.next;
|
||||
|
||||
r_out_sum += ( pr = stackOut.r );
|
||||
g_out_sum += ( pg = stackOut.g );
|
||||
b_out_sum += ( pb = stackOut.b );
|
||||
a_out_sum += ( pa = stackOut.a );
|
||||
|
||||
r_in_sum -= pr;
|
||||
g_in_sum -= pg;
|
||||
b_in_sum -= pb;
|
||||
a_in_sum -= pa;
|
||||
|
||||
stackOut = stackOut.next;
|
||||
|
||||
yi += width;
|
||||
}
|
||||
}
|
||||
|
||||
context.putImageData( imageData, top_x, top_y );
|
||||
|
||||
}
|
||||
|
||||
|
||||
function stackBlurCanvasRGB( id, top_x, top_y, width, height, radius )
|
||||
{
|
||||
if ( isNaN(radius) || radius < 1 ) return;
|
||||
radius |= 0;
|
||||
|
||||
var canvas = document.getElementById( id );
|
||||
var context = canvas.getContext("2d");
|
||||
var imageData;
|
||||
|
||||
try {
|
||||
try {
|
||||
|
||||
} catch(e) {
|
||||
|
||||
// NOTE: this part is supposedly only needed if you want to work with local files
|
||||
// so it might be okay to remove the whole try/catch block and just use
|
||||
// imageData = context.getImageData( top_x, top_y, width, height );
|
||||
try {
|
||||
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
|
||||
imageData = context.getImageData( top_x, top_y, width, height );
|
||||
} catch(e) {
|
||||
alert("Cannot access local image");
|
||||
throw new Error("unable to access local image data: " + e);
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch(e) {
|
||||
//alert("Cannot access image");
|
||||
throw new Error("unable to access image data: " + e);
|
||||
}
|
||||
|
||||
var pixels = imageData.data;
|
||||
|
||||
var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum,
|
||||
r_out_sum, g_out_sum, b_out_sum,
|
||||
r_in_sum, g_in_sum, b_in_sum,
|
||||
pr, pg, pb, rbs;
|
||||
|
||||
var div = radius + radius + 1;
|
||||
var w4 = width << 2;
|
||||
var widthMinus1 = width - 1;
|
||||
var heightMinus1 = height - 1;
|
||||
var radiusPlus1 = radius + 1;
|
||||
var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2;
|
||||
|
||||
var stackStart = new BlurStack();
|
||||
var stack = stackStart;
|
||||
for ( i = 1; i < div; i++ )
|
||||
{
|
||||
stack = stack.next = new BlurStack();
|
||||
if ( i == radiusPlus1 ) var stackEnd = stack;
|
||||
}
|
||||
stack.next = stackStart;
|
||||
var stackIn = null;
|
||||
var stackOut = null;
|
||||
|
||||
yw = yi = 0;
|
||||
|
||||
var mul_sum = mul_table[radius];
|
||||
var shg_sum = shg_table[radius];
|
||||
|
||||
for ( y = 0; y < height; y++ )
|
||||
{
|
||||
r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0;
|
||||
|
||||
r_out_sum = radiusPlus1 * ( pr = pixels[yi] );
|
||||
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] );
|
||||
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] );
|
||||
|
||||
r_sum += sumFactor * pr;
|
||||
g_sum += sumFactor * pg;
|
||||
b_sum += sumFactor * pb;
|
||||
|
||||
stack = stackStart;
|
||||
|
||||
for( i = 0; i < radiusPlus1; i++ )
|
||||
{
|
||||
stack.r = pr;
|
||||
stack.g = pg;
|
||||
stack.b = pb;
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
for( i = 1; i < radiusPlus1; i++ )
|
||||
{
|
||||
p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 );
|
||||
r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i );
|
||||
g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs;
|
||||
b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs;
|
||||
|
||||
r_in_sum += pr;
|
||||
g_in_sum += pg;
|
||||
b_in_sum += pb;
|
||||
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
|
||||
stackIn = stackStart;
|
||||
stackOut = stackEnd;
|
||||
for ( x = 0; x < width; x++ )
|
||||
{
|
||||
pixels[yi] = (r_sum * mul_sum) >> shg_sum;
|
||||
pixels[yi+1] = (g_sum * mul_sum) >> shg_sum;
|
||||
pixels[yi+2] = (b_sum * mul_sum) >> shg_sum;
|
||||
|
||||
r_sum -= r_out_sum;
|
||||
g_sum -= g_out_sum;
|
||||
b_sum -= b_out_sum;
|
||||
|
||||
r_out_sum -= stackIn.r;
|
||||
g_out_sum -= stackIn.g;
|
||||
b_out_sum -= stackIn.b;
|
||||
|
||||
p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2;
|
||||
|
||||
r_in_sum += ( stackIn.r = pixels[p]);
|
||||
g_in_sum += ( stackIn.g = pixels[p+1]);
|
||||
b_in_sum += ( stackIn.b = pixels[p+2]);
|
||||
|
||||
r_sum += r_in_sum;
|
||||
g_sum += g_in_sum;
|
||||
b_sum += b_in_sum;
|
||||
|
||||
stackIn = stackIn.next;
|
||||
|
||||
r_out_sum += ( pr = stackOut.r );
|
||||
g_out_sum += ( pg = stackOut.g );
|
||||
b_out_sum += ( pb = stackOut.b );
|
||||
|
||||
r_in_sum -= pr;
|
||||
g_in_sum -= pg;
|
||||
b_in_sum -= pb;
|
||||
|
||||
stackOut = stackOut.next;
|
||||
|
||||
yi += 4;
|
||||
}
|
||||
yw += width;
|
||||
}
|
||||
|
||||
|
||||
for ( x = 0; x < width; x++ )
|
||||
{
|
||||
g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0;
|
||||
|
||||
yi = x << 2;
|
||||
r_out_sum = radiusPlus1 * ( pr = pixels[yi]);
|
||||
g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]);
|
||||
b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]);
|
||||
|
||||
r_sum += sumFactor * pr;
|
||||
g_sum += sumFactor * pg;
|
||||
b_sum += sumFactor * pb;
|
||||
|
||||
stack = stackStart;
|
||||
|
||||
for( i = 0; i < radiusPlus1; i++ )
|
||||
{
|
||||
stack.r = pr;
|
||||
stack.g = pg;
|
||||
stack.b = pb;
|
||||
stack = stack.next;
|
||||
}
|
||||
|
||||
yp = width;
|
||||
|
||||
for( i = 1; i <= radius; i++ )
|
||||
{
|
||||
yi = ( yp + x ) << 2;
|
||||
|
||||
r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i );
|
||||
g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs;
|
||||
b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs;
|
||||
|
||||
r_in_sum += pr;
|
||||
g_in_sum += pg;
|
||||
b_in_sum += pb;
|
||||
|
||||
stack = stack.next;
|
||||
|
||||
if( i < heightMinus1 )
|
||||
{
|
||||
yp += width;
|
||||
}
|
||||
}
|
||||
|
||||
yi = x;
|
||||
stackIn = stackStart;
|
||||
stackOut = stackEnd;
|
||||
for ( y = 0; y < height; y++ )
|
||||
{
|
||||
p = yi << 2;
|
||||
pixels[p] = (r_sum * mul_sum) >> shg_sum;
|
||||
pixels[p+1] = (g_sum * mul_sum) >> shg_sum;
|
||||
pixels[p+2] = (b_sum * mul_sum) >> shg_sum;
|
||||
|
||||
r_sum -= r_out_sum;
|
||||
g_sum -= g_out_sum;
|
||||
b_sum -= b_out_sum;
|
||||
|
||||
r_out_sum -= stackIn.r;
|
||||
g_out_sum -= stackIn.g;
|
||||
b_out_sum -= stackIn.b;
|
||||
|
||||
p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2;
|
||||
|
||||
r_sum += ( r_in_sum += ( stackIn.r = pixels[p]));
|
||||
g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1]));
|
||||
b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2]));
|
||||
|
||||
stackIn = stackIn.next;
|
||||
|
||||
r_out_sum += ( pr = stackOut.r );
|
||||
g_out_sum += ( pg = stackOut.g );
|
||||
b_out_sum += ( pb = stackOut.b );
|
||||
|
||||
r_in_sum -= pr;
|
||||
g_in_sum -= pg;
|
||||
b_in_sum -= pb;
|
||||
|
||||
stackOut = stackOut.next;
|
||||
|
||||
yi += width;
|
||||
}
|
||||
}
|
||||
|
||||
context.putImageData( imageData, top_x, top_y );
|
||||
|
||||
}
|
||||
|
||||
function BlurStack()
|
||||
{
|
||||
this.r = 0;
|
||||
this.g = 0;
|
||||
this.b = 0;
|
||||
this.a = 0;
|
||||
this.next = null;
|
||||
}
|
||||
|
|
@ -0,0 +1,702 @@
|
|||
/**************************************************
|
||||
* MKOnlinePlayer v2.0
|
||||
* 封装函数及UI交互模块
|
||||
* 编写：mengkun(http://mkblog.cn)
|
||||
* 时间：2017-3-16
|
||||
*************************************************/
|
||||
// 判断是否是移动设备
|
||||
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('播放器调试模式已开启，正常使用时请关闭调试模式');
|
||||
}
|
||||
|
||||
if(!isMobile.any()) { // 只在非移动设备使用滚动条插件
|
||||
// 滚动条初始化
|
||||
$("#main-list,#sheet").mCustomScrollbar({
|
||||
theme:"minimal",
|
||||
advanced:{
|
||||
updateOnContentResize: true // 数据更新后自动刷新滚动条
|
||||
}
|
||||
});
|
||||
// 加了滚动条插件和没加滚动条插件所操作的对象是不一样的
|
||||
rem.sheetList = $("#sheet .mCSB_container");
|
||||
rem.mainList = $("#main-list .mCSB_container");
|
||||
} else {
|
||||
rem.sheetList = $("#sheet");
|
||||
rem.mainList = $("#main-list");
|
||||
}
|
||||
|
||||
addListhead(); // 列表头
|
||||
addListbar("loading"); // 列表加载中
|
||||
|
||||
// 顶部按钮点击处理
|
||||
$(".btn").click(function(){
|
||||
switch($(this).data("action")) {
|
||||
case "player": // 播放器
|
||||
dataBox("player");
|
||||
break;
|
||||
case "search": // 搜索
|
||||
$("#btn-area").hide();
|
||||
$("#search-area").fadeIn();
|
||||
$("#search-wd").val(mkPlayer.wd);
|
||||
$("#search-wd").focus();
|
||||
$("#search-wd").select();
|
||||
break;
|
||||
|
||||
case "playing": // 正在播放
|
||||
loadList(1); // 显示正在播放列表
|
||||
break;
|
||||
|
||||
case "sheet": // 播放列表
|
||||
dataBox("sheet"); // 在主界面显示出音乐专辑
|
||||
break;
|
||||
|
||||
default:
|
||||
layer.msg('这个功能还没加');
|
||||
}
|
||||
});
|
||||
|
||||
// 搜索框回车搜索
|
||||
$("#search-wd").keydown(function(event){
|
||||
if(event.keyCode==13){
|
||||
$(".search-submit").click();
|
||||
}
|
||||
});
|
||||
|
||||
// 搜索
|
||||
$(".search-submit").click(function(){
|
||||
var wd = $("#search-wd").val();
|
||||
if(!wd) {
|
||||
layer.msg('搜索内容不能为空', {anim:6});
|
||||
return false;
|
||||
}
|
||||
search(wd);
|
||||
});
|
||||
|
||||
// 关闭搜索框
|
||||
$(".search-close").click(function(){
|
||||
$("#btn-area").fadeIn();
|
||||
$("#search-area").hide();
|
||||
});
|
||||
|
||||
// 列表项双击播放
|
||||
$(".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(isMobile.any()) {
|
||||
var num = parseInt($(this).data("no"));
|
||||
if(isNaN(num)) return false;
|
||||
listClick(num);
|
||||
}
|
||||
});
|
||||
|
||||
// 列表鼠标移过显示对应的操作按钮
|
||||
$(".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) {
|
||||
// ajax加载数据
|
||||
ajaxPlayList(musicList[num].id, num, loadList);
|
||||
return true;
|
||||
}
|
||||
loadList(num);
|
||||
});
|
||||
|
||||
// 点击同步云音乐
|
||||
$("#sheet").on("click",".login-in", function() {
|
||||
layer.prompt(
|
||||
{
|
||||
title: '请输入您的网易云 ID',
|
||||
// value: '', // 默认值
|
||||
btn: ['确定', '取消', '帮助'],
|
||||
btn3: function(index, layero){
|
||||
layer.open({
|
||||
title: '如何获取您的网易云ID？'
|
||||
,shade: 0.6 //遮罩透明度
|
||||
,anim: 1 //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>就是您的网易云 ID'
|
||||
});
|
||||
}
|
||||
},
|
||||
function(val, index){ // 输入后的回调函数
|
||||
if(isNaN(val)) {
|
||||
layer.msg('uid 只能是数字',{anim: 6});
|
||||
return false;
|
||||
}
|
||||
// layer.msg('您输入的ID是 '+val);
|
||||
layer.close(index); // 关闭输入框
|
||||
ajaxUserList(val);
|
||||
});
|
||||
});
|
||||
|
||||
// 刷新用户列表
|
||||
$("#sheet").on("click",".login-refresh", function() {
|
||||
// rem.uid = null; // 清空记录的uid
|
||||
playerSavedata('ulist', '');
|
||||
layer.msg('刷新歌单');
|
||||
clearUserlist();
|
||||
});
|
||||
|
||||
// 退出登录
|
||||
$("#sheet").on("click",".login-out", function() {
|
||||
// rem.uid = null; // 清空记录的uid
|
||||
playerSavedata('uid', '');
|
||||
playerSavedata('ulist', '');
|
||||
layer.msg('已退出');
|
||||
clearUserlist();
|
||||
});
|
||||
|
||||
// 播放、暂停按钮的处理
|
||||
$("#music-info").click(function(){
|
||||
if(rem.playid === undefined) {
|
||||
layer.msg('请先播放歌曲');
|
||||
return false;
|
||||
}
|
||||
var tmpMusic = musicList[1].item[rem.playid];
|
||||
var tempStr = "<span class='info-title'>歌名：</span>" + tmpMusic.musicName +
|
||||
"<br><span class='info-title'>歌手：</span>" + tmpMusic.artistsName +
|
||||
"<br><span class='info-title'>专辑：</span>" + tmpMusic.albumName +
|
||||
"<br><span class='info-title'>时长：</span>" + formatTime($("#mkplayer")[0].duration) +
|
||||
"<br><span class='info-title'>操作：</span><span class='info-btn' onclick='thisDownload()'>下载</span><span style='margin-left: 10px' class='info-btn' onclick='thisShare()'>外链</span>";
|
||||
|
||||
layer.open({
|
||||
type: 0,
|
||||
shade: false,
|
||||
title: false, //不显示标题
|
||||
btn: false,
|
||||
content: tempStr
|
||||
});
|
||||
});
|
||||
|
||||
// 播放、暂停按钮的处理
|
||||
$(".btn-play").click(function(){
|
||||
pause();
|
||||
});
|
||||
|
||||
// 上一首歌
|
||||
$(".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");
|
||||
$(this).removeClass("btn-state-quiet"); // 取消静音
|
||||
$("#mkplayer")[0].volume = oldVol;
|
||||
volume_bar.goto(oldVol); // 恢复之前的音量
|
||||
} else {
|
||||
oldVol = volume_bar.percent;
|
||||
$("#mkplayer")[0].volume = 0;
|
||||
$(this).addClass("btn-state-quiet"); // 开启静音
|
||||
$(this).data("volume", oldVol); // 记录当前音量值
|
||||
volume_bar.goto(0); // 音量归零
|
||||
}
|
||||
});
|
||||
|
||||
// 播放功能初始化
|
||||
audioInit();
|
||||
|
||||
// 初始化播放列表
|
||||
initList();
|
||||
});
|
||||
|
||||
// 下载正在播放的这首歌
|
||||
function thisDownload() {
|
||||
download(musicList[1].item[rem.playid]);
|
||||
}
|
||||
|
||||
// 分享正在播放的这首歌
|
||||
function thisShare() {
|
||||
ajaxShare(musicList[1].item[rem.playid]);
|
||||
}
|
||||
|
||||
// 下载歌曲
|
||||
// 参数：包含歌曲信息的数组
|
||||
function download(music) {
|
||||
var tmpUrl = mkPlayer.api + "?types=download&url=" + music.mp3Url + "&name=" + urlEncode(music.musicName) + "%20-%20" + urlEncode(music.artistsName);
|
||||
window.open(tmpUrl);
|
||||
}
|
||||
|
||||
// 获取外链的ajax回调函数
|
||||
// 参数：包含音乐信息的数组
|
||||
function ajaxShare(music) {
|
||||
layer.open({
|
||||
title: '歌曲分享'
|
||||
,content: music.artistsName + ' - ' + music.musicName + ' 的外链地址为：<br>' + music.mp3Url
|
||||
});
|
||||
}
|
||||
|
||||
// 改变右侧封面图像
|
||||
// 新的图像地址
|
||||
function changeCover(img) {
|
||||
if(!img) img = "images/player_cover.png";
|
||||
|
||||
var animate = false,imgload = false;
|
||||
$("#music-cover").attr("src", img); // 改变右侧封面
|
||||
$(".sheet-item[data-no='1'] .sheet-cover").attr('src', img); // 改变正在播放列表的图像
|
||||
|
||||
// 图像加载完成
|
||||
$("#music-cover").load(function(){
|
||||
if(animate) { // 渐变动画也已完成
|
||||
blurCover(); // 替换图像并淡出
|
||||
} else {
|
||||
imgload = true; // 告诉下面的函数，图片已准备好
|
||||
}
|
||||
});
|
||||
|
||||
$("#blur-canvas").fadeOut(1000); // 先隐藏图片，方便切换时“偷梁换柱”
|
||||
|
||||
// 渐变动画
|
||||
$("#blur").animate({opacity: "0.7"}, 1000, function(){
|
||||
if(imgload) { // 如果图片已经加载好了
|
||||
blurCover(); // 替换图像并淡出
|
||||
} else {
|
||||
animate = true; // 等待图像加载完
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 背景更换特效
|
||||
function blurCover() {
|
||||
var bCanvas = $("#blur-canvas")[0].getContext("2d");
|
||||
bCanvas.drawImage($("#music-cover")[0], 10, 10, 20, 20, 0, 0, $("body").width(), $("body").height());
|
||||
$("#blur-canvas").fadeIn(1000);
|
||||
$("#blur").animate({opacity:"0.3"}, 1500); // 背景更换特效
|
||||
}
|
||||
|
||||
// 搜索功能
|
||||
// 要搜索的字符
|
||||
function search(str) {
|
||||
rem.loadPage = 1; // 已加载页数复位
|
||||
rem.wd = str;
|
||||
ajaxSearch();
|
||||
}
|
||||
|
||||
// 向列表中载入某个播放列表
|
||||
function loadList(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.dislist = list; // 记录当前显示的列表
|
||||
rem.mainList.html(''); // 清空列表中原有的元素
|
||||
addListhead(); // 向列表中加入列表头
|
||||
// 逐项添加数据
|
||||
for(var i=0; i<musicList[list].item.length; i++) {
|
||||
addItem(i + 1, musicList[list].item[i].musicName, musicList[list].item[i].artistsName, musicList[list].item[i].albumName);
|
||||
}
|
||||
if(i == 0) {
|
||||
addListbar("nodata"); // 列表中没有数据
|
||||
} else {
|
||||
if(rem.playlist === undefined) {
|
||||
// 未曾播放过
|
||||
if(mkPlayer.autoplay == true) pause(); // 设置了自动播放，则自动播放
|
||||
} else {
|
||||
refreshList(); // 刷新列表，添加正在播放样式
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 向列表中加入列表头
|
||||
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="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）
|
||||
function addListbar(types) {
|
||||
var html
|
||||
switch(types) {
|
||||
case "more": // 还可以加载更多
|
||||
html = '<div class="list-item text-center list-loadmore" 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
|
||||
}
|
||||
rem.mainList.append(html);
|
||||
}
|
||||
|
||||
// 音乐链接中特殊url处理
|
||||
// 参数：原始url
|
||||
function urlHandle(url) {
|
||||
return url.replace("http:\/\/m", "http://p");
|
||||
}
|
||||
|
||||
// 将时间格式化为 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.musicId) 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].musicId == music.musicId) {
|
||||
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].musicId == musicList[1].item[rem.playid].musicId) {
|
||||
$(".list-item[data-no='" + i + "']").addClass("list-playing"); // 添加正在播放样式
|
||||
// $(".list-item:eq(" + (i + 1) + ")").addClass("list-playing"); // 添加正在播放样式
|
||||
return true; // 一般列表中只有一首，找到了赶紧跳出
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// 添加一个歌单
|
||||
// 参数：编号、歌单名字、歌单封面
|
||||
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) {
|
||||
switch(choose) {
|
||||
case "list": // 显示播放列表
|
||||
if($(".btn[data-action='player']").css('display') !== 'none') {
|
||||
$("#player").hide();
|
||||
}
|
||||
$("#main-list").fadeIn();
|
||||
$("#sheet").fadeOut();
|
||||
|
||||
break;
|
||||
|
||||
case "sheet": // 显示专辑
|
||||
if($(".btn[data-action='player']").css('display') !== 'none') {
|
||||
$("#player").hide();
|
||||
}
|
||||
$("#sheet").fadeIn();
|
||||
$("#main-list").fadeOut();
|
||||
break;
|
||||
|
||||
case "player": // 显示播放器
|
||||
$("#player").fadeIn();
|
||||
$("#sheet").fadeOut();
|
||||
$("#main-list").fadeOut();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 将当前歌曲加入播放历史
|
||||
// 参数：要添加的音乐
|
||||
function addHis(music) {
|
||||
if(rem.playlist == 2) return true; // 在播放“播放记录”列表则不作改变
|
||||
|
||||
if(musicList[2].item.length > 300) musicList[2].item.length = 299; // 限定播放历史最多是 300 首
|
||||
|
||||
if(music.musicId !== undefined && music.musicId !== '') {
|
||||
// 检查历史数据中是否有这首歌，如果有则提至前面
|
||||
for(var i=0; i<musicList[2].item.length; i++) {
|
||||
if(musicList[2].item[i].musicId == music.musicId) {
|
||||
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[i].item = tmp_item;
|
||||
mkPlayer.defaultlist = 1; // 默认显示正在播放列表
|
||||
} else {
|
||||
musicList[i].item = musicList[i].item;
|
||||
}
|
||||
|
||||
} else if(i == 2) { // 历史记录列表
|
||||
// 读取历史记录
|
||||
var tmp_item = playerReaddata('his');
|
||||
musicList[i].item = tmp_item? tmp_item: musicList[i].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 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 = 'mkPlayer_' + key; // 添加前缀，防止串用
|
||||
data = JSON.stringify(data);
|
||||
//存储，IE6~7 cookie 其他浏览器HTML5本地存储
|
||||
if (window.localStorage) {
|
||||
localStorage.setItem(key, data);
|
||||
} else {
|
||||
Cookie.write(key, data);
|
||||
}
|
||||
}
|
||||
|
||||
// 播放器读取本地存储信息
|
||||
// 参数：键值
|
||||
// 返回：数据
|
||||
function playerReaddata(key) {
|
||||
key = 'mkPlayer_' + key;
|
||||
return JSON.parse(window.localStorage? localStorage.getItem(key): Cookie.read(key));
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
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,83 @@
|
|||
/**************************************************
|
||||
* MKOnlinePlayer v2.0
|
||||
* 歌词解析及滚动模块
|
||||
* 编写：mengkun(http://mkblog.cn)
|
||||
* 时间：2017-3-16
|
||||
*************************************************/
|
||||
|
||||
var lyricArea = $("#lyric"); // 歌词显示容器
|
||||
|
||||
// 歌曲加载完后的回调函数
|
||||
// 参数：歌词源文件
|
||||
function lyricCallback(str) {
|
||||
rem.lyric = parseLyric(str); // 解析获取到的歌词
|
||||
|
||||
lyricArea.html(''); // 清空歌词区域的内容
|
||||
lyricArea.scrollLeft(0); // 滚动到顶部
|
||||
|
||||
// 显示全部歌词
|
||||
for(var k in rem.lyric){
|
||||
var txt = rem.lyric[k];
|
||||
if(!txt) txt = " ";
|
||||
var li = $("<li>"+txt+"</li>");
|
||||
lyricArea.append(li);
|
||||
}
|
||||
}
|
||||
|
||||
// 强制刷新当前时间点的歌词
|
||||
// 参数：当前播放时间（单位：秒）
|
||||
function refreshLyric(time) {
|
||||
time = parseInt(time); // 时间取整
|
||||
var i = 0;
|
||||
for(var k in rem.lyric){
|
||||
if(k >= time) break;
|
||||
i = k; // 记录上一句的
|
||||
}
|
||||
|
||||
scrollLyric(i);
|
||||
}
|
||||
|
||||
// 滚动歌词
|
||||
// 参数：当前播放时间（单位：秒）
|
||||
function scrollLyric(time) {
|
||||
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");
|
||||
lyricArea.children().eq(i).attr("class","lplaying"); // 加上正在播放样式
|
||||
|
||||
var scroll = (lyricArea.children().height() * i) - ($(".lyric").height() / 2);
|
||||
lyricArea.stop().animate({scrollTop: scroll}, 300); // 平滑滚动到当前歌词位置
|
||||
|
||||
}
|
||||
|
||||
// 解析歌词
|
||||
// 参数：原始歌词文件
|
||||
function parseLyric(lrc) {
|
||||
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,91 @@
|
|||
/**************************************************
|
||||
* MKOnlinePlayer v2.0
|
||||
* 播放列表配置模块
|
||||
* 编写：mengkun(http://mkblog.cn)
|
||||
* 时间：2017-3-16
|
||||
*************************************************/
|
||||
// 建议修改前先备份一下
|
||||
// 获取 歌曲的网易云音乐ID 或 网易云歌单ID 的方法：
|
||||
// 先在 js/player.js 中开启调试模式，然后按 F12 打开浏览器的控制台。播放歌曲或点开歌单即可看到相应信息
|
||||
|
||||
var musicList = [
|
||||
// 以下三个系统预留列表请勿更改，否则可能导致程序无法正常运行！
|
||||
// 预留列表：搜索结果
|
||||
{
|
||||
name: "搜索结果", // 播放列表名字
|
||||
cover: "", // 播放列表封面
|
||||
creatorName: "", // 列表创建者名字
|
||||
creatorAvatar: "", // 列表创建者头像
|
||||
item: []
|
||||
},
|
||||
// 预留列表：正在播放
|
||||
{
|
||||
name: "正在播放", // 播放列表名字
|
||||
cover: "", // 播放列表封面
|
||||
creatorName: "", // 列表创建者名字
|
||||
creatorAvatar: "", // 列表创建者头像
|
||||
item: []
|
||||
},
|
||||
// 预留列表：播放历史
|
||||
{
|
||||
name: "播放历史", // 播放列表名字
|
||||
cover: "", // 播放列表封面
|
||||
creatorName: "", // 列表创建者名字
|
||||
creatorAvatar: "", // 列表创建者头像
|
||||
item: []
|
||||
},
|
||||
// 以上三个系统预留列表请勿更改，否则可能导致程序无法正常运行！
|
||||
//*********************************************
|
||||
// 自定义列表开始，您可以自由添加您的自定义列表
|
||||
{
|
||||
id: 3778678 // 云音乐热歌榜
|
||||
},
|
||||
{
|
||||
id: 3779629 // 云音乐新歌榜
|
||||
},
|
||||
{
|
||||
id: 4395559 // 华语金曲榜
|
||||
},
|
||||
{
|
||||
id: 64016 // 中国TOP排行榜（内地榜）
|
||||
},
|
||||
{
|
||||
id: 112504 // 中国TOP排行榜（港台榜）
|
||||
},
|
||||
{
|
||||
id: 19723756 // 云音乐飙升榜
|
||||
},
|
||||
{
|
||||
id: 2884035 // "网易原创歌曲榜"
|
||||
},
|
||||
// 自定义列表教程开始！
|
||||
// 方式一：手动创建列表并添加歌曲信息
|
||||
{
|
||||
name: "自定义列表", // 播放列表名字
|
||||
cover: "http://p3.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg", // 播放列表封面图像
|
||||
creatorName: "", // 列表创建者名字(暂时没用到，可空)
|
||||
creatorAvatar: "", // 列表创建者头像(暂时没用到，可空)
|
||||
item: [ // 这里面放歌曲
|
||||
{
|
||||
musicName: "成都", // 音乐名字
|
||||
artistsName: "赵雷", // 歌手名字
|
||||
albumName: "成都", // 歌曲专辑
|
||||
albumPic: "http://p3.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg", // 歌曲封面
|
||||
musicId: 436514312, // 歌曲的网易云音乐ID(歌曲的歌词会根据这个 ID 来获取，请务必填写正确。id值不需要加引号)
|
||||
mp3Url: "http://p2.music.126.net/7o5D4dA6271VktgawcbZFA==/18665309393829604.mp3" // 歌曲链接(这里不加逗号)
|
||||
},
|
||||
{
|
||||
musicName: "淘汰", // 音乐名字
|
||||
artistsName: "陈奕迅", // 歌手名字
|
||||
albumName: "认了吧", // 歌曲专辑
|
||||
albumPic: "http://p3.music.126.net/BFuOepLmD63tY75UJs1c0Q==/18872017579169120.jpg", // 歌曲封面
|
||||
musicId: 65528, // 歌曲网易云ID
|
||||
mp3Url: "http://p2.music.126.net/cMlOV_XZceHNLA1GpvkyLQ==/7990151000576820.mp3" // 歌曲链接(这里不加逗号)
|
||||
} // 列表中最后一首歌大括号后面不要加逗号
|
||||
]
|
||||
},
|
||||
// 方式二：直接提供网易云歌单ID
|
||||
{
|
||||
id: 440103454 // 网易云歌单ID
|
||||
} // 播放列表的最后一项大括号后面不要加逗号
|
||||
];
|
||||
839
js/player.js
839
js/player.js
|
|
@ -1,534 +1,341 @@
|
|||
/*
|
||||
MK在线音乐播放器 V 1.1
|
||||
支持搜索并播放音乐；
|
||||
支持一键提取音乐外链；
|
||||
支持显示歌曲封面、歌词。
|
||||
/**************************************************
|
||||
* MKOnlinePlayer v2.0
|
||||
* 播放器主功能模块
|
||||
* 编写：mengkun(http://mkblog.cn)
|
||||
* 时间：2017-3-16
|
||||
*************************************************/
|
||||
// 播放器功能配置
|
||||
var mkPlayer = {
|
||||
api: "api.php", // api地址
|
||||
wd: "陈奕迅", // 显示在搜索栏的搜索词
|
||||
loadcount: 20, // 搜索结果一次加载多少条
|
||||
defaultlist: 3, // 默认要显示的播放列表编号
|
||||
autoplay: false, // 是否自动播放(true/false) *在手机端可能无法自动播放
|
||||
volume: 0.6, // 默认音量值(0~1之间)
|
||||
debug: false // 是否开启调试模式(true/false)
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************************************
|
||||
* 以下内容是播放器核心文件，不建议进行修改，否则可能导致播放器无法正常使用!
|
||||
*
|
||||
* 哈哈，吓唬你的！想改就改呗！不过建议修改之前先【备份】,要不然改坏了弄不好了。
|
||||
******************************************************/
|
||||
|
||||
// 存储全局变量
|
||||
var rem = [];
|
||||
|
||||
// 播放功能初始化
|
||||
function audioInit() {
|
||||
var mkAudio = $("#mkplayer")[0];
|
||||
// 应用初始音量
|
||||
mkAudio.volume = volume_bar.percent;
|
||||
// 绑定歌曲进度变化事件
|
||||
mkAudio.addEventListener('timeupdate', updateProgress);
|
||||
mkAudio.addEventListener('play', audioPlay); // 开始播放了
|
||||
mkAudio.addEventListener('pause', audioPause); // 暂停
|
||||
mkAudio.addEventListener('ended', nextMusic); // 播放结束
|
||||
mkAudio.addEventListener('error', audioErr); // 播放器错误处理
|
||||
}
|
||||
|
||||
// 音频错误处理函数
|
||||
function audioErr() {
|
||||
// 没播放过，直接跳过
|
||||
if(rem.playlist === undefined) return true;
|
||||
|
||||
首发于吾爱破解论坛（http://www.52pojie.cn/）
|
||||
孟坤网页实验室（http://lab.mkblog.cn/）出品
|
||||
layer.msg('当前歌曲播放失败，自动播放下一首');
|
||||
nextMusic();
|
||||
}
|
||||
|
||||
// 点击暂停按钮的事件
|
||||
function pause() {
|
||||
if(rem.paused === false) { // 之前是播放状态
|
||||
$("#mkplayer")[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);
|
||||
}
|
||||
$("#mkplayer")[0].play();
|
||||
}
|
||||
}
|
||||
|
||||
// 播放
|
||||
function audioPlay() {
|
||||
rem.paused = false; // 更新状态（未暂停）
|
||||
refreshList(); // 刷新状态，显示播放的波浪
|
||||
$(".btn-play").addClass("btn-state-paused"); // 恢复暂停
|
||||
}
|
||||
|
||||
// 暂停
|
||||
function audioPause() {
|
||||
rem.paused = true; // 更新状态（已暂停）
|
||||
|
||||
前端界面修改自 http://sc.chinaz.com/jiaoben/150714514230.htm
|
||||
音乐资源来自于 网易云音乐
|
||||
$(".list-playing").removeClass("list-playing"); // 移除其它的正在播放
|
||||
|
||||
二次开发请保留以上信息，谢谢！
|
||||
*/
|
||||
$(".btn-play").removeClass("btn-state-paused"); // 取消暂停
|
||||
}
|
||||
|
||||
//改API地址在这里↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
|
||||
// 播放上一首歌
|
||||
function prevMusic() {
|
||||
playList(rem.playid - 1);
|
||||
}
|
||||
|
||||
var APIurl = "http://api.mkblog.cn/163music/api.php"; //api地址
|
||||
// 播放下一首歌
|
||||
function nextMusic() {
|
||||
playList(rem.playid + 1);
|
||||
}
|
||||
|
||||
//改API地址在这里↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
|
||||
// 歌曲时间变动回调函数
|
||||
function updateProgress(){
|
||||
// 暂停状态不管
|
||||
if(rem.paused !== false) return true;
|
||||
// 同步进度条
|
||||
music_bar.goto($("#mkplayer")[0].currentTime / $("#mkplayer")[0].duration);
|
||||
// 同步歌词显示
|
||||
scrollLyric($("#mkplayer")[0].currentTime);
|
||||
}
|
||||
|
||||
// 显示的列表中的某一项点击后的处理函数
|
||||
// 参数：歌曲在列表中的编号
|
||||
function listClick(no) {
|
||||
// 记录要播放的歌曲的id
|
||||
var tmpid = no;
|
||||
|
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) {
|
||||
console.log("点播了列表中的第 " + (no + 1) + " 首歌 " + musicList[rem.dislist].item[no].musicName);
|
||||
}
|
||||
|
||||
// 搜索列表的歌曲要额外处理
|
||||
if(rem.dislist === 0) {
|
||||
// 没播放过
|
||||
if(rem.playlist === undefined) {
|
||||
rem.playlist = 1; // 设置播放列表为 正在播放 列表
|
||||
rem.playid = musicList[1].item.length - 1; // 临时设置正在播放的曲目为 正在播放 列表的最后一首
|
||||
}
|
||||
|
||||
// 查找当前的播放列表中是否已经存在这首歌
|
||||
for(var i=0; i<musicList[1].item.length; i++) {
|
||||
if(musicList[1].item[i].musicId == musicList[0].item[no].musicId) {
|
||||
tmpid = i;
|
||||
playList(tmpid); // 找到了直接播放
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// 将点击的这项追加到正在播放的条目的下方
|
||||
musicList[1].item.splice(rem.playid + 1, 0, musicList[0].item[no]);
|
||||
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].mp3Url === null) {
|
||||
ajaxUrl(musicList[1].item[id], play);
|
||||
} else {
|
||||
play(musicList[1].item[id]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var scrollt=0; var tflag=0;//存放时间和歌词的数组的下标
|
||||
var lytext = [];//存放歌词
|
||||
var lytime = [];//存放歌词对应的时间
|
||||
|
||||
var line=0; var scrollh=0;
|
||||
var songIndex = 0; //当前播放的ID
|
||||
var musicID = 405987140; //当前播放的歌曲网易云ID
|
||||
var lyricScorll; //歌词滚动定时器
|
||||
var lyricScorllDelay=10; //歌词滚动速度(延时时长，单位为ms)
|
||||
var currentLyric = 0; //当前显示的歌词
|
||||
|
||||
lytext[0] = "歌词加载中...";
|
||||
|
||||
$(window).load(function(){
|
||||
so(); //加载音乐列表
|
||||
loadBG(); //加载背景
|
||||
|
||||
//fPlay(); //模拟列表songIndex点击播放
|
||||
});
|
||||
|
||||
function so(){ //搜索
|
||||
if($("#searchTxt").val()==="") //歌名不能为空
|
||||
{
|
||||
showTips("请输入歌名！"); //弹出提示
|
||||
// 播放音乐
|
||||
// 参数：要播放的音乐数组
|
||||
function play(music) {
|
||||
// 调试信息输出
|
||||
if(mkPlayer.debug) {
|
||||
console.log('开始播放 - ' + music.musicName + '\n' +
|
||||
'musicName: "' + music.musicName + '",\n' +
|
||||
'artistsName: "' + music.artistsName + '",\n' +
|
||||
'albumName: "' + music.albumName + '",\n' +
|
||||
'albumPic: "' + music.albumPic + '",\n' +
|
||||
'musicId: ' + music.musicId + ',\n' +
|
||||
'mp3Url: "' + music.mp3Url + '"');
|
||||
}
|
||||
|
||||
// 遇到错误播放下一首歌
|
||||
if(music.mp3Url == "err") {
|
||||
audioErr(); // 调用错误处理函数
|
||||
return false;
|
||||
}
|
||||
else
|
||||
{
|
||||
$("#pages").val("1"); //页码归一
|
||||
$("#musicList").html(""); //清空之前的搜索结果
|
||||
songIndex = 0; //当前播放的ID归零
|
||||
search(); //搜索
|
||||
|
||||
addHis(music); // 添加到播放历史
|
||||
|
||||
// 如果当前主界面显示的是播放历史，那么还需要刷新列表显示
|
||||
if(rem.dislist == 2 && rem.playlist !== 2) {
|
||||
loadList(2);
|
||||
} else {
|
||||
refreshList(); // 更新列表显示
|
||||
}
|
||||
|
||||
changeCover(music.albumPic); // 更新封面展示
|
||||
ajaxLyric(music.musicId, lyricCallback); // ajax加载歌词
|
||||
$("#mkplayer").attr("src", music.mp3Url); // 更改播放器音乐url
|
||||
$("#mkplayer")[0].play(); // 开始播放
|
||||
}
|
||||
|
||||
function search(){ //音乐搜索/分页ajax加载
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: APIurl,
|
||||
data: "types=search&count=20&"+$("#search-input-form").serialize(),
|
||||
dataType : "jsonp",
|
||||
jsonp: "callback",//参数名
|
||||
jsonpCallback:"mkPlayerCallBack",//函数名
|
||||
success: function(jsonData){
|
||||
//console.log(jsonData); //控制台输出返回的json（用于调试）
|
||||
//jsonData=JSON.parse(jsonData);
|
||||
|
||||
switch(jsonData.code)
|
||||
{
|
||||
case "-1":
|
||||
$("#musicList").append('<li class="songList loadmoreRemove"><div class="songLMain listtipbar">搜索出错：参数错误</div></li>');
|
||||
break;
|
||||
|
||||
//case "200":
|
||||
default:
|
||||
if($("#pages").val()!=1)$(".loadmoreRemove").remove(); //删除加载更多
|
||||
//console.log(jsonData.code);
|
||||
if(jsonData.result.songCount == "0")
|
||||
{
|
||||
$("#musicList").append('<li class="songList loadmoreRemove"><div class="songLMain listtipbar">没有找到相关歌曲</div></li>');
|
||||
}
|
||||
else if(typeof jsonData.result.songs === undefined || typeof jsonData.result.songs == "undefined")
|
||||
{
|
||||
$("#musicList").append('<li class="songList loadmoreRemove"><div class="songLMain listtipbar">所有歌曲都已经加载完啦</div></li>');
|
||||
}
|
||||
else
|
||||
{
|
||||
var pagesNow = parseInt($("#pages").val());
|
||||
for (var i = 0; i < jsonData.result.songs.length; i++) {
|
||||
var j = 0;
|
||||
|
||||
j = i + 1 + 20*(pagesNow-1);
|
||||
musicList='<li class="songList">';
|
||||
musicList+=' <div class="songLMain">';
|
||||
musicList+=' <div class="check">';
|
||||
musicList+=' <input class="checkIn" type="checkbox" select="0">';
|
||||
musicList+=' </div>';
|
||||
musicList+=' <div class="start" >';
|
||||
musicList+=' <em sonN="' + j + '" musicID="' + jsonData.result.songs[i].id + '">' + j + '</em>'; //jsonData.result.songs[i].id
|
||||
musicList+=' </div>';
|
||||
musicList+=' <div class="songBd">';
|
||||
musicList+=' <div class="col colsn">' + jsonData.result.songs[i].name.substring(0, 20) + '</div>';
|
||||
musicList+=' <div class="col colcn">' + jsonData.result.songs[i].artists[0].name + '</div>';
|
||||
musicList+=' <div class="col">' + jsonData.result.songs[i].album.name.substring(0, 20) + '</div>';
|
||||
musicList+=' </div>';
|
||||
musicList+=' <div class="control">';
|
||||
musicList+=' <a class="cicon love cannotclick"></a>';
|
||||
musicList+=' <a class="cicon more" title="点击获取这首歌的外链" style="display:none"></a>';
|
||||
musicList+=' <a class="cicon dele cannotclick" style="display:none"></a>';
|
||||
musicList+=' </div>';
|
||||
musicList+=' </div>';
|
||||
musicList+='</li>';
|
||||
$("#musicList").append(musicList);
|
||||
|
||||
}
|
||||
$("#musicList").append('<li class="songList loadmoreRemove"><div id="add-more" class="songLMain listtipbar" onclick="loadmore();">点击加载更多</div></li>');
|
||||
$("#musicList").append('<li class="songList loadmoreRemove"></li>');
|
||||
$("#musicList").append('<script class="loadmoreRemove" type="text/javascript" src="js/ajaxList.js"><\/script>');
|
||||
}
|
||||
// 我的要求并不高，保留这一句版权信息可好？
|
||||
// 保留了，你不会损失什么；而保留版权，是对作者最大的尊重。
|
||||
console.info('欢迎使用 MKOnlinePlayer!\n当前版本： v2.0 \n作者：mengkun(http://mkblog.cn)\n歌曲来源于：网易云音乐(http://music.163.com/)\nGithub：https://github.com/mengkunsoft/MKOnlineMusicPlayer');
|
||||
|
||||
// 音乐进度条拖动回调函数
|
||||
function mBcallback(newVal) {
|
||||
var newTime = $("#mkplayer")[0].duration * newVal;
|
||||
// 应用新的进度
|
||||
$("#mkplayer")[0].currentTime = newTime;
|
||||
refreshLyric(newTime);
|
||||
}
|
||||
|
||||
// 音量条变动回调函数
|
||||
// 参数：新的值
|
||||
function vBcallback(newVal) {
|
||||
$("#mkplayer")[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);
|
||||
// 初始化音量设定
|
||||
var tmp_vol = playerReaddata('volume');
|
||||
tmp_vol = tmp_vol? tmp_vol: (isMobile.any()? 1: mkPlayer.volume);
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadmore(){ //加载更多
|
||||
$("#pages").val(parseInt($("#pages").val())+1); //页码加一
|
||||
$("#add-more").html("疯狂加载中...");
|
||||
|
||||
search();
|
||||
}
|
||||
|
||||
|
||||
$(function(){
|
||||
|
||||
$('#searchTxt').bind('keypress',function(event){ //歌名搜索框单击回车搜索
|
||||
if(event.keyCode == "13")
|
||||
{
|
||||
so();
|
||||
mk.callback(percent);
|
||||
mk.goto(percent);
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
$("#searchBtn").click(function(){so()}); //点击搜索
|
||||
|
||||
$(".checkAll").click(function(){ //全选
|
||||
var s=$(this).attr("select");
|
||||
if (s=="0") {
|
||||
$(this).css("background-position","-37px -710px");
|
||||
$(".checkIn[select='0']").css("background-position","-37px -710px");
|
||||
$(".checkIn[select='0']").attr("select","1");
|
||||
$(this).attr("select","1");
|
||||
}
|
||||
if (s=="1") {
|
||||
$(this).css("background-position","");
|
||||
$(".checkIn[select='1']").css("background-position","");
|
||||
$(".checkIn[select='1']").attr("select","0");
|
||||
$(this).attr("select","0");
|
||||
}
|
||||
});
|
||||
|
||||
/*底部进度条控制*/
|
||||
$( ".dian" ).draggable({
|
||||
containment:".pro2",
|
||||
drag: function() {
|
||||
var l=$(".dian").css("left");
|
||||
var le = parseInt(l);
|
||||
audio.currentTime = audio.duration*(le/678);
|
||||
}
|
||||
});
|
||||
|
||||
/*音量控制*/
|
||||
$( ".dian2" ).draggable({
|
||||
containment:".volControl",
|
||||
drag: function() {
|
||||
var l=$(".dian2").css("left");
|
||||
var le = parseInt(l);
|
||||
audio.volume=(le/80);
|
||||
|
||||
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").stop().animate({width: (percent*100)+"%"}, 200);
|
||||
return true;
|
||||
},
|
||||
// 锁定进度条
|
||||
lock : function(islock) {
|
||||
if(islock) {
|
||||
this.locked = true;
|
||||
$(this.bar).addClass("mkpgb-locked");
|
||||
} else {
|
||||
this.locked = false;
|
||||
$(this.bar).removeClass("mkpgb-locked");
|
||||
}
|
||||
});
|
||||
|
||||
/*底部播放按钮*/
|
||||
$(".playBtn").click(function(){
|
||||
if(songIndex === 0) //尚未播放过歌曲
|
||||
{
|
||||
$(".start em[sonN=1]").click(); //播放第一首歌
|
||||
}
|
||||
else
|
||||
{
|
||||
if(audio.paused) //如果当前是暂停状态
|
||||
{
|
||||
audio.play(); //播放
|
||||
$(this).css("background-position","0 -30px"); //显示暂停标志
|
||||
}
|
||||
else
|
||||
{
|
||||
audio.pause(); //暂停
|
||||
$(this).css("background-position",""); //显示播放标志
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(".mode").click(function(){ //播放模式
|
||||
// var t = calcTime(Math.floor(audio.currentTime))+'/'+calcTime(Math.floor(audio.duration));
|
||||
// //alert(t);
|
||||
// var p =Math.floor(audio.currentTime)/Math.floor(audio.duration);
|
||||
// alert(p);
|
||||
//alert(lytext[1]);
|
||||
});
|
||||
|
||||
/*切歌*/
|
||||
$(".prevBtn").click(function(){ /*上一首*/
|
||||
var sid = parseInt(songIndex)-1;
|
||||
$(".start em[sonN="+sid+"]").click();
|
||||
});
|
||||
$(".nextBtn").click(function(){ /*下一首*/
|
||||
var sid = parseInt(songIndex)+1;
|
||||
$(".start em[sonN="+sid+"]").click();
|
||||
});
|
||||
|
||||
/*暂不支持的功能*/
|
||||
$(".uiItem").click(function(){
|
||||
showTips("Sorry,该功能暂未上线!");
|
||||
});
|
||||
|
||||
/*判断用户是否已更换API地址*/
|
||||
if(APIurl == "http://api.mkblog.cn/163music/api.php") //如果您已经更换了api，可以将这里三行删掉
|
||||
{
|
||||
showTips("温馨提示：<br>您当前使用的api为临时api，为保障正常使用，请按照说明文档更换api！");
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
/*首尾模糊效果*/
|
||||
function loadBG(){
|
||||
//alert();
|
||||
// stackBlurImage('canvas1', 'canvas', 60, false);
|
||||
var c=document.getElementById("canvas");
|
||||
var ctx=c.getContext("2d");
|
||||
var img=document.getElementById("canvas1");
|
||||
ctx.drawImage(img,45,45,139,115,0,0,1366,700);
|
||||
stackBlurCanvasRGBA('canvas',0,0,1366,700,60);
|
||||
}
|
||||
|
||||
function updateProgress(ev){ //歌曲时间变动
|
||||
mPlay();//显示歌词
|
||||
|
||||
/*显示歌曲总长度*/
|
||||
var songTime = calcTime(Math.floor(audio.duration));
|
||||
$(".duration").html(songTime);
|
||||
|
||||
/*显示歌曲当前时间*/
|
||||
var curTime = calcTime(Math.floor(audio.currentTime));
|
||||
$(".position").html(curTime);
|
||||
|
||||
/*进度条*/
|
||||
var lef = 678*(Math.floor(audio.currentTime)/Math.floor(audio.duration));
|
||||
var llef = Math.floor(lef).toString()+"px";
|
||||
$(".dian").css("left",llef);
|
||||
}
|
||||
|
||||
function calcTime(time){ //时间格式化
|
||||
var hour; var minute; var 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;
|
||||
return minute+":"+second;
|
||||
}
|
||||
|
||||
function audioPlay(ev){ //播放器开始播放
|
||||
$(".iplay").css("background",'url("images/nowplaying.gif") 50% 50%'); //左侧图标动
|
||||
|
||||
$(".start em[sonN="+songIndex+"]").css({ //播放的歌曲前加载播放图形
|
||||
"background":'url("images/wave.gif") no-repeat', //加载波形图片
|
||||
"color":"transparent"
|
||||
});
|
||||
|
||||
$(".playBtn").css("background-position","0 -30px"); //显示暂停按钮
|
||||
startLyricScroll(); //开始歌词滚动
|
||||
}
|
||||
|
||||
function audioPause(ev){ //播放器暂停
|
||||
$(".iplay").css("background","");
|
||||
$(".start em[sonN=" + songIndex + "]").css({
|
||||
"background":'url("images/pause.png") no-repeat 0 0',
|
||||
"color":"transparent"
|
||||
});
|
||||
stopLyricScroll(); //停止歌词滚动
|
||||
}
|
||||
|
||||
function audioEnded(ev){ //一首歌曲播放完毕(自动播放下一首)
|
||||
//重新搜索过不接着播放，判断播放顺序（顺序、随机、循环）
|
||||
var sid = parseInt(songIndex)+1;
|
||||
$(".start em[sonN="+sid+"]").click();
|
||||
}
|
||||
|
||||
|
||||
function getReady(s)//在显示歌词前做好准备工作
|
||||
{
|
||||
$.ajax({ //调用jquery的ajax方法
|
||||
type: "POST", //设置ajax方法提交数据的形式
|
||||
url: APIurl, //把数据提交到ok.php
|
||||
data: "types=lyric&id=" + musicID, //输入框writer中的值作为提交的数据
|
||||
dataType : "jsonp",
|
||||
jsonp: "callback",//参数名
|
||||
jsonpCallback:"mkPlayerCallBack",//函数名
|
||||
success: function(jsonData){ //提交成功后的回调，msg变量是ok.php输出的内容。
|
||||
//console.log("请求歌词返回的json数据-" + jsonData); //控制台输出返回的json（用于调试）
|
||||
//jsonData = JSON.parse(jsonData);
|
||||
|
||||
switch(jsonData.code)
|
||||
{
|
||||
case "-1":
|
||||
console.log("歌曲ID为空");
|
||||
break;
|
||||
|
||||
//case "200":
|
||||
default:
|
||||
//console.log(jsonData);
|
||||
if ((jsonData.nolyric === true)||(typeof jsonData.lrc === undefined) || (typeof jsonData.lrc == "undefined")||(typeof jsonData.lrc.lyric === undefined) || (typeof jsonData.lrc.lyric == "undefined")) //没有歌词
|
||||
{
|
||||
readyLyric("");
|
||||
}
|
||||
else
|
||||
{
|
||||
var ly = jsonData.lrc.lyric;
|
||||
//console.log("请求歌词返回的歌词数据-" + ly); //控制台输出返回的json（用于调试）
|
||||
readyLyric(ly);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});//ajax
|
||||
}
|
||||
|
||||
function mPlay()//显示歌词
|
||||
{
|
||||
var ms =audio.currentTime; //获取当前播放时长
|
||||
show(ms); //显示指定时间的歌词
|
||||
}
|
||||
|
||||
function show(t) //显示指定时间的歌词
|
||||
{
|
||||
|
||||
for(k=0;k<lytime.length;k++)
|
||||
{
|
||||
if((lytime[k]<=t && t<lytime[k+1]) || ((k==(lytime.length-1)) && (t >= lytime[0]))) //当前显示的这一行
|
||||
{
|
||||
currentLyric = k; //记录当前的歌词条
|
||||
scrollh = k*25;//让当前的滚动条的顶部改变一行的高度
|
||||
$("#lyr span").attr("class","");
|
||||
$("#lyr span[lines=" + k + "]").attr("class","playing");
|
||||
return; //找到了就赶紧跳出函数
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function readyLyric(ly) //准备好歌词
|
||||
{
|
||||
// lytext.length=0;
|
||||
// lytime.length=0;
|
||||
// lytext = new Array();
|
||||
// lytime = new Array();
|
||||
|
||||
if (ly === "") {
|
||||
ly = "[00:00]暂无歌词\n";
|
||||
}
|
||||
|
||||
var arrly=ly.split("\n");//转化成数组
|
||||
|
||||
tflag=0;
|
||||
|
||||
lytext = []; //清空数组
|
||||
lytime = [];
|
||||
|
||||
$("#lry").html(" "); //清空歌词显示区域
|
||||
|
||||
document.getElementById("lyr").scrollTop=0;
|
||||
|
||||
for(i=0;i<arrly.length;i++)
|
||||
{
|
||||
sToArray(arrly[i]); //解析如“[02:02][00:24]没想到是你”的字符串前放入数组
|
||||
}
|
||||
|
||||
sortAr(); //按时间重新排序时间和歌词的数组
|
||||
|
||||
if(!lyricScorll)
|
||||
{
|
||||
startLyricScroll(); //开始歌词滚动
|
||||
}
|
||||
}
|
||||
|
||||
function startLyricScroll() //开始歌词滚动
|
||||
{
|
||||
lyricScorll = self.setInterval("scrollBar()", lyricScorllDelay);//设置歌词自动滚动
|
||||
}
|
||||
|
||||
function stopLyricScroll() //停止歌词滚动
|
||||
{
|
||||
//if(lyricScorll)
|
||||
window.clearInterval(lyricScorll); //清除歌词滚动
|
||||
lyricScorll = null;
|
||||
}
|
||||
|
||||
function scrollBar()//设置滚动条的滚动到歌词指定点
|
||||
{
|
||||
if(document.getElementById("lyr").scrollTop<=scrollh)
|
||||
{
|
||||
document.getElementById("lyr").scrollTop+=1;
|
||||
}
|
||||
if(document.getElementById("lyr").scrollTop>=scrollh+50)
|
||||
{
|
||||
document.getElementById("lyr").scrollTop-=1;
|
||||
}
|
||||
}
|
||||
|
||||
function sToArray(str)//解析如“[02:02][00:24]没想到是你”的字符串前放入数组
|
||||
{
|
||||
var left=0;//"["的个数
|
||||
var leftAr = [];
|
||||
for(var k=0;k<str.length;k++)
|
||||
{
|
||||
if(str.charAt(k)=="[") { leftAr[left]=k; left++; }
|
||||
}
|
||||
if(left !== 0)
|
||||
{
|
||||
for(var i=0;i<leftAr.length;i++)
|
||||
{
|
||||
lytext[tflag]=str.substring(str.lastIndexOf("]")+1);//放歌词
|
||||
lytime[tflag]=conSeconds(str.substring(leftAr[i]+1,leftAr[i]+6));//放时间
|
||||
tflag++;
|
||||
}
|
||||
}
|
||||
//alert(str.substring(leftAr[0]+1,leftAr[0]+6));
|
||||
}
|
||||
function sortAr()//按时间重新排序时间和歌词的数组
|
||||
{
|
||||
var temp=null;
|
||||
var temp1=null;
|
||||
for(var k=0;k<lytime.length;k++)
|
||||
{
|
||||
for(var j=0;j<lytime.length-k;j++)
|
||||
{
|
||||
if(lytime[j]>lytime[j+1])
|
||||
{
|
||||
temp=lytime[j];
|
||||
temp1=lytext[j];
|
||||
lytime[j]=lytime[j+1];
|
||||
lytext[j]=lytext[j+1];
|
||||
lytime[j+1]=temp;
|
||||
lytext[j+1]=temp1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
currentLyric = 0;
|
||||
scrollh = 0;
|
||||
var div1=document.getElementById("lyr");//取得层
|
||||
div1.innerHTML=" ";//每次调用清空以前的一次
|
||||
for(k=0;k<lytext.length;k++) //显示出所有歌词
|
||||
{
|
||||
div1.innerHTML += "<span lines='" + k + "'>"+lytext[k]+"</span><br>";
|
||||
}
|
||||
}
|
||||
|
||||
function conSeconds(t)//把形如：01：25的时间转化成秒；
|
||||
{
|
||||
var m=t.substring(0,t.indexOf(":"));
|
||||
var s=t.substring(t.indexOf(":")+1);
|
||||
m=parseInt(m.replace(/0/,""));
|
||||
//if(isNaN(s)) s=0;
|
||||
var totalt=parseInt(m)*60+parseInt(s);
|
||||
//alert
|
||||
// (parseInt(s.replace(//b(0+)/gi,"")));
|
||||
//if(isNaN(totalt)) return 0;
|
||||
|
||||
return totalt;
|
||||
}
|
||||
|
||||
function showMusicUrl(name,url) //显示外链地址
|
||||
{
|
||||
var html='<div class="tips" id="msgtips">' + name + ' 的外链地址为</div>';
|
||||
html += '<div id="msgbody"><textarea rows="3">' + url + '</textarea></div>';
|
||||
showMsg(html) //弹出消息
|
||||
}
|
||||
|
||||
function showTips(msg) //弹出提示
|
||||
{
|
||||
var html='<div class="tips" id="msgtips">' + msg + '</div>';
|
||||
showMsg(html) //弹出消息
|
||||
}
|
||||
|
||||
function showMsg(html) //弹出消息
|
||||
{
|
||||
var windowWidth = document.body.clientWidth;
|
||||
var windowHeight = document.body.clientHeight;
|
||||
|
||||
html += '<div class="readit" onclick="hideMsg();">我知道了</div>';
|
||||
|
||||
$("#msgbox").html(html);
|
||||
|
||||
var popupHeight = $("#msgbox").height();
|
||||
var popupWidth = $("#msgbox").width();
|
||||
//添加并显示遮罩层
|
||||
$("#mask").width(windowWidth + document.body.scrollWidth)
|
||||
.height(windowHeight + document.body.scrollHeight)
|
||||
.click(function() {hideMsg(); })
|
||||
.fadeIn(200);
|
||||
$("#msgbox").css({"position": "absolute","left":windowWidth/2-popupWidth/2,"top":windowHeight/2-popupHeight/2})
|
||||
.fadeIn(200);
|
||||
}
|
||||
function hideMsg() //隐藏弹出的提示框
|
||||
{
|
||||
$("#mask").fadeOut(200);
|
||||
$("#msgbox").fadeOut(200);
|
||||
}
|
||||
|
||||
function urlEncode(Strings) { //url编码
|
||||
return encodeURIComponent(Strings).replace(/'/g,"%27").replace(/"/g,"%22");
|
||||
}
|
||||
|
||||
|
||||
function fPlay(){
|
||||
$(".start em[sonN="+songIndex+"]").click();
|
||||
}
|
||||
};
|
||||
// 初始化滚动条
|
||||
initProgress();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
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
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 701 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Loading…
Reference in New Issue