MKOnlineMusicPlayer v2.0 发布 & v2.2更新

温馨提示

MKOnlinePlayer v2.3 已经发布，新帖地址：https://mkblog.cn/1060/

本文仅用作存档，不再更新内容

前前后后历时近四个月，源代码历经无数次推翻重写。到写下这行标题时，如释重负！

是的，MKOnlineMusicPlayer V2.0 终于诞生了！

关于 MKOnlineMusicPlayer 的前世，请阅读 https://mkblog.cn/203/

简介

MKOnlineMusicPlayer 是一款开源的基于网易云音乐api的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人音乐播放列表同步等功能。

前端界面参照 QQ 音乐网页版进行布局，同时采用了流行的响应式设计，无论是在PC端还是在手机端，均能给您带来原生 app 般的使用体验。

界面欣赏

主界面（电脑端）

歌单界面（电脑端）

音乐搜索

手机端播放界面

手机端歌单界面

更新日志

v2.2 2017/3/26

用户歌单获取时新增加载中动画及遮罩，防止重复加载
修复中等屏幕下鼠标滑过tab边框消失的bug
修复某些情况下第一句歌词无法渲染的bug
修复在IE9下音乐无法播放的bug
更换背景展现方式，整体界面更美观
正在播放和播放历史列表支持一键清空
新增图片加载失败时替换处理
新增小屏幕下为当前显示的tab添加下划线
新增favicon小图标
新增歌曲播放时进度条小点闪烁效果
优化后台数据获取失败时弹出提示
其它的一些细节优化

v2.1 2017/3/20

紧急修复部分浏览器下切换歌曲造成无限播放失败循环的 BUG
新增点击未加载完的播放列表弹出提示
新增搜索时弹出加载中动画
切换歌曲后进度条自动复位
优化歌曲外链显示方式，方便复制
优化封面图像加载大小
新增无歌词、歌词加载中提示
优化歌词展现方式

v2.0 Beta 2017/3/18

所有代码均推翻重写，前端界面全新改版
完善对手机端的适配，新支持 IE9~IE11 浏览器
修复 IE11 下点击下载歌曲名字乱码的BUG
新增“正在播放”、“播放历史”列表功能
新增后台自定义播放列表功能，支持多种列表定义模式
新增本地记录用户设置及播放列表功能
进度条支持响应点击事件

注意事项

关于API文件

由于网易云音乐官方封锁了国外的访问，因此本播放器的 api.php 在海外的空间上可能无法运行(其实有个“你懂的”的功能，请自行挖掘)，建议在国内空间使用。

关于兼容性

本播放器设计支持 IE9及以上的现代浏览器。并且已在 Chrome、firefox、IE11 等浏览器测试使用正常。

关于版权

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

关于歌曲

