[多图]关于明月浩空博客-音乐播放器的开发过程和说明

我的这个博客已经稳定存在1000多天了,日志虽然不多,但我都很用心的在维护它,我曾经承诺过我会终身持有这个域名并保证这个网站持续运行。我想我会做到的。

在2年多的日子里,我不断为博客模板,程序进行优化,升级。但是今天,我想我必须要说一说博客音乐播放器的一些事情了。

先简单介绍一下播放器特性:

1.支持虾米音乐,百度音乐等接口或本地资源播放(当前为本地版)
2.修改为emlog插件,后台可编辑歌单,可一键开关播放器
3.支持lrc歌词上下3行滚动和ksc歌词左右两行逐字渐变卡拉OK展示,ksc歌词支持男、女、合唱3色
4.歌词类型判断,歌词、歌曲、专辑图片加载成功、失败的相关判断,主体动态标签+浮动Tips提示
5.播放器主体背景色跟随专辑图片主色调动态变化
6.单页面独享,只要有页面存在播放器,其他页面均不重复加载,除非关掉包含播放器的网页,新页面才重载播放器
7.暂停记忆,当播放过程中被暂停,播放器记录1个月下次访问博客将自动停止播放音乐
8.专辑列表功能,并高亮提示当前播放的专辑和歌曲,同时歌曲名自动位于列表居中
9.博客文章内可插入N张专辑,点击直接播放(也可以设置为访问页面将自动访问),比如博客的《夜的钢琴曲全集》
10.文章内插入专辑功能播放功能,支持点击按钮直接播放指定列表里的指定某一首或者重新载入新的列表里的某一首
11.太多功能懒得写了...

2013年的某一天,我突然想给博客加一些我喜欢的BGM,这样每次我打开我的博客就可以听到我喜欢的音乐。于是我就去搜索相关的教程,后来必然无功而返,因为Emlog一直没有防刷新方案。我可以确定的是在我和kevin博客加入Pjax防刷新之前Emlog是不存在防刷新方案的。

随后我去寻找不防刷新来播放音乐的方案,也就是说只要不点击页面就可以一直听歌,一旦点击页面音乐也伴随着页面的刷新戛然而止。

在寻找好的音乐播放器案例的时候,我有幸结交了雅趴小栈,同时使用了他修改的基于Jplayer的播放器源代码。为了表达对他开源的感谢,在经过他的同意之后,把他博客完整搬家到我的服务器,并免费使用。

那时候,我博客的播放器是这个样子的。

0.png

2014年的4月份,在我更换模板为Colorful之后重做模板的时候打算把播放器也一起重做了。于是,我在网上又找到个这样的播放器。

1.jpg

细微调整之后,变成这样了...

444.jpg

44.jpg

最终修改细节成这样...

55.jpg

2014年9月,我觉得这个播放器在浏览器丢失标签之后存在很严重的Bug,升级为这样的了...

a.png

这个版本存在一个很严重的问题就是切换音乐会导致音量重置,也就是说就算你调过音量换歌依旧会最大音量。

后来有一天,Kevin告诉我他看到很多好看的播放器,问我哪个版本好看,我说都还不错。然后他告诉我...

3.png

我当时简单看了一下,觉得还不错,直到他给我Demo之后,我完全惊呆了,为此我还特意给服务器添加了Less格式支持。

最开始...

2.png

接着:

22.png

然后...

6.png

再然后...

5.gif

最后...

1-1.gif

由于这个版本几乎修正了之前所有的已知Bug,所以从博客模板升级之后我就开始不停的针对这个播放器进行细节调整。我身边的朋友几乎都知道我为了一个播放器每夜每夜的调试,而选择不跟他们一起LOL。

同时我也拒绝了很多企图寻求播放器源码甚至高价购买的用户,以及很多嘲讽,辱骂的各种人渣。

5.jpg

我也在Kevin产生异议的前提下,强制把播放器调整为圆形专辑图片和半透明背景色。

123.jpg

111.png

5.png

6.jpg

后来突然想到为什么播放时不让专辑图片360度缓慢旋转呢...再说本身图片已经是圆形了,旋转也不违和...

66.jpg

