在线听歌房源码 - MKOnlineMusicPlayer V2.21

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
  • 新增“正在播放”、“播放历史”列表功能
  • 新增后台自定义播放列表功能,支持多种列表定义模式
  • 新增本地记录用户设置及播放列表功能
  • 进度条支持响应点击事件

其他相关

1、关于API文件 由于网易云音乐官方封锁了国外的访问,因此本播放器的 api.php 在海外的空间上可能无法运行(其实有个“你懂的”的功能,请自行挖掘),建议在国内空间使用。 2、关于兼容性 本播放器设计支持 IE9及以上的现代浏览器。并且已在 Chrome、firefox、IE11 等浏览器测试使用正常。 3、关于版权 本播放器由 mengkun(http://mkblog.cn) 开发,您可以随意修改、使用、转载。使用或转载时请务必保留出处,抱拳了各位老铁们! 4、关于歌曲 播放器中采用了 网易云音乐(http://music.163.com/) 的 api,因此相对应的歌曲版权归网易云音乐所有。支持正版音乐,请使用官方版网易云。 5、其它 作者很忙,非诚勿扰。欢迎提交 BUG 及好的建议,不欢迎一上来就问一些基础的东西及唠东唠西。

演示地址:

在线演示:http://music.yum6.cn(该功能已加入杨小杰工具箱)

源码下载

在线听歌房源码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

【亲测】最好用的4个JavaScript编辑器

然后我在讲课的时候发现同学们用的编辑器各不相同,有的同学用的是editplus,有的甚至用的是老掉牙的DW,这我就不能忍受了,今天晚上给大家推荐几款比较Ok的编...

20400
来自专栏施炯的IoT开发专栏

Windows Mobile Camera Native API

自从上次在淘宝上淘了一个Cingular 8125(国内是Dopod 838)以来,总想试试一些模拟器上不能玩的功能,相机就是其中之一。在SDK中有3个samp...

21250
来自专栏SEO

「SEO」页面搜索引擎优化详细解说

32360
来自专栏极乐技术社区

小程序一周报 | 小程序开发工具支持真机调试 / 春节期间小程序暂停审核通知

开发者可直接在开发工具内控制微信客户端中的小程序,进行断点、单步执行,调用所有微信原生API,查看所有小程序输出日志等。

13000
来自专栏即时通讯技术

IM开发基础知识补课:正确理解前置HTTP SSO单点登陆接口的原理

一个安全的信息系统,合法身份检查是必须环节。尤其IM这种以“人”为中心的社交体系,身份认证更是必不可少。

17720
来自专栏美团技术团队

用Vue.js开发微信小程序:开源框架mpvue解析

前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复...

1.1K80
来自专栏大数据挖掘DT机器学习

10款最好的信息图创建工具

你是否常常看到别人创建的专业信息图而眼红呢?来看看这十个工具吧,你也一样可以创建牛逼的图表哦! 1. Visual.Ly 这是一个非常好用的应用,你可以用它来快...

41890
来自专栏即时通讯技术

最火移动端跨平台方案盘点

跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,颇...

29520
来自专栏即时通讯技术

最火移动端跨平台方案盘点:React Native、weex、Flutter

跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,颇...

80530
来自专栏云计算

用Google Analytics分析WordPress

Google Analytics(分析)提供与您网站的访问者流量和销售相关的详细统计信息,让您更好地了解您的受众群体。对任何有兴趣增加访客群的网站所有者都有好处...

63610

扫码关注云+社区

领取腾讯云代金券