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

    选择打赏方式

我的这个博客已经稳定存在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://lmih.cn/about_player.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

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

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

私密评论

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

已有82条吐槽

MCBBC

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

匿名

5年前 (2015-04-10) 广东省广州市电信
播放器设计得不错哦,和炮哥那个有点像 face
 Windows 8.1 x64   Sogou Explorer
匿名

斯佩勒夫

5年前 (2015-04-10) 重庆市移动
被抄袭是因为这个东西好,有抄袭的价值,博主你表现得过于激烈了。我所有的都是从别人那里学来的,他们不写教程,或许我连博客都搭建不起来。
 Windows XP   Google Chrome 39.0.2171.99
斯佩勒夫

凌哥

凌哥

5年前 (2015-06-11) 福建省宁德市联通
@斯佩勒夫:你不明白这种感觉,就像是自己花了很大的精力做好的成果,被人花了几分钟就剽窃走,然后随便改改就变成别人做的东西,那样的感觉非常难受,懂??? face
 Windows 7 x64   Google Chrome 42.0.2311.152

刻画未来

5年前 (2015-04-05) 广东省东莞市电信
看到这个文章, 想起了我写我博客那个播放器的过程, 萌发写成插件那是很久以前了, 但具体实施是在看到你的播放器之后才开始写的,
中途也是忐忐忑忑,播放器的整体框架写好推翻写好推翻,这样经过好几次, 设计上面是弱项, 所以写出来了,效果也是不尽人意
 Windows 7 x64   Google Chrome 41.0.2272.118
刻画未来

匿名

5年前 (2015-03-25) 广东省潮州市移动
face敢放源码吗?
 Windows 7 x64   QQBrowser 8.0.3345.400
匿名

明月浩空

明月浩空

5年前 (2015-03-25)
@匿名:这不是敢不敢的问题。

_有点麻烦

