🐛fix bugs

修复 IE 下播放键错位的 BUG 修改默认背景为黑色其它一些细节优化
6 years ago · 8f69ff5983
parent 6fc03396ad
commit 8f69ff5983
5 changed files with 74 additions and 86 deletions
--- a/README.MD
+++ b/README.MD
@ -1,4 +1,4 @@
-MKOnlineMusicPlayer v2.32
+MKOnlineMusicPlayer
 ========
 MKOnlineMusicPlayer 是一款开源的基于 `Meting` 的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人网易云音乐播放列表同步等功能。

@ -30,7 +30,7 @@ php 5.4+, curl_exec, file_get_contents, json_decode, openssl_encrypt
 本播放器设计支持 IE9及以上的现代浏览器。并且已在 Chrome、firefox、IE11 等浏览器测试使用正常。

 #### 版权
-本播放器由 [mengkun(http://mkblog.cn)](http://mkblog.cn) 开发，您可以随意修改、使用、转载。使用或转载时`请务必保留出处`，抱拳了各位老铁们！
+本播放器由 [mengkun(https://mkblog.cn)](https://mkblog.cn) 开发，您可以随意修改、使用、转载。使用或转载时`请务必保留出处`，抱拳了各位老铁们！

 #### 歌曲
 播放器中的歌曲来自各大音乐平台，歌曲版权归各大平台享有。请支持正版音乐。
@ -41,32 +41,14 @@ php 5.4+, curl_exec, file_get_contents, json_decode, openssl_encrypt

 ### 常见问题
 -----
-**网易云音乐源播放失效，歌曲列表只剩一首歌**
-
-解决办法参考 [网易云音乐问题](https://github.com/mengkunsoft/MKOnlineMusicPlayer/wiki/%E7%BD%91%E6%98%93%E4%BA%91%E9%9F%B3%E4%B9%90%E9%97%AE%E9%A2%98)
-
-**歌单读取失败 - 404**
-
-本程序需要上传至网站空间(服务器)使用，不支持在本地打开
-
-
-**歌单读取失败 - 200**
-
-请确保你的服务器支持 PHP ，并且 PHP 版本 >= 5.4
-
-
-**歌单页封面显示不出来**
-
-请打开 `api.php`，将第十行的 `define('HTTPS', true);` 修改为 `define('HTTPS', false);`
-
-**更多常见问题**
-
 [请前往 wiki 查阅](https://github.com/mengkunsoft/MKOnlineMusicPlayer/wiki)
+`遇到问题请详细阅读以上 wiki，已经进行解答的问题将不再回复！`

-### 待解决的问题
+### 开发计划
 -----
 - 歌曲音质切换功能
 - IOS 歌曲播放问题
+- 美化歌曲搜索框

 ### 打赏
 -----
@ -77,6 +59,11 @@ php 5.4+, curl_exec, file_get_contents, json_decode, openssl_encrypt

 ### 更新日志
 -----
+#### v2.41 `2018/3/13`
+- 修复 IE 下播放键错位的 BUG
+- 修改默认背景为黑色
+- 其它一些细节优化
+
 #### v2.4 `2018/3/11`
 - 修复网易云音乐无法播放
 - 增加标题栏滚动效果(感谢@lzcykevin)
--- a/api.php
+++ b/api.php
@ -59,11 +59,6 @@ switch(getParam('types'))   // 根据请求的 Api，执行相应操作
        
        $data = $API->url($id);
        
-        if($source == 'netease' && json_decode($data, true)['url'] == '') {    // 修复网易云链接获取失效（双保险）
-            echojson('{"url":"https://music.163.com/song/media/outer/url?id='.$id.'.mp3","br":320}');
-            return;
-        }
-        
        echojson($data);
        break;
        
--- a/css/player.css
+++ b/css/player.css
@ -1,9 +1,9 @@
@charset "utf-8";
 /**************************************************
- * MKOnlinePlayer v2.3
+ * MKOnlinePlayer v2.41
 * 播放器样式表文件
- * 编写：mengkun(http://mkblog.cn)
- * 时间：2017-9-9
+ * 编写：mengkun(https://mkblog.cn)
+ * 时间：2018-3-13
 *************************************************/
 blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, input, lengend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
@ -67,15 +67,14 @@ html,body{
 body {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ba43a8+0,ea4fce+62,537bad+100&amp;0.38+0,0.17+61,0.8+100 */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYmE0M2E4IiBzdG9wLW9wYWNpdHk9IjAuMzgiLz4KICAgIDxzdG9wIG9mZnNldD0iNjElIiBzdG9wLWNvbG9yPSIjZTk0ZmNkIiBzdG9wLW9wYWNpdHk9IjAuMTciLz4KICAgIDxzdG9wIG9mZnNldD0iNjIlIiBzdG9wLWNvbG9yPSIjZWE0ZmNlIiBzdG9wLW9wYWNpdHk9IjAuMTkiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUzN2JhZCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
-    background: -moz-linear-gradient(-45deg,  rgba(186,67,168,0.38) 0%, rgba(233,79,205,0.17) 61%, rgba(234,79,206,0.19) 62%, rgba(83,123,173,0.8) 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(186,67,168,0.38)), color-stop(61%,rgba(233,79,205,0.17)), color-stop(62%,rgba(234,79,206,0.19)), color-stop(100%,rgba(83,123,173,0.8))); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(-45deg,  rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(-45deg,  rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(-45deg,  rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* IE10+ */
-    background: linear-gradient(135deg,  rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61ba43a8', endColorstr='#cc537bad',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
-
+    background: #000000;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7f7280', endColorstr='#000000');
+    background-image: -webkit-linear-gradient(200deg, #7f7280, #000000);
+    background-image: -moz-linear-gradient(200deg, #7f7280, #000000);
+    background-image: -o-linear-gradient(200deg, #7f7280, #000000);
+    background-image: -ms-linear-gradient(200deg, #7f7280, #000000);
+    background-image: linear-gradient(200deg, #7f7280, #000000);
+    
    overflow: hidden;
 }
 /* 模糊图像层 */
@ -187,6 +186,10 @@ body {
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
    display: inline-block;
    position: relative;
    border-radius: 2px;
@ -623,55 +626,51 @@ body {
    height: 100%;
    position: relative;
    margin: 0 10px;
-    display: flex;
-    align-items: center;
 }
 .con-btn a{
    display: inline-block;
-    /* position: absolute;
-    top: 50%; */
-    flex: 1;
+    position: absolute;
+    top: 50%; 
 }
 .btn-prev{
    background-position: 0 -30px;
    width: 19px;
    height: 20px;
-    /* margin-top: -10px; */
+    margin-top: -10px; 
 }

 .btn-play{
    width: 19px;
    height: 29px;
-    flex: 0 0 30px !important;
-    /* margin-top: -14.5px; */
-    left: 50%;
-    /* margin-left: -10.5px; */
+    margin-top: -14.5px; 
+    left: 36%;
+    margin-left: -10.5px; 
 }
 .btn-next{
    background-position: 0 -52px;
-    right: 0;
+    right: 30%;
    width: 19px;
    height: 20px;
-    /* margin-top: -10px; */
+    margin-top: -10px; 
 }
 .btn-order{
-    background-position: 0 -205px;
+    background-position: 0 -173px;
+    background-size: 450%;
    right: 0;
-    width: 19px;
+    width: 25px;
    height: 25px;
-    /* margin-top: -10px; */
+    margin-top: -10px; 
 }
 .btn-order-single {
-  background-position: 0 -231px;
-  height: 25px;
+    background-position: 0 -196px;
 }
 .btn-order-list {
-  background-position: 0 -204px;
-  height: 25px;
+    background-position: 0 -173px;
 }
 .btn-order-random {
-  background-position: 0 -73px;
-  height: 20px;
+    background-position: 0 -62px;
+    height: 18px;
+    margin-top: -9px;
 }

 /* 音乐进度条区域 */
@ -690,7 +689,7 @@ body {
    left: 10px;
    right: 0;
    top: 50%;
-    margin-top: -10px;
+    margin-top: -9px;
 }

 /* 音量控制区域 */
--- a/js/ajax.js
+++ b/js/ajax.js
@ -120,6 +120,18 @@ function ajaxUrl(music, callback)
                console.debug("歌曲链接：" + jsonData.url);
            }
            
+            // 解决网易云音乐部分歌曲无法播放问题
+            if(music.source == "netease") {
+                if(jsonData.url === "") {
+                    jsonData.url = "https://music.163.com/song/media/outer/url?id=" + music.id + ".mp3";
+                } else {
+                    jsonData.url = jsonData.url.replace(/m7c.music./g, "m7.music.");
+                    jsonData.url = jsonData.url.replace(/m8c.music./g, "m8.music.");
+                }
+            } else if(music.source == "baidu") {    // 解决百度音乐防盗链
+                jsonData.url = jsonData.url.replace(/http:\/\/zhangmenshiting.qianqian.com/g, "https://gss0.bdstatic.com/y0s1hSulBw92lNKgpU_Z2jR7b2w6buu");
+            }
+            
            if(jsonData.url === "") {
                music.url = "err";
            } else {
--- a/js/player.js
+++ b/js/player.js
@ -1,8 +1,8 @@
 /**************************************************
- * MKOnlinePlayer v2.4
+ * MKOnlinePlayer v2.41
 * 播放器主功能模块
 * 编写：mengkun(https://mkblog.cn)
- * 时间：2018-3-11
+ * 时间：2018-3-13
 *************************************************/
 // 播放器功能配置
 var mkPlayer = {
@ -16,7 +16,7 @@ var mkPlayer = {
    dotshine: true,    // 是否开启播放进度条的小点闪动效果[不支持IE](true/false) *开启后会有些卡
    mdotshine: false,   // 是否开启[移动端]播放进度条的小点闪动效果[不支持IE](true/false)
    volume: 0.6,        // 默认音量值(0~1之间)
-    version: "v2.4",    // 播放器当前版本号(仅供调试)
+    version: "v2.41",    // 播放器当前版本号(仅供调试)
    debug: false   // 是否开启调试模式(true/false)
 };

@ -68,26 +68,29 @@ function pause() {

 // 循环顺序
 function orderChange() {
-    if(!rem.order) rem.order = 2;
-    rem.order++;
-    if(rem.order > 3) rem.order = 1;
-    
    var orderDiv = $(".btn-order");
    orderDiv.removeClass();
    switch(rem.order) {
-        case 1:     // 单曲循环
-            orderDiv.addClass("player-btn btn-order btn-order-single");
-            orderDiv.attr("title","单曲循环");
+        case 1:     // 单曲循环 -> 列表循环
+            orderDiv.addClass("player-btn btn-order btn-order-list");
+            orderDiv.attr("title", "列表循环");
+            layer.msg("列表循环");
+            rem.order = 2;
            break;
            
-        case 3:     // 随机播放
-            orderDiv.addClass("player-btn btn-order btn-order-random");
-            orderDiv.attr("title","随机播放");
+        case 3:     // 随机播放 -> 单曲循环
+            orderDiv.addClass("player-btn btn-order btn-order-single");
+            orderDiv.attr("title", "单曲循环");
+            layer.msg("单曲循环");
+            rem.order = 1;
            break;
            
-        default:    // 顺序播放
-            orderDiv.addClass("player-btn btn-order btn-order-list");
-            orderDiv.attr("title","列表循环");
+        // case 2:
+        default:    // 列表循环(其它) -> 随机播放
+            orderDiv.addClass("player-btn btn-order btn-order-random");
+            orderDiv.attr("title", "随机播放");
+            layer.msg("随机播放");
+            rem.order = 3;
    }
 }

@ -317,14 +320,6 @@ function play(music) {
        refreshList();  // 更新列表显示
    }
    
-    // 解决网易云音乐部分歌曲无法播放问题
-    if(music.source == "netease") {
-        music.url = music.url.replace(/m7c.music./g, "m7.music.");
-        music.url = music.url.replace(/m8c.music./g, "m8.music.");
-    } else if(music.source == "baidu") {    // 解决百度音乐防盗链
-        music.url = music.url.replace(/http:\/\/zhangmenshiting.qianqian.com/g, "https://gss0.bdstatic.com/y0s1hSulBw92lNKgpU_Z2jR7b2w6buu");
-    }
-	
    try {
        rem.audio[0].pause();
        rem.audio.attr('src', music.url);