v2.21

紧急修复之前的API失效的问题

README.MD

@@ -1,9 +1,18 @@
-MKOnlineMusicPlayer V2.2
+MKOnlineMusicPlayer V2.21
 ========
 MKOnlineMusicPlayer 是一款开源的基于网易云音乐api的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人音乐播放列表同步等功能。
 
 前端界面参照 QQ 音乐网页版进行布局，同时采用了流行的响应式设计，无论是在PC端还是在手机端，均能给您带来原生 app 般的使用体验。
 
+### 界面欣赏
+-----
+![主界面(电脑端)](https://ws2.sinaimg.cn/large/006srDtYly1ffqxu72p2zj311y0hlqcl.jpg)
+
+![播放列表界面(电脑端)](https://ws2.sinaimg.cn/large/006srDtYly1ffqxyzownkj311x0hiamq.jpg)
+
+![歌曲搜索与播放](https://ws2.sinaimg.cn/large/006srDtYly1ffqxzlc2kkj311y0hjwqa.jpg)
+
+
 ### 相关链接
 -----
 **在线演示** [http://lab.mkblog.cn/music/](http://lab.mkblog.cn/music/)
@@ -29,8 +38,31 @@ MKOnlineMusicPlayer 是一款开源的基于网易云音乐api的在线音乐播
 #### 其它
 作者很忙，非诚勿扰。欢迎提交 BUG 及好的建议，不欢迎一上来就问一些基础的东西及唠东唠西。
 
+### 待解决的问题
+-----
+- 降低模糊背景内存占用，解决移动设备下卡顿问题；
+- 对其它音乐源(虾米、QQ)的支持
+- IOS 设备播放失败问题
+- 高音质音乐下载功能
+- 超长歌词显示定位错乱问题
+- 歌曲播放模式切换(单曲循环、随机播放、列表循环)功能
+- 移动端歌曲列表直接下载歌曲功能
+
+### 打赏
+-----
+- 解决上面这些问题，需要花费很多时间与精力。支持项目继续完善下去，你也可以贡献一份力量！
+- 有了打赏，也就会有更新的动力！ :blush:
+
+   ![](https://ws3.sinaimg.cn/large/006srDtYly1ffqy973ijwj30hk05atam.jpg)
+
 ### 更新日志
 -----
+#### v2.21 `2017/5/19`
+- 临时修复 API 失效问题
+- 新增歌曲超时检测，播放超时则自动播放下一首
+- 新增设置数据传输方式(GET/POST)
+- (这是一个临时版本，虽然解决了一部分API失效的问题，但是还是存在一些问题。剩下的问题将在之后的 v2.3 正式版中解决)
+
 #### v2.2 `2017/3/26`
 - 用户歌单获取时新增加载中动画及遮罩，防止重复加载
 - 修复中等屏幕下鼠标滑过tab边框消失的bug
@@ -118,6 +150,7 @@ MKOnlineMusicPlayer 是一款开源的基于网易云音乐api的在线音乐播
 
 #### 采用的开源模块
 - **Jquery**：js主流开发框架 [http://jquery.com/](http://jquery.com/)
+- **Meting**：强大的音乐API框架[https://github.com/metowolf/Meting](https://github.com/metowolf/Meting)
 - **layer**：一款强大的web弹层组件 [http://layer.layui.com/](http://layer.layui.com/)
 - **mCustomScrollbar**：jQuery自定义滚动条样式插件 [http://manos.malihu.gr/jquery-custom-content-scroller/](http://manos.malihu.gr/jquery-custom-content-scroller/)
 - **background-blur**：跨浏览器磨砂效果背景图片模糊特效插件 [https://msurguy.github.io/background-blur/](https://msurguy.github.io/background-blur/)

api.php

@@ -1,19 +1,29 @@
 <?php
 /**************************************************
- * MKOnlinePlayer v2.2
+ * MKOnlinePlayer v2.21
  * 后台音乐数据抓取模块
  * 编写：mengkun(http://mkblog.cn)
- * 时间：2017-3-26
+ * 时间：2017-5-19
  *************************************************/
 
+require_once('plugns/Meting.php');
+
+use Metowolf\Meting;
+
+
+$API = new Meting('netease');
+
+$API->format(false);
+
 // api设置
 $GLOBALS['config'] = array(
     'proxy' => array(    // 是否使用代理（true/false）  供海外空间“翻墙”用
-            'musicInfo'=> false,        // 歌曲信息获取（如果歌曲无法播放请将这一项设为 true）
+            'musicInfo'=> false,        // 歌曲信息获取（海外空间如果歌曲无法播放请将这一项设为 true）
-            'lyric'=> false,            // 歌词获取（如果歌词无法获取请将这一项设为 true）
+            'lyric'=> false,            // 歌词获取（海外空间如果歌词无法获取请将这一项设为 true）
-            'userlist'=> false,         // 用户歌单获取（用户歌单无法加载时请将此项设为 true）
+            'userlist'=> false,         // 用户歌单获取（海外空间用户歌单无法加载时请将此项设为 true）
-            'playlist'=> false,         // 系统歌单获取（系统歌单无法加载时请将此项设为 true）
+            'playlist'=> false,         // 系统歌单获取（海外空间系统歌单无法加载时请将此项设为 true）
-            'search'=> false            // 搜索（搜索功能无法使用时请将此项设为 true）
+            'search'=> false,            // 搜索（海外空间搜索功能无法使用时请将此项设为 true）
+            'download'=> false          // 下载(海外空间歌曲无法下载时请将此项设为 true)
         ),
     'proxyIP' => '222.186.34.84',    // 代理 IP     （这里的代理是随手搜的，可能有点慢，请自己寻找更快的代理）
     'proxyPort' => 8998,    // 代理端口
@@ -35,9 +45,12 @@ function curl($url, $proxy = false, $post_data = ''){ //从网易云音乐读取
     $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',
+        'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36',
         'Content-Type: application/x-www-form-urlencoded',
         'Referer: http://music.163.com/search/',
+        'Cookie: os=linux; appver=1.0.0.1026; osver=Ubuntu%2016.10; MUSIC_U=78d411095f4b022667bc8ec49e9a44cca088df057d987f5feaf066d37458e41c4a7d9447977352cf27ea9fee03f6ec4441049cea1c6bb9b6; __remember_me=true',
+        'X-FORWARDED-FOR:220.168.209.130',
+        'CLIENT-IP:220.168.209.130'
     );
     curl_setopt($curl, CURLOPT_URL,$url);
     curl_setopt($curl, CURLOPT_RETURNTRANSFER,1);
@@ -70,8 +83,11 @@ switch($types)
             echojson(json_encode($tempArr));
         }
         
-        $url= "http://music.163.com/api/song/detail/?id={$id}&ids=%5B{$id}%5D&csrf_token=";    //请求url
+        $data = $API->url($id);
-        echojson(curl($url, $GLOBALS['config']['proxy']['musicInfo']));
+        $data = $API->netease_url($data);
+        
+        echojson($data);
+        
         break;
     
     case "lyric":       //获取歌词
@@ -94,22 +110,7 @@ switch($types)
         
         $musicname = getParam('name', 'noname');  //歌曲名字
         
-        $ua = $_SERVER["HTTP_USER_AGENT"];  // 根据 ua 判断浏览器作对应处理，防止文件名乱码
+        header("location:$fileurl");
-        $filename = $musicname . ".mp3";
-        $encoded_filename = urlencode($filename); 
-        $encoded_filename = str_replace("+", "%20", $encoded_filename); 
-        header("Content-Type: application/force-download");
-        if (preg_match("/MSIE/", $ua) || preg_match("/rv\:11\.0/", $ua)) {  // IE浏览器
-            header('Content-Disposition: attachment; filename="' . $encoded_filename . '"'); 
-        } else if (preg_match("/Firefox/", $ua)) {  //火狐浏览器
-            header('Content-Disposition: attachment; filename*="utf8\'\'' . $filename . '"'); 
-        } else if (preg_match("/Edge/", $ua)) {  //edge浏览器
-            header('Content-Disposition: attachment; filename="' . $encoded_filename . '"'); 
-        } else { 
-            header('Content-Disposition: attachment; filename="' . $filename . '"'); 
-        } 
-        $mp3file = file_get_contents($fileurl); 
-        echo $mp3file;
         exit();
         break;
     
@@ -131,8 +132,19 @@ switch($types)
             echojson(json_encode($tempArr));
         }
         
-        $url= "http://music.163.com/api/playlist/detail?id={$id}&updateTime=-1";    //请求url
+        // $API->format(true);
-        echojson(curl($url, $GLOBALS['config']['proxy']['playlist']));
+        $data = $API->playlist($id);
+        
+        $data = json_decode($data, true);
+        
+        if(isset($data['playlist']['coverImgId_str'])) {
+            $data['playlist']['coverImgUrl'] = $API->pic($data['playlist']['coverImgId_str'], 150, false);
+        } else {
+            $data['playlist']['coverImgUrl'] = '';
+        }
+        
+        $data = json_encode($data);
+        echojson($data);
         break;
      
     case "search":  //搜索歌曲
@@ -145,12 +157,12 @@ switch($types)
         
         $limit = getParam('count', 20);  //每页显示数量
         $pages = getParam('pages');  //页码
-        if($pages>1000 || $pages<1) $pages=1;    //纠正错误的值
+        if($pages<1) $pages=1;    //纠正错误的值
         $offset= ($pages-1) * $limit;     //偏移量
         
-        $url= "http://music.163.com/api/search/get/web?csrf_token=";    //请求url
+        $data = $API->search($s, $pages, $limit);
-        $post_data = 'hlpretag=<span class="s-fc7">&hlposttag=</span>&s='. $s . '&type=1&offset='. $offset . '&total=true&limit=' . $limit;
+        
-        echojson(curl($url, $GLOBALS['config']['proxy']['search'], $post_data));
+        echojson($data);
 }
 
 /**

index.html

@@ -14,7 +14,7 @@
     <meta name="x5-fullscreen" content="true"><!--QQ强制全屏-->
     <meta name="x5-page-mode" content="app"><!--QQ应用模式-->
     
-    <title>MKOnlinePlayer v2.2</title>
+    <title>MKOnlinePlayer v2.21</title>
     <meta name="description" content="一款开源的基于网易云音乐api的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人音乐播放列表同步等功能。"/>
     <meta name="keywords" content="孟坤播放器,在线音乐播放器,MKOnlinePlayer,网易云音乐,音乐api,音乐播放器源代码"/>
     
@@ -38,6 +38,8 @@
     <!-- 滚动条美化样式文件 -->
     <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.min.css">
     
+    <!-- layer弹窗插件样式文件 -->
+    <link rel="stylesheet" href="plugns/layer/skin/default/layer.css?v=3.0.2302" id="layuicss-skinlayercss">
 </head>
 <body>
 

js/ajax.js

@@ -11,7 +11,7 @@ function ajaxSearch() {
         var tmpLoading = layer.msg('搜索中', {icon: 16,shade: 0.01});
     }
     $.ajax({
-        type: "POST", 
+        type: mkPlayer.method, 
         url: mkPlayer.api, 
         data: "types=search&count=" + mkPlayer.loadcount + "&pages=" + rem.loadPage + "&name=" + rem.wd,
         dataType : "jsonp",
@@ -56,8 +56,8 @@ function ajaxSearch() {
                 no ++;
                 tempItem =  {
                     musicName: jsonData.result.songs[i].name,  // 音乐名字
-                    artistsName: jsonData.result.songs[i].artists[0].name, // 艺术家名字
+                    artistsName: jsonData.result.songs[i].ar[0].name, // 艺术家名字
-                    albumName: jsonData.result.songs[i].album.name,    // 专辑名字
+                    albumName: jsonData.result.songs[i].al.name,    // 专辑名字
                     albumPic: null,    // 专辑图片
                     musicId: jsonData.result.songs[i].id,  // 网易云音乐ID
                     mp3Url: null // mp3链接
@@ -101,18 +101,13 @@ function ajaxUrl(music, callback)
     }
     
     $.ajax({ 
-        type: "POST", 
+        type: mkPlayer.method, 
         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 = jsonData.url;  // 获取音乐链接
-                mp3Url = urlHandle(jsonData.songs[0].mp3Url);  // 获取音乐链接
-                if(typeof(jsonData.songs[0].picUrl) !== undefined) {
-                    picUrl = jsonData.songs[0].album.picUrl;    // 获取音乐图片
-                }
-            }
             
             // 调试信息输出
             if(mkPlayer.debug) {
@@ -123,7 +118,7 @@ function ajaxUrl(music, callback)
             if(!picUrl) picUrl = null;
             
             music.mp3Url = mp3Url;    // 记录结果
-            music.albumPic = picUrl;
+            // music.albumPic = picUrl;
             
             updateMinfo(music); // 更新音乐信息
             
@@ -151,7 +146,7 @@ function ajaxPlayList(lid, id, callback){
     musicList[id].isloading = true; // 更新状态：列表加载中
     
     $.ajax({
-        type: "POST", 
+        type: mkPlayer.method, 
         url: mkPlayer.api, 
         data: "types=playlist&id=" + lid,
         dataType : "jsonp",
@@ -162,23 +157,29 @@ function ajaxPlayList(lid, id, callback){
             // 存储歌单信息
             var tempList = {
                 id: lid,    // 列表的网易云 id
-                name: jsonData.result.name,   // 列表名字
+                name: jsonData.playlist.name,   // 列表名字
-                cover: jsonData.result.coverImgUrl,   // 列表封面
+                cover: jsonData.playlist.coverImgUrl,   // 列表封面
-                creatorName: jsonData.result.creator.nickname,   // 列表创建者名字
+                creatorName: jsonData.playlist.creator.nickname,   // 列表创建者名字
-                creatorAvatar: jsonData.result.creator.avatarUrl,   // 列表创建者头像
+                creatorAvatar: jsonData.playlist.creator.avatarUrl,   // 列表创建者头像
                 item: []
             };
             
-            if(typeof jsonData.result.tracks !== undefined || jsonData.result.tracks.length !== 0) {
+            if(jsonData.playlist.coverImgUrl !== '') {
+                tempList.cover = jsonData.playlist.coverImgUrl;
+            } else {
+                tempList.cover = musicList[id].cover;
+            }
+            
+            if(typeof jsonData.playlist.tracks !== undefined || jsonData.playlist.tracks.length !== 0) {
                 // 存储歌单中的音乐信息
-                for (var i = 0; i < jsonData.result.tracks.length; i++) {
+                for (var i = 0; i < jsonData.playlist.tracks.length; i++) {
                     tempList.item[i] =  {
-                        musicName: jsonData.result.tracks[i].name,  // 音乐名字
+                        musicName: jsonData.playlist.tracks[i].name,  // 音乐名字
-                        artistsName: jsonData.result.tracks[i].artists[0].name, // 艺术家名字
+                        artistsName: jsonData.playlist.tracks[i].ar[0].name, // 艺术家名字
-                        albumName: jsonData.result.tracks[i].album.name,    // 专辑名字
+                        albumName: jsonData.playlist.tracks[i].al.name,    // 专辑名字
-                        albumPic: jsonData.result.tracks[i].album.picUrl,    // 专辑图片
+                        albumPic: jsonData.playlist.tracks[i].al.picUrl,    // 专辑图片
-                        musicId: jsonData.result.tracks[i].id,  // 网易云音乐ID
+                        musicId: jsonData.playlist.tracks[i].id,  // 网易云音乐ID
-                        mp3Url: urlHandle(jsonData.result.tracks[i].mp3Url) // mp3链接
+                        mp3Url: null//urlHandle(jsonData.playlist.tracks[i].mp3Url) // mp3链接
                     };
                 }
             }
@@ -231,7 +232,7 @@ function ajaxLyric(mid, callback) {
     if(!mid) callback('');  // 没有音乐ID，直接返回
     
     $.ajax({
-        type: "POST",
+        type: mkPlayer.method,
         url: mkPlayer.api,
         data: "types=lyric&id=" + mid,
         dataType : "jsonp",
@@ -270,7 +271,7 @@ function ajaxUserList(uid)
 {
     var tmpLoading = layer.msg('加载中...', {icon: 16,shade: 0.01});
     $.ajax({
-        type: "POST",
+        type: mkPlayer.method,
         url: mkPlayer.api,
         data: "types=userlist&uid=" + uid,
         dataType : "jsonp",
@@ -324,6 +325,7 @@ function ajaxUserList(uid)
         },   //success
         error: function(XMLHttpRequest, textStatus, errorThrown) {
             layer.msg('歌单同步失败 - ' + XMLHttpRequest.status);
+            console.log(XMLHttpRequest + textStatus + errorThrown);
         }   // error
     });//ajax
     return true;

js/functions.js

@@ -532,7 +532,7 @@ function refreshList() {
 function addSheet(no, name, cover) {
     if(!cover) cover = "images/player_cover.png";
     if(!name) name = "读取中...";
-    cover += "?param=186x186";  // 限制封面图像大小
+    // cover += "?param=186x186";  // 限制封面图像大小
     var html = '<div class="sheet-item" data-no="' + no + '">' +
     '    <img class="sheet-cover" src="' +cover+ '">' +
     '    <p class="sheet-name">' +name+ '</p>' +
@@ -728,11 +728,9 @@ function refreshSheet() {
 function playerSavedata(key, data) {
     key = 'mkPlayer_' + key;    // 添加前缀，防止串用
     data = JSON.stringify(data);
-    //存储，IE6~7 cookie 其他浏览器HTML5本地存储
+    // 存储，IE6~7 不支持HTML5本地存储
     if (window.localStorage) {
         localStorage.setItem(key, data);	
-    } else {
-        Cookie.write(key, data);	
     }
 }
 
@@ -740,6 +738,7 @@ function playerSavedata(key, data) {
 // 参数：键值
 // 返回：数据
 function playerReaddata(key) {
+    if(!window.localStorage) return '';
     key = 'mkPlayer_' + key;
-    return JSON.parse(window.localStorage? localStorage.getItem(key): Cookie.read(key));
+    return JSON.parse(localStorage.getItem(key));
 }

js/player.js

@@ -1,20 +1,21 @@
 /**************************************************
- * MKOnlinePlayer v2.2
+ * MKOnlinePlayer v2.21
  * 播放器主功能模块
  * 编写：mengkun(http://mkblog.cn)
- * 时间：2017-3-26
+ * 时间：2017-5-19
  *************************************************/
 // 播放器功能配置
 var mkPlayer = {
     api: "api.php", // api地址
     wd: "周杰伦",   // 显示在搜索栏的搜索词
     loadcount: 20,  // 搜索结果一次加载多少条
+    method: "POST",     // 数据传输方式(POST/GET)
     defaultlist: 3,    // 默认要显示的播放列表编号
     autoplay: false,    // 是否自动播放(true/false) *在手机端可能无法自动播放
     coverbg: true,      // 是否开启封面背景(true/false) *开启后会有些卡
-    dotshine: false,    // 是否开启播放进度条的小点闪动效果[不支持IE](true/false) *开启后会有些卡
+    dotshine: true,    // 是否开启播放进度条的小点闪动效果[不支持IE](true/false) *开启后会有些卡
     volume: 0.6,        // 默认音量值(0~1之间)
-    version: 'v2.2',    // 播放器当前版本号(仅供调试)
+    version: "v2.21",    // 播放器当前版本号(仅供调试)
     debug: false   // 是否开启调试模式(true/false)
 };
 
@@ -213,8 +214,7 @@ function play(music) {
     $('audio').remove();    // 移除之前的audio
     
     var newaudio = $('<audio><source src="'+ music.mp3Url +'"></audio>').appendTo('body');
-    // 以下这种方式在 IE9 下无效...
+    
-    // var newaudio = $('<audio>').html('<source src="'+ music.mp3Url +'">').appendTo('body');
     rem.audio = newaudio[0];
     // 应用初始音量
     rem.audio.volume = volume_bar.percent;
@@ -225,10 +225,30 @@ function play(music) {
     rem.audio.addEventListener('ended', nextMusic);   // 播放结束
     rem.audio.addEventListener('error', audioErr);   // 播放器错误处理
     
+    // $("#player").bind("ended", function () {
+    
+    // });
+    
     rem.audio.play();
+    
+    // 设置 5s 后为歌曲超时，自动切换下一首
+    window.setTimeout("delayCheck()", 5000);
+    
     music_bar.lock(false);  // 取消进度条锁定
 }
 
+// 歌曲播放超时检测
+function delayCheck() {
+    if(isNaN(rem.audio.duration) || rem.audio.duration === undefined || rem.audio.duration ===0) {
+        audioErr();
+    } else {
+        // 调试信息输出
+        if(mkPlayer.debug) {
+            console.log('超时检测 - 歌曲播放正常');
+        }
+    }
+}
+
 // 我的要求并不高，保留这一句版权信息可好？
 // 保留了，你不会损失什么；而保留版权，是对作者最大的尊重。
 console.info('欢迎使用 MKOnlinePlayer!\n当前版本：'+mkPlayer.version+' \n作者：mengkun(http://mkblog.cn)\n歌曲来源于：网易云音乐(http://music.163.com/)\nGithub：https://github.com/mengkunsoft/MKOnlineMusicPlayer');