升级功能,添加动态标签和歌词开关之后...

666.jpg

当我觉得播放器功能已经非常完善,陷入困扰的时候,完全没有任何灵感和创意去添加新功能。

我记得那天很晚,我夜里突然醒了再很难睡着,我就打开手机的音乐,当我看到手机音乐播放器背景颜色跟随专辑图片颜色一起变化的时候,我突然觉得,是时候加个播放器变色了!

在跟Kevin讨论之后还是采取了他觉得更方便快捷的建议。

8.jpg

最终效果...

7.jpg

77.jpg

777.jpg

由于考虑到模板调试期间播放器不停加载的问题,我在无聊的时候把播放器也改为Emlog插件并支持后台开关播放器,以及修改歌曲资源目录,播放列表等功能。

ht.jpg

当我觉得播放器已经完全达到预期的时候,Kevin履行年前承诺的回北京把专辑列表相关文件发给我,并由我后续完善。

7.png

收到他发过来的源代码看了下依旧是很多Bug,于是又用心修正了一夜+一上午,成功把专辑列表功能添加进去,同时完美支持博客文章内专辑列表播放!

00.png

带专辑播放功能的最初效果图...

1-2.gif

最终效果可参考博客现在的样式...

我想说明的是,这个音乐播放器我不是原作者,但是我却像父亲疼爱儿子一样“照顾”它从这样...

6.png

成长到这样...

1111.png

我很感谢Kevin写出了这么完美的播放器核心功能和交互,也很感激我身边朋友对播放器的指点,更感激自己在无数次对着它凝视时突然想到的一些创意和功能,以及自己日复一日的修改,调整。

同时我想对那些抄袭我博客音乐播放器(老版本)的那些人,什么简爱啊,鬼少啊,凣高先生啊,还有那谁谁谁,我就不说什么了。

你们抄都抄了,嘴上说着不要,身体却很诚实嘛,wenkmplayer,Myhk_pjax_loading这傻子一看就知道是抄的对吧。

还有既然都抄了就没必要来嘲讽我吧。

当我第一次知道要给播放器做加密的时候,其实我是,是拒绝的,我跟Kevin讲,我拒绝,因为,其实我,根本不会加密……Kevin跟我讲,写完加密,播放器很帅很叼很嚣张……没加密的一个月之后呢,播放器DUANG~~~到处都是……后来我也知道他们是盗我的,是抄袭成分的。我现在呢,每天还是加密,加了很多密,播放器,DUANG~~DUANG~~DUANG~~我的播放器很帅很嚣张,因为我,加密……
版权声明:若无特殊注明,本文皆为《 明月浩空 》原创,转载请保留文章出处。
本文链接:[多图]关于明月浩空博客-音乐播放器的开发过程和说明 https://limh.me/about_player.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗 胜利 不高兴 阴险 乖 酷 滑稽

评论信息框
可使用QQ号实时获取昵称+头像

吃奶的力气提交吐槽中...

已有79条吐槽

1

2017-02-10 20:27 北京市电信
搞事情啊
 Windows 10 x64   QQBrowser 9.5.10219.400

遇见

2016-10-01 08:14 安徽省宣城市电信
我赞同加密,自己辛苦完成的作品,被别人抄去还说是自己的,谁能舒服。
 OPPO   Google Chrome 38.0.2125.114

aloner

2016-04-29 08:15 浙江省湖州市电信
我觉得博主的思维方式有点问题,首先,我们在做一个插件的时候,如果不是说专门为别人定制,而是做给自己用的,那么当我们做好过后,满足了自己的需求,这本身就是一种收获,一种喜悦。在满足了自身需求过后,我们也可以分享这份喜悦。当然,我是用wordpress的,wp的核心精神就是开源,共享。我不知道你们用emlog的博主的信仰是什么。
再来说一点,博主既然已经选择了来卖,那么我们都知道,源码交易一般来说都是完整的一套源码,而博主却保留了核心解析文件用以牵制买家,这在我们wp界来说是一件很不道德的事情。
 Windows 7 x64   Google Chrome 45.0.2454.101

明月浩空

