🐛 v2.32 修复历史歌曲播放失败问题

修复播放历史记录歌曲时播放失败的 BUG
 新增播放歌曲时浏览器标题栏显示相关信息
 一些细节的完善

README.MD

@@ -1,4 +1,4 @@
-MKOnlineMusicPlayer v2.31
+MKOnlineMusicPlayer v2.32
 ========
 MKOnlineMusicPlayer 是一款开源的基于 `Meting` 的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人网易云音乐播放列表同步等功能。
 
@@ -6,11 +6,11 @@ MKOnlineMusicPlayer 是一款开源的基于 `Meting` 的在线音乐播放器
 
 ### 界面欣赏
 -----
-![主界面(电脑端)](https://ws2.sinaimg.cn/large/006srDtYly1ffqxu72p2zj311y0hlqcl.jpg)
+![主界面(电脑端)](https://ws1.sinaimg.cn/large/a15b4afegy1fjkiif1v1uj211y0ho7ft.jpg)
 
-![播放列表界面(电脑端)](https://ws2.sinaimg.cn/large/006srDtYly1ffqxyzownkj311x0hiamq.jpg)
+![播放列表界面(电脑端)](https://ws1.sinaimg.cn/large/a15b4afegy1fjkige7cf3j211y0hqh0p.jpg)
 
-![歌曲搜索与播放](https://ws2.sinaimg.cn/large/006srDtYly1ffqxzlc2kkj311y0hjwqa.jpg)
+![歌曲搜索与播放](https://ws1.sinaimg.cn/large/a15b4afegy1fjkigwt7rkj211y0hm7de.jpg)
 
 
 ### 相关链接
@@ -26,18 +26,34 @@ MKOnlineMusicPlayer 是一款开源的基于 `Meting` 的在线音乐播放器
 #### 运行环境
 php 5.4+, curl_exec, file_get_contents, json_decode, openssl_encrypt
 
-#### 关于兼容性
+#### 兼容性
 本播放器设计支持 IE9及以上的现代浏览器。并且已在 Chrome、firefox、IE11 等浏览器测试使用正常。
 
-#### 关于版权
+#### 版权
 本播放器由 [mengkun(http://mkblog.cn)](http://mkblog.cn) 开发，您可以随意修改、使用、转载。使用或转载时`请务必保留出处`，抱拳了各位老铁们！
 
-#### 关于歌曲
+#### 歌曲
-播放器中的歌曲来自各大音乐平台，歌曲版权归各大平台享有。
+播放器中的歌曲来自各大音乐平台，歌曲版权归各大平台享有。请支持正版音乐。
 
 #### 其它
 作者很忙，非诚勿扰。欢迎提交 BUG 及好的建议，不欢迎一上来就问一些基础的东西及唠东唠西。
 
+### 常见问题
+-----
+**歌单读取失败 - 404**
+
+本程序需要上传至网站空间(服务器)使用，不支持在本地打开
+
+
+**歌单读取失败 - 200**
+
+请确保你的服务器支持 PHP ，并且 PHP 版本 >= 5.4
+
+
+**歌单页封面显示不出来**
+
+请打开 `api.php`，将第十行的 `define('HTTPS', true);` 修改为 `define('HTTPS', false);`
+
 ### 待解决的问题
 -----
 - 高音质音乐下载功能
@@ -53,6 +69,11 @@ php 5.4+, curl_exec, file_get_contents, json_decode, openssl_encrypt
 
 ### 更新日志
 -----
+#### v2.32 `2017/9/15`
+- 修复播放历史记录歌曲时播放失败的 BUG
+- 新增播放歌曲时浏览器标题栏显示相关信息
+- 一些细节的完善
+
 #### v2.31 `2017/9/13`
 - 优化下载功能，支持直接弹出下载
 - 下载或分享无版权音乐时给出提示
@@ -65,6 +86,7 @@ php 5.4+, curl_exec, file_get_contents, json_decode, openssl_encrypt
 - 移动端歌曲列表支持直接分享、下载歌曲
 - 降低内存占用，解决移动端背景特效卡顿问题
 - 新增对 https 的支持(酷狗、百度音乐源除外)
+- 新增运行环境自检功能
 - 优化中等屏幕下显示效果
 - 修复长歌词定位错乱的 BUG
 - 修复无法获取自定义专辑封面的 BUG
@@ -177,3 +199,12 @@ php 5.4+, curl_exec, file_get_contents, json_decode, openssl_encrypt
 - **Let's Kill IE6**：消灭IE [http://overtrue.me](http://overtrue.me)
 
 ##### 在开发过程中，还参照了很多开源 html 播放器的相关代码，在此一并向他们表示感谢！
+
+### 耻辱柱
+-----
+恭喜下列个人或单位永久入驻耻辱柱！
+
+#### 68喜论坛 [http://www.68xi.com/]
+原因：未经允许，删改版权信息(http://music.68xi.com/)，并发布到淘宝售卖(https://item.taobao.com/item.htm?id=547226809330)
+
+`奉劝某些“人”保留住做人的最基本底线，遵守开源协议，并引以为戒`

api.php

@@ -7,10 +7,15 @@
  * 特别感谢 @metowolf 提供的 Meting.php
  *************************************************/
 
-define('HTTPS', true);    // 如果您的网站启用了https，请将此项置为“true”
+define('HTTPS', true);    // 如果您的网站启用了https，请将此项置为“true”，如果你的网站未启用 https，建议将此项设置为“false”
 define('DEBUG', false);      // 是否开启调试模式，正常使用时请将此项置为“false”
 
+/*
+ 如果遇到程序不能正常运行，请开启调试模式，然后访问 http://你的网站/音乐播放器地址/api.php ，进入服务器运行环境检测。
+ 此外，开启调试模式后，程序将输出详细的运行错误信息，方便定位错误原因。
  
+ 因为调试模式下程序会输出服务器环境信息，为了您的服务器安全，正常使用时请务必关闭调试。
+*/
 
 
 

index.html

@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
     <meta name="renderer" content="webkit">
+    <meta name="author" content="mengkun">
+    <meta name="generator" content="KodCloud">
     <meta http-equiv="Cache-Control" content="no-siteapp">
     
     <!-- 强制移动设备以app模式打开页面(即在移动设备下全屏，仅支持部分浏览器) -->
@@ -49,7 +51,7 @@
 
 <!-- 头部logo -->
 <div class="header">
-    <div class="logo" title="Version 2.3; Based on Meting; Powered by Mengkun">
+    <div class="logo" title="Version 2.32; Based on Meting; Powered by Mengkun">
         ♫ MKOnlinePlayer
     </div>
 </div>  <!--class="header"-->

js/functions.js

@@ -1,8 +1,8 @@
 /**************************************************
- * MKOnlinePlayer v2.31
+ * MKOnlinePlayer v2.32
  * 封装函数及UI交互模块
  * 编写：mengkun(http://mkblog.cn)
- * 时间：2017-9-12
+ * 时间：2017-9-15
  *************************************************/
 // 判断是否是移动设备
 var isMobile = {  
@@ -29,6 +29,7 @@ $(function(){
     }
     
     rem.isMobile = isMobile.any();
+    rem.webTitle = document.title;      // 记录页面原本的标题
     
     initProgress();     // 初始化音量条、进度条（进度条初始化要在 Audio 前，别问我为什么……）
     initAudio();    // 初始化 audio 标签，事件绑定
@@ -304,7 +305,8 @@ function musicInfo(list, index) {
         'pic_id: "' + music.pic_id + '",\n' + 
         'lyric_id: "' + music.lyric_id + '",\n' + 
         'pic: "' + music.pic + '",\n' +
-        'url: "' + music.url + '"');
+        'url: ""');
+        // 'url: "' + music.url + '"');
     }
 }
 
@@ -411,11 +413,8 @@ function ajaxShare(music) {
     }
     
     var tmpHtml = '<p>' + music.artist + ' - ' + music.name + ' 的外链地址为：</p>' + 
-    '<input class="share-url" onmouseover="this.focus();this.select()" value="' + music.url + '">';
+    '<input class="share-url" onmouseover="this.focus();this.select()" value="' + music.url + '">' + 
-    
+    '<p class="share-tips">* 获取到的音乐外链有效期较短，请按需使用。</p>';
-    if(music.source != "netease") {
-        tmpHtml += '<p class="share-tips">* 当前音乐源歌曲链接有效期较短，不建议作外链使用</p>'
-    }
     
     layer.open({
         title: '歌曲外链分享'
@@ -427,22 +426,17 @@ function ajaxShare(music) {
 // 新的图像地址
 function changeCover(music) {
     var img = music.pic;    // 获取歌曲封面
+    var animate = false,imgload = false;
     
     if(!img) {  // 封面为空
         ajaxPic(music, changeCover);    // 获取歌曲封面图
         img == "err";    // 暂时用无图像占个位...
     }
     
-    if(img == "err") img = "images/player_cover.png";
+    if(img == "err") {
-    
+        img = "images/player_cover.png";
-    var animate = false,imgload = false;
+    } else {
-    
+        if(mkPlayer.mcoverbg === true && rem.isMobile)      // 移动端封面
-    $("#music-cover").attr("src", img);     // 改变右侧封面
-    $(".sheet-item[data-no='1'] .sheet-cover").attr('src', img);    // 改变正在播放列表的图像
-    
-    if(img == "err") img = "";  // 背景为空
-    
-    if(mkPlayer.mcoverbg === true && rem.isMobile && img)      // 移动端封面
         {    
             $("#music-cover").load(function(){
                 $("#mobile-blur").css('background-image', 'url("' + img + '")');
@@ -472,6 +466,10 @@ function changeCover(music) {
         }
     }
     
+    $("#music-cover").attr("src", img);     // 改变右侧封面
+    $(".sheet-item[data-no='1'] .sheet-cover").attr('src', img);    // 改变正在播放列表的图像
+}
+
 
 // 向列表中载入某个播放列表
 function loadList(list) {
@@ -499,32 +497,35 @@ function loadList(list) {
     
     rem.mainList.html('');   // 清空列表中原有的元素
     addListhead();      // 向列表中加入列表头
+    
+    if(musicList[list].item.length == 0) {
+        addListbar("nodata");   // 列表中没有数据
+    } else {
+        
         // 逐项添加数据
         for(var i=0; i<musicList[list].item.length; i++) {
             var tmpMusic = musicList[list].item[i];
             
             addItem(i + 1, tmpMusic.name, tmpMusic.artist, tmpMusic.album);
             
-        // 只有网易云的歌曲进行链接记录(其它音乐链接均有有效期限制,重新显示列表时清空处理)
+            // 音乐链接均有有效期限制,重新显示列表时清空处理
-        if(tmpMusic.source != "netease") tmpMusic.url = "";
+            if(list == 1 || list == 2) tmpMusic.url = "";
         }
-    if(i == 0) {
+        
-        addListbar("nodata");   // 列表中没有数据
+        // 列表加载完成后的处理
-    } else {
         if(list == 1 || list == 2) {    // 历史记录和正在播放列表允许清空
             addListbar("clear");    // 清空列表
         }
         
-        if(rem.playlist === undefined) {
+        if(rem.playlist === undefined) {    // 未曾播放过
-            // 未曾播放过
             if(mkPlayer.autoplay == true) pause();  // 设置了自动播放，则自动播放
         } else {
             refreshList();  // 刷新列表，添加正在播放样式
         }
-    }
         
         listToTop();    // 播放列表滚动到顶部
     }
+}
 
 // 播放列表滚动到顶部
 function listToTop() {
@@ -650,7 +651,7 @@ function refreshList() {
               (musicList[rem.dislist].item[i].id == musicList[1].item[rem.playid].id) && 
               (musicList[rem.dislist].item[i].source == musicList[1].item[rem.playid].source)) {
                 $(".list-item[data-no='" + i + "']").addClass("list-playing");  // 添加正在播放样式
-                // $(".list-item:eq(" + (i + 1) + ")").addClass("list-playing");  // 添加正在播放样式
+                
                 return true;    // 一般列表中只有一首，找到了赶紧跳出
             }
         }
@@ -770,16 +771,16 @@ function initList() {
             // 读取正在播放列表
             var tmp_item = playerReaddata('playing');
             if(tmp_item) {  // 读取到了正在播放列表
-                musicList[i].item = tmp_item;
+                musicList[1].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;
+            if(tmp_item) {
+                musicList[2].item = tmp_item;
+            }
             
          // 列表不是用户列表，并且信息为空，需要ajax读取列表
         }else if(!musicList[i].creatorID && (musicList[i].item == undefined || (i>2 && musicList[i].item.length == 0))) {   

js/musicList.js

@@ -1,8 +1,8 @@
 /**************************************************
- * MKOnlinePlayer v2.3
+ * MKOnlinePlayer v2.32
  * 播放列表配置模块
  * 编写：mengkun(http://mkblog.cn)
- * 时间：2017-9-1
+ * 时间：2017-9-15
  *************************************************/
 // 建议修改前先备份一下
 // 获取 歌曲的网易云音乐ID 或 网易云歌单ID 的方法：
@@ -60,7 +60,7 @@ var musicList = [
     },
     // 自定义列表教程开始！
     // 方式一：手动创建列表并添加歌曲信息
-    // 温馨提示：腾讯、酷狗、百度音乐源的外链有效期较短，因此 url 值应该设置为空，以让程序临时抓取
+    // 温馨提示：各大音乐平台获取到的外链有效期均较短，因此 url 值应该设置为空，以让程序临时抓取
     {
         name: "自定义列表",   // 播放列表名字
         cover: "https://p3.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg", // 播放列表封面图像
@@ -77,7 +77,7 @@ var musicList = [
                 pic_id: "2946691234868155",  // 封面ID
                 lyric_id: "436514312",  // 歌词ID
                 pic: "https://p3.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg",    // 专辑图片
-                url: "https://p2.music.126.net/7o5D4dA6271VktgawcbZFA==/18665309393829604.mp3"   // mp3链接（此项建议不填，因为各大音乐平台的外链有效期都较短……）
+                url: ""   // mp3链接（此项建议不填，除非你有该歌曲的比较稳定的外链）
             },
             // 下面演示插入各个平台的音乐。。。
             {
@@ -90,7 +90,7 @@ var musicList = [
                 pic_id: "18782957139233959",
                 lyric_id: "65528",
                 pic: "https://p3.music.126.net/BFuOepLmD63tY75UJs1c0Q==/18872017579169120.jpg",
-                url: "https://p2.music.126.net/cMlOV_XZceHNLA1GpvkyLQ==/7990151000576820.mp3"
+                url: ""
             },
             {
                 id: "001JD1SR29d1hS",

js/player.js

@@ -1,8 +1,8 @@
 /**************************************************
- * MKOnlinePlayer v2.31
+ * MKOnlinePlayer v2.32
  * 播放器主功能模块
  * 编写：mengkun(http://mkblog.cn)
- * 时间：2017-9-12
+ * 时间：2017-9-15
  *************************************************/
 // 播放器功能配置
 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.31",    // 播放器当前版本号(仅供调试)
+    version: "v2.32",    // 播放器当前版本号(仅供调试)
     debug: false   // 是否开启调试模式(true/false)
 };
 
@@ -69,6 +69,9 @@ function audioPlay() {
     if((mkPlayer.dotshine === true && !rem.isMobile) || (mkPlayer.mdotshine === true && rem.isMobile)) {
         $("#music-progress .mkpgb-dot").addClass("dot-move");   // 小点闪烁效果
     }
+    
+    var music = musicList[rem.playlist].item[rem.playid];   // 获取当前播放的歌曲信息
+    document.title = music.name + " - " + music.artist + " | " + rem.webTitle;  // 改变浏览器标题
 }
 
 // 暂停
@@ -80,6 +83,8 @@ function audioPause() {
     $(".btn-play").removeClass("btn-state-paused");     // 取消暂停
     
     $("#music-progress .dot-move").removeClass("dot-move");   // 小点闪烁效果
+    
+    document.title = rem.webTitle;    // 改变浏览器标题
 }
 
 // 播放上一首歌