5年前 (2015-03-24) 广东省广州市电信
很强大啊...求教播放暂时是怎么来实现的,AJAX请求吗`没有object是怎么来播放文件的`  网络音乐链接可以的吗` 还是需要服务器上有音乐文件 face
 Windows 7 x64   Google Chrome 38.0.2125.122
_有点麻烦

明月浩空

明月浩空

5年前 (2015-03-24)
@_有点麻烦:Html5 Audio标签

lonewolf

5年前 (2015-03-21) 江苏省苏州市电信
face 偶尔插下IP,不要告诉别人
 Apple iPad   MIUI Browser 1.0
lonewolf

小高

5年前 (2015-03-20) 山西省大同市联通
你网站响应式是你自己弄的还是插件
 Windows 8.1   Google Chrome 31.0.1650.63
小高

明月浩空

明月浩空

5年前 (2015-03-20)
@小高:自响应不是插件是样式。

匿名

匿名

5年前 (2015-03-23) 山西省大同市联通
@明月浩空:bootstrap吗
 Windows 8.1 x64   Google Chrome 31.0.1650.63

九秒

5年前 (2015-03-17) 湖南省永州市电信
话说浩哥现在试试看看我这http手动切https、https手动切http 都能正常叻不。 face
 Windows 8.1 x64   Google Chrome 38.0.2125.122
九秒

明月浩空

明月浩空

5年前 (2015-03-18)
@九秒:不正常,无法访问Https...

九秒

九秒

5年前 (2015-03-19) 湖南省永州市电信
@明月浩空:...蛋蛋疼,折腾一下午全站已经使用相对路径叻。。。我这显示都是正常的。
 Windows 8.1 x64   Google Chrome 38.0.2125.122

明月浩空

明月浩空

5年前 (2015-03-20)
@九秒:SSL 连接出错,你的网站我访问非常困难,湖北武汉百兆电信光纤。 face

九秒

九秒

5年前 (2015-03-23) 湖南省永州市双牌县电信
@明月浩空:现在搞不清原因叻,时不时我也显示SSL 连接出错。。。
 Windows 8.1 x64   Google Chrome 38.0.2125.122

明月浩空

明月浩空

5年前 (2015-03-20)
@九秒:应该是gravatar头像被墙的原因。要加载很久。。

九秒

九秒

5年前 (2015-03-23) 湖南省永州市双牌县电信
@明月浩空:http使用gravatar国际通用的0、1服务器https使用secure。刚改成http/https全部secure。。。能正常叻不
 Windows 8.1 x64   Google Chrome 38.0.2125.122

明月浩空

明月浩空

5年前 (2015-03-23)
@九秒:目前看来是正常的,你早都应该用secure的。0、1还有www服务器都被墙了。我今天换了3年的sha2新证书,说是sha1加密的到2017年1月1日就停止使用了,配置服务器环境搞了好久,打各种补丁,然后中级根证书好像还没搞定,某些移动端提示证书有问题。唉,懒得搞了。 face

九秒

九秒

5年前 (2015-03-23) 湖南省永州市双牌县电信
@明月浩空:face  蛋蛋疼的墙啊,可能是我这0.1服务器时不时的被墙所以自欺欺人的觉得没事。。。
关于SSL证书一来没这闲钱,一想隔三差五的要换证书什么的好麻烦额。所以用的是CDN加速自带的共用SSL(https访问查看证书就知道是啥子。),兼容大部分新的移动端设备,老的浏览器访问直接就是非法。。。 face
 Windows 8.1 x64   Google Chrome 38.0.2125.122

明月浩空

明月浩空

5年前 (2015-03-23)
@九秒:沃通免费颁发3年sha2的SSL证书,分分钟下来。 face

王小刀

5年前 (2015-03-17) 浙江省衢州市电信
face 我很诚实的说,我抄过。 face
 Windows Server 2003   Google Chrome 31.0.1650.63
王小刀

明月浩空

明月浩空

5年前 (2015-03-17)
@王小刀:face 给你个眼神,自己体会。

九秒

5年前 (2015-03-17) 湖南省永州市电信
像我现在用的免费主题是一个外国佬的,对于版权这个国内意识还是没有觉醒,很多时候我自身也是如此。。。
我在他主题的基础上大换血然后只给他名字“基于XX”留了链接什么的就都去除叻 face
 Windows 8.1 x64   Google Chrome 38.0.2125.122
九秒

明月浩空

明月浩空

5年前 (2015-03-17)
@九秒:face 已经升级为仅首页自动开启播放器功能,同时一旦“暂停播放“,播放器即进入一个月记录下次访问自动暂停播放音乐,除非手动点击播放或者手动换歌,播放器才清除记录进入下次访问自动播放模式。

九秒

九秒

5年前 (2015-03-17) 湖南省永州市电信
@明月浩空:我把进来的首页关叻后面打开的也没歌叻。哪个本来悬浮的也不见叻  没歌听了啊 face
 Windows 8.1 x64   Google Chrome 38.0.2125.122

明月浩空

明月浩空

5年前 (2015-03-18)
@九秒:face 所以说播放器只对首页生效,其他页面一律不加载播放器,而且暂停的这个判断只针对首页播放器。

shui

5年前 (2015-03-16) 安徽省合肥市电信
有那么几个深夜被突然的歌声吓一跳。
预计今天12点之前我能把博客修复完 face 除去周末熬了一星期通宵,历经WP4.0两次更新改版
 Windows 7   Google Chrome 38.0.2125.122
shui

明月浩空

明月浩空

5年前 (2015-03-16)
@shui:face 慢慢来,加油吧,我也是改版了好久,最近没什么创意了。

九秒

5年前 (2015-03-16) 湖南省永州市电信
只要访问博客的朋友做了选择:暂停听歌  往后打开所有博客页面歌曲都是处于暂停。朋友在听一首歌还没听完的时候在博客新建了页面那么新建的页面要播放的歌曲能否先停止呢(使得音乐播放页面唯一,支持暂停时后所有后续访问页面都静默 ) face
 Windows 8.1 x64   Google Chrome 38.0.2125.122
九秒

明月浩空

明月浩空

5年前 (2015-03-16)
@九秒:可以考虑加进去,哈哈。

大侠阿木

5年前 (2015-03-16) 广东省深圳市宝安区电信
你好棒我好崇拜你哦
 Windows 10 x64   Google Chrome 39.0.2171.99
大侠阿木

匿名

5年前 (2015-03-15) 湖南省长沙市电信
face
签到成功!签到时间:下午6:24:21,每日打卡,生活更精彩哦~
 Windows 7 x64   UC Browser 4.0.4368.0
匿名

九秒

5年前 (2015-03-15) 湖南省永州市电信
face  播放器经历总结嘛...
 Windows 8.1 x64   Google Chrome 38.0.2125.122
九秒

明月浩空

明月浩空

5年前 (2015-03-16)
@九秒:face 可以这么理解,对了我去掉IP地址显示了。 face

九秒

九秒

5年前 (2015-03-16) 湖南省永州市电信
@明月浩空:详细的IP地址显示只要博主知道就好啦。给所有人知道让来聊天的人有所保留(忌讳)也会带来不必要的麻烦呢 face ,还有就是你的播放器和最近看到的播放器都有打开多个页面同时播放音乐的问题呢,不知道你有木有多次打开一个网站多个页面的行为 face ,总之这是个问题啦 face
 Windows 8.1 x64   Google Chrome 38.0.2125.122

小高

5年前 (2015-03-15) 山西省大同市联通
不知道有人可以破解不
 Windows 8.1   Google Chrome 31.0.1650.63
小高

明月浩空

明月浩空

5年前 (2015-03-16)
@小高:你无聊的时候可以试试啊。

小高

小高

5年前 (2015-03-16) 山西省大同市联通
@明月浩空:技术不行
 Windows 8.1   Google Chrome 31.0.1650.63

小高

小高

5年前 (2015-03-16) 山西省大同市联通
@明月浩空:aJXJ不好弄
 Windows 8.1   Google Chrome 31.0.1650.63

明月浩空

明月浩空

5年前 (2015-03-16)
@小高:慢慢来。 face

小高

小高

5年前 (2015-03-16) 山西省大同市联通
@明月浩空:播放器的ajxj这是emlog的  其他网站可以不
 Windows 8.1   Google Chrome 31.0.1650.63

明月浩空

明月浩空

5年前 (2015-03-16)
@小高:ajax支持所有的网站。

lonewolf

5年前 (2015-03-15) 江苏省苏州市电信
歌曲列表打开后,点击关闭隐藏播放器为什么不把播放器列表给隐藏呢 face
 Apple iPad   MIUI Browser 1.0
lonewolf

明月浩空

明月浩空

5年前 (2015-03-15)
@lonewolf:因为播放列表在交互体验上跟播放器“整体”显示隐藏不冲突,如果隐藏播放器的同时隐藏掉播放列表,就会产生强制性,这个道理就跟文章列表插入音乐,用户点击后播放和打开文章直接播放一个道理,一个是自主选择,一个是强制性。 face