2016-05-01 08:18 湖北省武汉市电信
@aloner:所以就算我卖1个亿你不买就是了,你不要把你的思想强加到别人身上,那样会让别人笑话你。也许你说的很有道理,但道理就是我卖我的,你爱买不买,这就是社会。
你所谓的源码交易,对不起,我们不是卖源码的,我们是卖软件的,卖服务的,网上像这种收费授权使用的软件多的数不过来。难道每个就要开源?
换句话说,源码也卖,但是太贵,你不会买的。
既然你们WP界那么“高尚”,我是不是该庆幸当初没有选择使用WP?
 Windows Server 2003   Google Chrome 48.0.2564.97

aloner

2016-05-01 23:06 浙江省湖州市电信
@明月浩空:呵呵,感觉博主好像很激动!那么我还想请教一个小问题。水墨寒的播放器也是抄袭你的么?希望能给个真实的回答!谢谢!
 Windows 7 x64   Google Chrome 45.0.2454.101

明月浩空

2016-05-01 23:10 湖北省武汉市联通
@aloner:真遗憾让你失望了,我并不激动,换句话说像你这样的人多了去了!
你说的水墨寒我不认识,我也不想回答,凭什么你让我回答我就回答(你算什么)。
 Windows 10 x64   QQBrowser 9.4.7658.400

aloner

2016-05-01 23:17 浙江省湖州市电信
@明月浩空:看来是没办法和博主理性的交流了,我留言2条,加上这条3条,都是非常理智的和博主在交流,都说三人行,必有我师,当然我也希望能在和博主的交流中学习到更多的知识。但是我非常不明白,为什么总感觉博主说话充满了浓浓的火药味?至于博主特别说明的“我算什么”,我只能说我是贵站的一位访客。还有,希望博主不要随便给别人乱扣帽子,我不明白博主所说的像“我”这样的人是怎么样的人。你我互不相识,以前也没有过交集,只是偶然路过贵站,本人实在是想不明白在什么时候,什么地方对博主有得罪之处。若无意之中曾经冒犯过博主,还望海涵
 Windows 7 x64   Google Chrome 45.0.2454.101

明月浩空

2016-05-01 23:24 湖北省武汉市联通
@aloner:慢走不送,回到你“高尚”的WP圈子吧。
我是个粗人,不讲什么道理,我就是我,我博客建了1000多天从没求着任何一个访客来看我的网站,同时我很明确的告诉你,我这里不欢迎你这种所谓有开源精神并且道德“高尚”的人。在我看来无非是看别人赚到钱了,自己眼红只好吐槽别人卖钱还不开源罢了!讲道理就是:我卖我的东西,关你屁事!不买还废话一堆。
 Windows 10 x64   QQBrowser 9.4.7658.400

vivicat

2017-05-31 17:52 浙江省杭州市电信
@aloner:“我觉得博主的思维方式有点问题”这句话不是你说的吗。。你说的第一句话不是就得罪了博主吗,如果想不明白可以看看自己发过的话就懂了吧,不要把自己写的毫无立场,既然敢做就要敢当,这是最起码的吧
 Mac OS X 10.12.4   Google Chrome 58.0.3029.110

苏总

2017-06-04 21:37 河南省平顶山市电信
@aloner:人家卖的就是服务,没说是核心技术/你根本不懂什么是商业问题和分享问题,搞懂再来装B,
 Windows 7 x64   Google Chrome 50.0.2661.102

匿名

2016-04-22 14:49 河南省郑州市电信
哦了柔柔弱弱 face
 Windows 10 x64   Google Chrome 45.0.2454.101

飞雪

2016-01-21 21:17 广东省中山市电信
没日没夜的写代码真辛苦!
 Redmi Note 3   UC Browser 10.9.2.712

匿名

2015-12-23 14:43 江苏省盐城市电信
face 好羞射,文章真的好赞啊,顶博主!
 Windows XP   Sogou Explorer

职大之家

2015-12-15 22:44 江西省抚州市电信
刚刚看完鬼少博客的关于播放器的文章,然后又到这,看到了这篇文章,原来你就是原作者,佩服你的坚持。这个播放器是前端的创新吗?表示之前从来没有看到过这么酷炫屌炸天的播放器。。。。。。。
face 好羞射,文章真的好赞啊,顶博主!
 Windows 8.1 x64   Firefox 42.0

