前言：之前做的第一版播放器功能做出来了，但发现结构不是很优雅以及后端api很不稳定，所以进行了一次小升级。此次升级 功能更全，体验更好，api更稳定，技术栈更多，收获也更多👍。
[温馨提示：pc浏览f12手机模式最佳,手机建议wifi下访问,低版本浏览器可能有兼容性问题]
预览地址： http://hzzly.net/magic-music
Github地址： https://github.com/hzzly/MagicMusic
欢迎大家的star和fork😄~
实现的功能
-
首页
- 轮播
- 个性推荐[流行、古典、轻音乐、流行]
- 歌曲操作（动画）
-
底部播放控件
- 播放、暂停、下一曲
- 实时播放进度条
-
播放页
- 上一曲、播放、暂停、下一曲
- 播放进度条（弧形进度条）
- 歌词滚动、歌词高亮
-
播放列表
- 播放歌曲高亮
- 切歌(单击切歌)
- 删歌(点击右侧小X)
- 清空播放列表
- 本地缓存播放列表
-
排行榜
- 排行榜列表
- 排行榜里的歌曲(单击播放)、全部播放
-
音乐搜索
- 搜索单曲、歌手
- 搜索历史记录
- 侧边栏
未实现的功能
- 喜欢、分享、下载、切换播放模式
预览
http://hzzly.net/magic-music/screenshots/music.gif
更多预览👉更多
技术栈
1、Vue全家桶(vue2、vue-router、vuex) 快速开发SPA神器
2、Axios vue作者推荐的数据请求方案
3、ES6 全面过度es6的写法 趋势
4、Webpack2 脚手架已经配置好了，超贴心
5、Promise 把请求封装在promise中，方便的可以使用.then回调
6、flex布局 对于移动端可以放心大胆的使用
7、移动端屏幕适配 采用手淘的flexible+rem方案
8、本地存储(sessionStorage、localStorage) 避免重复资源请求，快速读取
9、图片懒加载 vue-lazyload 提升用户体验
本次更新日志
- 后端api采用pm2来部署，防止断开后数据无法请求的尴尬。
- 把监听audio加载完数据事件统一管理起来，避免重复监听，优化代码结构。
- 更新axios请求，让请求更加优美。
- 修改播放页面，优化用户体验。
- 添加加载音乐loading等待，提升用户体验。
- 添加播放全部，避免一个一个添加。
- 本地缓存播放列表与清空。
- 修改首页tab切换动效
后记
MagicMusic还在不断努力的改进，觉得还行的可以点个star，你的star是我继续开源创作的动力，谢谢！！！当然有建议可以在issues里提。
项目地址： https://github.com/hzzly/MagicMusic
欢迎大家的star啦~
求实习
本人大三，求一个前端实习：简历
