史上最强程序员200行代码写出音乐播放器

分类: MXPlayer安卓 发布时间:2018-07-22 00:03

程序员敲代码最想做的一件事那就是戴耳机听音乐,把影响自己写代码的声音排除,全身心只投身与代码之中。

音乐播放去效果图

音乐播放器实现的功能

2、底部播放控件

3、播放页面

4、播放列表

potplayer:吧了啊

5、排行榜

6、音乐搜索

目录结构

开发心得与总结

1、轮播图

首先感谢作者ShanaMaid/vue-image-scroll开源的代码,我把代码copy下来自己进行了一点修改(没有手指滑动效果).

因为这是移动端,少不了的手指滑动切换,所以添加了vue-touch(偷偷告诉你,vue-touch的next分支还是支持vue2.0的)。

§ 条件渲染 (使用 v-if)

§ 条件展示 (使用 v-show)

§ 动态组件

§ 组件根节点

3、直线进度条、弧形进度条

西班牙建筑大师曾说过:“直线属于人类,曲线则归于上帝”。在这里我大胆的使用了弧形来作为进度条,(几大热门音乐APP貌似还没有弧形进度条)。

这里我用到了Vue的绑定内联样式

4、本地存储

将一些数据缓存到localStorage,可以减少Http请求,从而优化页面加载时间。

在这个项目中首页歌曲列表以及搜索历史用到了本地缓存,拿搜索历史来举栗:

5、图片懒加载

使用了vue-lazyload插件

6、歌词滚动与高亮

因为api提供的歌词包括时间,如:

[03:57.280]原谅我这一生不羁放纵爱自由

所以首先要进行字符串切割:

然后在播放的监听事件中与播放的当前做对比:

到这就ok了

7、VUEX状态管理

推荐官方调试工具 devtools extension

之前看到好多人写的vuex,把整个项目的数据放到了一个state里,导致应用的所有状态集中到一个很大的对象。但是,当应用变得很大时,store 对象会变得臃肿不堪。

所以我建议(个人见解,轻喷):将 store 分割到模块(module)。每个模块拥有自己的 state、mutation、action、getters。这样方便管理与后期的维护。

西安西科软件IT培训,教育引领未来,迄今为止,已有超过10000+学子取得显著的成就,获得社会各界的一致好评。2018,你只差一个正确的选择。

西科软件7月份

免费试听课正式开始报名!

来西科软件,学习最新颖最落地的计算机互联网知识All in one——核心技术多合一,由片面掌握到全面吃透。JAVA,前端,python,大数据,人工智能等多种互联网领域最前沿课程,全部贴合市场需求而研发,确保学子即学即用。成就互联网精英的路上,让西科软件助你一臂之力。

关注西科软件

随时了解软件编程各种技术 Java /安卓/ web前端/python/大数据/人工智能等 ,还可以学习各种职场技巧。

关注以下老师微信号随时一对一的答疑