吃货

2015-12-03 10:25 天津市电信IDC机房
嚣张的可爱,呵呵,对于抄袭的人这是屡见不鲜的,博主太多太激动了,博主的宣言,加密后的言语,很嚣张,也是真诚看出博主很爱自己作品,两年的坚持,不断的改进版,耐心不错,作品很漂亮,博主加油
 OnePlus 1   MQQBrowser 5.4

明月浩空

2015-12-03 11:58 湖北省武汉市电信
@吃货:face 好羞射...
 Windows Server 2003   Google Chrome 45.0.2454.93

Tokin

2015-10-18 10:00 山东省青岛市移动
老实说,倒数第二张图片的播放器样式好看。
看的见的辛苦,很多人不理解为什么那么贵,只是他们不懂,定价是给自己最好的肯定。
 Windows 7 x64   TheWorld Browser

烂番茄

2015-09-17 13:32 北京市联通
很不错的哈。。
 Windows XP   Google Chrome 31.0.1650.63

匿名

2015-09-15 14:57 湖北省襄阳市枣阳市电信
网上免费的,你搞成收费的
 Windows 8.1 x64   Google Chrome 43.0.2357.132

明月浩空

2015-09-16 18:15 湖北省武汉市电信
@匿名:我卖多少是我的事情,你买不买是你的事情。
而区别在于某些时候你想买我都不卖给你...
你可以理解为我的东西,我说了算,换句话说就是你爱买不买。
 Windows Server 2003   QQBrowser 9.1.3471.400

匿名

2015-09-06 22:50 河南省南阳市电信
请问老版本的源码可以放出来吗?就是倒数第二张图片那个
 Windows 10 x64   Google Chrome 42.0.2311.152

匿名

2015-09-01 00:21 内蒙古联通
看出来你的用心,不过我不是很喜欢成长之后样子 face
 Google Nexus 9   Google Chrome 44.0.2403.133

烂番茄

2015-09-17 13:37 北京市联通
@匿名:确实很不错的哈。很喜欢。
 Windows XP   Google Chrome 31.0.1650.63

音乐客

2015-07-04 21:07 北京市北京电信互联网数据中心
看到这个播放器惊呆了。太漂亮了,我是在用的cmp播放器。帅锅你这播放器我很心动,只是还没想好用来干嘛!做个电台怎么样?
 Windows XP   Google Chrome 43.0.2357.130

~cts_Lucifinil

2015-06-06 11:16 广西玉林市电信
pjax无刷新咋配置。不懂啊,博主求教

Truman

2015-06-02 10:42 湖北省武汉市电信
博主是武汉人?

明月浩空

2015-06-02 16:06 天津市电信IDC机房
@Truman:不是武汉人,但是在武汉待了2年。
 Windows 7 x64   Google Chrome 40.0.2214.115

晨曦

2015-05-31 10:40 江西省赣州市电信
第一眼看到你的博客时,给我惊艳的感觉,特别是这个播放器,怎么可以这么吊。膜拜博主!
 Windows 7 x64   Google Chrome 30.0.1599.101

明月浩空

2015-05-31 13:57 天津市电信IDC机房
@晨曦:face 恭喜您正在使用支持最新HTML5技术的浏览器。 face
 Apple iPhone   Safari 8.0

skyADMIN

2015-05-06 15:53 山东省青岛市电信
很棒的博客啊。!
face 好羞射,文章真的好赞啊,顶博主!
 Mac OS X 10.10.2   Google Chrome 42.0.2311.135

秋叶博客

2015-05-05 15:29 广东省广州市天河区电信
记录得真详细啊,每一句话都截图下来 face
 Windows 7 x64   Google Chrome 39.0.2171.99

明月浩空

2015-05-05 15:50 天津市电信IDC机房
@秋叶博客:哈哈,后来翻到的。
 Apple iPhone   Safari 8.0

MCBBC

2015-04-12 15:40 江苏省无锡市电信
face 好羞射,文章真的好赞啊,顶博主!
吓到我了 face
 Windows 8.1 x64   UC Browser 4.0.3514.1