jinql
/
MKOnlineMusicPlayer
1
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

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

修复播放历史记录歌曲时播放失败的 BUG
 新增播放歌曲时浏览器标题栏显示相关信息
 一些细节的完善
pull/13/head
mengkun 2017-09-15 21:16:09 +08:00
parent da9b0388d1
commit 1c47eb4cb6
6 changed files with 124 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
README.MD
View File

@ -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)
`奉劝某些“人”保留住做人的最基本底线，遵守开源协议，并引以为戒`

9
api.php
View File

@ -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 ，进入服务器运行环境检测。
此外，开启调试模式后，程序将输出详细的运行错误信息，方便定位错误原因。
因为调试模式下程序会输出服务器环境信息，为了您的服务器安全，正常使用时请务必关闭调试。
*/

4
index.html
View File

@ -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"-->

123
js/functions.js
View File

@ -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 + '">';
if(music.source != "netease") {
tmpHtml += '<p class="share-tips">* 当前音乐源歌曲链接有效期较短，不建议作外链使用</p>'
}
'<input class="share-url" onmouseover="this.focus();this.select()" value="' + music.url + '">' +
'<p class="share-tips">* 获取到的音乐外链有效期较短，请按需使用。</p>';
layer.open({
title: '歌曲外链分享'
@ -427,49 +426,48 @@ 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";
var animate = false,imgload = false;
if(img == "err") {
img = "images/player_cover.png";
} else {
if(mkPlayer.mcoverbg === true && rem.isMobile) // 移动端封面
{
$("#music-cover").load(function(){
$("#mobile-blur").css('background-image', 'url("' + img + '")');
});
}
else if(mkPlayer.coverbg === true && !rem.isMobile) // PC端封面
{
$("#music-cover").load(function(){
if(animate) { // 渐变动画也已完成
$("#blur-img").backgroundBlur(img); // 替换图像并淡出
$("#blur-img").animate({opacity:"1"}, 2000); // 背景更换特效
} else {
imgload = true; // 告诉下面的函数，图片已准备好
}
});
// 渐变动画
$("#blur-img").animate({opacity: "0.2"}, 1000, function(){
if(imgload) { // 如果图片已经加载好了
$("#blur-img").backgroundBlur(img); // 替换图像并淡出
$("#blur-img").animate({opacity:"1"}, 2000); // 背景更换特效
} else {
animate = true; // 等待图像加载完
}
});
}
}
$("#music-cover").attr("src", img); // 改变右侧封面
$(".sheet-item[data-no='1'] .sheet-cover").attr('src', img); // 改变正在播放列表的图像
if(img == "err") img = ""; // 背景为空
if(mkPlayer.mcoverbg === true && rem.isMobile && img) // 移动端封面
{
$("#music-cover").load(function(){
$("#mobile-blur").css('background-image', 'url("' + img + '")');
});
}
else if(mkPlayer.coverbg === true && !rem.isMobile) // PC端封面
{
$("#music-cover").load(function(){
if(animate) { // 渐变动画也已完成
$("#blur-img").backgroundBlur(img); // 替换图像并淡出
$("#blur-img").animate({opacity:"1"}, 2000); // 背景更换特效
} else {
imgload = true; // 告诉下面的函数，图片已准备好
}
});
// 渐变动画
$("#blur-img").animate({opacity: "0.2"}, 1000, function(){
if(imgload) { // 如果图片已经加载好了
$("#blur-img").backgroundBlur(img); // 替换图像并淡出
$("#blur-img").animate({opacity:"1"}, 2000); // 背景更换特效
} else {
animate = true; // 等待图像加载完
}
});
}
}
@ -499,31 +497,34 @@ function loadList(list) {
rem.mainList.html(''); // 清空列表中原有的元素
addListhead(); // 向列表中加入列表头
// 逐项添加数据
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(i == 0) {
if(musicList[list].item.length == 0) {
addListbar("nodata"); // 列表中没有数据
} else {
// 逐项添加数据
for(var i=0; i<musicList[list].item.length; i++) {
var tmpMusic = musicList[list].item[i];
addItem(i + 1, tmpMusic.name, tmpMusic.artist, tmpMusic.album);
// 音乐链接均有有效期限制,重新显示列表时清空处理
if(list == 1 || list == 2) tmpMusic.url = "";
}
// 列表加载完成后的处理
if(list == 1 || list == 2) { // 历史记录和正在播放列表允许清空
addListbar("clear"); // 清空列表
}
if(rem.playlist === undefined) {
// 未曾播放过
if(rem.playlist === undefined) { // 未曾播放过
if(mkPlayer.autoplay == true) pause(); // 设置了自动播放，则自动播放
} else {
refreshList(); // 刷新列表，添加正在播放样式
}
listToTop(); // 播放列表滚动到顶部
}
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))) {

10
js/musicList.js
View File

@ -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",

11
js/player.js
View File

@ -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; // 改变浏览器标题
}
// 播放上一首歌