前前后后历时近四个月,源代码历经无数次推翻重写。到写下这行标题时,如释重负!
是的,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/
GitHub:https://github.com/mengkunsoft/MKOnlineMusicPlayer
百度网盘:http://pan.baidu.com/s/1gfkbAef
再次强调:转载或使用请保留版权和来源信息,谢谢!
本文作者为mengkun,转载请注明。
可惜了,现在好多链接都不能听了但是还在用
这个是你的吗?https://www.17sucai.com/pins/26793.html
播放器新增网易云热评
[aru_3]由于mengkun暂停了更新,V3.0版本由我来出[aru_19],
最大更新点:增加了网易云评论[aru_53]
不好的地方大佬们勿喷啊[aru_63]
没错mengkun大佬的主题被我仿走了[aru_53]
告辞[aru_63]
@男人不可以穷自己动手,丰衣足食[aru_53][aru_53][aru_53]
@mengkunjquery经常会报这个错
AbortError: The fetching process for the media resource was aborted by the user agent at the user's request.[aru_59]
@男人不可以穷兄弟,能发一下源码的地址吗?
@男人不可以穷坤哥的那个版本QQ音乐很多已经播放不了了
博主您好,请问你文章右边那个目录导航怎么制作的呀
老湘,点击正在播放会回到列表最上面,不应该是显示当播放到,不知算不算BUG
博主您好,这个如果被播放次数多了后,会不会被封掉,里面的key 会更新吗,如果key失效了,那就无法播放了?
@Dream目前没有遇到被封的情况
没有后台管理界面吗?不能够后台上传吗?
能帮我看下怎么我的列表只有第一首歌 谢谢
http://www.sucaihuo.com/php/3378.html.................这个网址的播放器说是自己的原创,,不能忍
@筱宸对,而且还收费,我就是拿来学习在这个上面看到的,结果买了之后才发现这是个开源的项目
谁知道一直歌单获取失败-500是什么意思0 0 搜索也会-500 查看图片
@pccrain我也是,新手求大佬解答
为什么点下载歌曲,就跳转到一个新的界面
非常喜歡您的作品,請問可以讓我將介面繁體化嗎?
會保留您的版權資訊,請放心!
@Chiahong沒問題
前几天还正常的,这两天不能加载列表,也不能播放!不知道什么原因
@Kinghunkihttp://ys.xtfen.com/music/music.html 这是我页面!
@Kinghunki"Failed to connect to music.163.com port 80: Connection timed out",无法连接至网易云的服务器……
@mengkun老大,这个情况怎么解决?
@Kinghunki不知道……
@mengkun哦,我看你的演示站点是正常的!
@mengkun原来是服务器问题,换了一台就正常了!多谢!
http://mp4ba.ayun.pw/music/ 为何歌单里部分音乐可以,部分不可以?
www.xn--tiejia-hk0s.top/music/ 不行啦 这要怎么搞!博主!博主!博主!等你!
@新手api文件返回 500 错误。不支持你的空间
@mengkun这里的不支持是指php环境还是服务器ip,我用的 vps 一直是500提示,在服务器上 wget 是能够返回数据的,和本地返回的一样,所以应该不是 ip 问题。
@新手你解决了吗?请问是什么问题?
BUG反馈:直接在列表点播放按钮第一首播放器播放按钮会变化,再从列表播放另一首就会没变化一直未播放状态,而且还不可以点击状态。博主网站的也是同样问题。火狐浏览器
@骚包测试了一下,没有复现这个问题……
@mengkun[reply]评论可见的内容[/reply]电脑上用火狐浏览器测试下,真的存在切歌播放按钮停在未播放的状态,但是歌曲却在播放。
专门录了个视频给来让博主看下,博主看完删除我的视频链接吧 不想泄露地址。
[地址已隐藏]
@骚包非常感谢!已收到。待会再测试一下
@mengkun其实博主可以做成百度电台那样不显示列表的播放器,本来就是解析的列表还会很卡,又不好兼容。
也可以做成中间一个大光碟专辑封面旋转形式,下边放上上一曲下一曲和暂停播放按钮。侧面加个类似百度电台形式的切换电台类型。
@骚包样式还是等到 4.x 的时候再改吧(如果有的话),计划是一个大版本一个新的样式 [wb_二哈]
@骚包v2.3版(暂未发布)已解决。预览地址:http://lab.mkblog.cn/music_new/
之前没有发现这个问题是因为……我的 Firefox 版本太低了 [衰]
我只想说博主真是太厉害了。爱你!
对接的是网易云的曲库,曲库不算很全,麦葱的对接曲库更全,但是页面完全没法和你比,希望你能把曲库做多一点,对接QQ音乐,虾米音乐等等
默认歌单ID可以分享下吗,挺喜欢那里面的歌
@梦http://music.163.com/#/playlist?id=440103454
@mengkun默认的歌单在哪里可以修改替换
@wm88990找到了,在musicList.js这个js里面搜到了关键字
[…] 原文地址:http://mkblog.cn/757/ […]
请问怎么设置自动播放下一曲呢?
手机打开,没有下载功能吗?
@晓天下载功能在歌词的右下角
mk大佬,什么时候更新2.3版本呢,期待,也期待换模板
最新版歌单读取失败 - 200 怎么回事 接口是正常返回数据了呀
感谢分享。多来点源码,hhh
请问为什么会获取歌单失败-200,用的是v2.21
@皮皮豪你的 PHP 版本是不是低于 5.4?
请删掉 api.php 中 第 11 行 的“use Metowolf\Meting;”
以及“plugns/Meting.php”中 第 10 行 的“namespace Metowolf;” 试试
@mengkun删掉了还是不行
我的空间脚本支持语言:html、PHP 5.2/5.3/5.4/5.5、Perl 5、WAP
@mengkun的确是php版本过低,你提供的方法无法解决问题 我设置为php5.4或者php5.5正常了 有解决方法吗 我其他站用的php5.3
@获取歌单失败-200在 api.php 的 <? 后面加上 error_reporting(0); 屏蔽掉所有的警告信息试试……
@获取歌单失败-200php5.3连接你php5.4或者php5.5的API.php试试
这个很厉害
希望作者可以添加一个左右滑动。这样好方便切换