播放器中采用了网易云音乐(http://music.163.com/) 的 api，因此相对应的歌曲版权归网易云音乐所有。支持正版音乐，请使用官方版网易云。

其它

作者很忙，非诚勿扰。欢迎提交 BUG 及好的建议，不欢迎一上来就问一些基础的东西及唠东唠西。

项目地址

在线演示：http://lab.mkblog.cn/music/

详细介绍：https://mkblog.cn/757/

GitHub：https://github.com/mengkunsoft/MKOnlineMusicPlayer

百度网盘：http://pan.baidu.com/s/1gfkbAef

再次强调：转载或使用请保留版权和来源信息，谢谢！

本文作者为mengkun，转载请注明。

html 原创

发表评论取消回复

青找 Lv 1

这个是你的吗？https://www.17sucai.com/pins/26793.html

#114 2019-09-17 15:28 回复
男人不可以穷 Lv 2

播放器新增网易云热评
[aru_3]由于mengkun暂停了更新，V3.0版本由我来出[aru_19]，
最大更新点：增加了网易云评论[aru_53]
不好的地方大佬们勿喷啊[aru_63]

没错mengkun大佬的主题被我仿走了[aru_53]
告辞[aru_63]

#113 2019-03-27 15:54 回复
- mengkun 站长
  
  @男人不可以穷自己动手，丰衣足食[aru_53][aru_53][aru_53]
  
  2019-03-27 17:46 回复
  - 男人不可以穷 Lv 2
    
    @mengkunjquery经常会报这个错
    AbortError: The fetching process for the media resource was aborted by the user agent at the user's request.[aru_59]
    
    2019-03-28 08:57 回复
- xiaoj Lv 1
  
  @男人不可以穷兄弟，能发一下源码的地址吗？
  
  2019-08-18 21:49 回复
- xiaoj Lv 1
  
  @男人不可以穷坤哥的那个版本QQ音乐很多已经播放不了了
  
  2019-08-18 21:51 回复
千纸鹤 Lv 1

博主您好，请问你文章右边那个目录导航怎么制作的呀

#112 2018-12-23 18:53 回复
7qin Lv 1

老湘，点击正在播放会回到列表最上面，不应该是显示当播放到，不知算不算BUG

#111 2018-09-03 08:47 回复
Dream Lv 1

博主您好，这个如果被播放次数多了后，会不会被封掉，里面的key 会更新吗，如果key失效了，那就无法播放了？

#110 2018-05-24 16:25 回复
- mengkun 站长
  
  @Dream目前没有遇到被封的情况
  
  2018-05-24 21:00 回复
醉酒人生 Lv 1

没有后台管理界面吗？不能够后台上传吗？

#109 2018-03-11 21:00 回复
akou550 Lv 1

能帮我看下怎么我的列表只有第一首歌谢谢

#108 2018-02-01 20:16 回复
筱宸 Lv 1

http://www.sucaihuo.com/php/3378.html.................这个网址的播放器说是自己的原创，，不能忍

#107 2018-01-10 14:52 回复
- 风灵 Lv 1
  
  @筱宸对，而且还收费，我就是拿来学习在这个上面看到的，结果买了之后才发现这是个开源的项目
  
  2019-02-20 14:56 回复
pccrain Lv 1

谁知道一直歌单获取失败-500是什么意思0 0 搜索也会-500 查看图片

#106 2017-12-27 13:11 回复
- 风灵 Lv 1
  
  @pccrain我也是，新手求大佬解答
  
  2019-02-20 14:57 回复
久绊 Lv 1

为什么点下载歌曲，就跳转到一个新的界面

#105 2017-11-03 19:37 回复
Chiahong Lv 1

非常喜歡您的作品，請問可以讓我將介面繁體化嗎？
會保留您的版權資訊，請放心！

#104 2017-09-12 22:34 回复
- mengkun 站长
  
  @Chiahong沒問題
  
  2017-09-12 23:05 回复
Kinghunki Lv 2

前几天还正常的，这两天不能加载列表，也不能播放！不知道什么原因

#103 2017-09-09 19:26 回复
- Kinghunki Lv 2
  
  @Kinghunkihttp://ys.xtfen.com/music/music.html 这是我页面！
  
  2017-09-09 19:40 回复
  - mengkun 站长
    
    @Kinghunki"Failed to connect to music.163.com port 80: Connection timed out"，无法连接至网易云的服务器……
    
    2017-09-09 19:42 回复
  - Kinghunki Lv 2
    
    @mengkun老大，这个情况怎么解决？
    
    2017-09-09 19:43 回复
  - mengkun 站长
    
    @Kinghunki不知道……
    
    2017-09-09 19:46 回复
  - Kinghunki Lv 2
    
    @mengkun哦，我看你的演示站点是正常的！
    
    2017-09-09 19:47 回复
  - Kinghunki Lv 2
    
    @mengkun原来是服务器问题，换了一台就正常了！多谢！
    
    2017-09-09 20:05 回复
ddd Lv 1

http://mp4ba.ayun.pw/music/ 为何歌单里部分音乐可以，部分不可以？

#102 2017-09-09 15:25 回复
新手 Lv 1

www.xn--tiejia-hk0s.top/music/ 不行啦这要怎么搞！博主！博主！博主！等你！

#101 2017-09-08 01:45 回复
- mengkun 站长
  
  @新手api文件返回 500 错误。不支持你的空间
  
  2017-09-08 18:23 回复
  - Zero Lv 1
    
    @mengkun这里的不支持是指php环境还是服务器ip，我用的 vps 一直是500提示，在服务器上 wget 是能够返回数据的，和本地返回的一样，所以应该不是 ip 问题。
    
    2018-02-08 18:12 回复
- 云起 Lv 1
  
  @新手你解决了吗？请问是什么问题？
  
  2018-10-19 18:48 回复
骚包 Lv 1

BUG反馈：直接在列表点播放按钮第一首播放器播放按钮会变化，再从列表播放另一首就会没变化一直未播放状态，而且还不可以点击状态。博主网站的也是同样问题。火狐浏览器

#100 2017-09-03 17:32 回复
- mengkun 站长
  
  @骚包测试了一下，没有复现这个问题……
  
  2017-09-03 21:28 回复
  - 骚包 Lv 1
    
    @mengkun[reply]评论可见的内容[/reply]电脑上用火狐浏览器测试下，真的存在切歌播放按钮停在未播放的状态，但是歌曲却在播放。
    专门录了个视频给来让博主看下，博主看完删除我的视频链接吧不想泄露地址。
    [地址已隐藏]
    
    2017-09-04 03:57 回复
  - mengkun 站长
    
    @骚包非常感谢！已收到。待会再测试一下
    
    2017-09-04 12:11 回复
  - 骚包 Lv 1
    
    @mengkun其实博主可以做成百度电台那样不显示列表的播放器，本来就是解析的列表还会很卡，又不好兼容。
    也可以做成中间一个大光碟专辑封面旋转形式，下边放上上一曲下一曲和暂停播放按钮。侧面加个类似百度电台形式的切换电台类型。
    
    2017-09-04 14:23 回复
  - mengkun 站长
    
    @骚包样式还是等到 4.x 的时候再改吧(如果有的话)，计划是一个大版本一个新的样式 [wb_二哈]
    
    2017-09-04 21:03 回复
  - mengkun 站长
    
    @骚包v2.3版(暂未发布)已解决。预览地址：http://lab.mkblog.cn/music_new/
    之前没有发现这个问题是因为……我的 Firefox 版本太低了 [衰]
    
    2017-09-04 17:30 回复
骚包 Lv 1

我只想说博主真是太厉害了。爱你！

#99 2017-09-03 15:36 回复
天 Lv 1

对接的是网易云的曲库，曲库不算很全，麦葱的对接曲库更全，但是页面完全没法和你比，希望你能把曲库做多一点，对接QQ音乐，虾米音乐等等

#98 2017-08-29 03:01 回复
梦 Lv 1

默认歌单ID可以分享下吗,挺喜欢那里面的歌

#97 2017-08-26 14:22 回复
- mengkun 站长
  
  @梦http://music.163.com/#/playlist?id=440103454
  
  2017-08-26 15:56 回复
  - wm88990 Lv 1
    
    @mengkun默认的歌单在哪里可以修改替换
    
    2018-01-26 15:40 回复
  - wm88990 Lv 1
    
    @wm88990找到了，在musicList.js这个js里面搜到了关键字
    
    2018-01-26 15:49 回复
在线听歌房源码 – MKOnlineMusicPlayer V2.21 – 阿帕博客 Pingback

[…] 原文地址：http://mkblog.cn/757/ […]

2017-08-22 09:04 回复
浩伟 Lv 1

请问怎么设置自动播放下一曲呢？

#96 2017-08-19 14:30 回复
晓天 Lv 1

手机打开，没有下载功能吗？

#95 2017-08-17 19:54 回复
- mengkun 站长
  
  @晓天下载功能在歌词的右下角
  
  2017-08-17 21:58 回复
铭哥网络 Lv 2

mk大佬，什么时候更新2.3版本呢，期待，也期待换模板

#94 2017-08-11 00:02 回复
歌单读取失败 - 200 Lv 1

最新版歌单读取失败 - 200 怎么回事接口是正常返回数据了呀

#93 2017-08-08 17:52 回复
有本事点我 Lv 1

感谢分享。多来点源码，hhh

#92 2017-08-05 09:33 回复
皮皮豪 Lv 1

请问为什么会获取歌单失败-200，用的是v2.21

#91 2017-08-05 00:27 回复
- mengkun 站长
  
  @皮皮豪你的 PHP 版本是不是低于 5.4？
  
  请删掉 api.php 中第 11 行的“use Metowolf\Meting;”
  以及“plugns/Meting.php”中第 10 行的“namespace Metowolf;” 试试
  
  2017-08-05 08:53 回复
  - 皮皮豪 Lv 1
    
    @mengkun删掉了还是不行
    我的空间脚本支持语言：html、PHP 5.2/5.3/5.4/5.5、Perl 5、WAP
    
    2017-08-05 15:32 回复
  - 获取歌单失败-200 Lv 1
    
    @mengkun的确是php版本过低，你提供的方法无法解决问题我设置为php5.4或者php5.5正常了有解决方法吗我其他站用的php5.3
    
    2017-08-08 18:10 回复
  - mengkun 站长
    
    @获取歌单失败-200在 api.php 的 <? 后面加上 error_reporting(0); 屏蔽掉所有的警告信息试试……
    
    2017-08-08 18:35 回复
  - 念 Lv 2
    
    @获取歌单失败-200php5.3连接你php5.4或者php5.5的API.php试试
    
    2017-08-31 11:15 回复
wiupan Lv 1

这个很厉害

#90 2017-08-01 23:00 回复
墨闫 Lv 1

希望作者可以添加一个左右滑动。这样好方便切换

#89 2017-07-31 11:05 回复