脚本宝典收集整理的这篇文章主要介绍了DIY一个自己的音乐播放器2.0来袭,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前言:之前做的第一版播放器功能做出来了,但发现结构不是很优雅以及后端api很不稳定,所以进行了一次小升级。此次升级 功能更全,体验更好,api更稳定,技术栈更多,收获也更多?。
[温馨提示:pc浏览F12手机模式最佳,手机建议wifi下访问]
预览地址: http://hzzly.net/magic-music
GIThub地址: https://github.com/hzzly/Magi...
欢迎大家的star和fork?~
实现的功能
-
首页
轮播
个性推荐[流行、古典、轻音乐、流行]
歌曲操作(动画)
-
底部播放控件
-
播放页
上一曲、播放、暂停、下一曲
播放进度条(弧形进度条)
歌词滚动、歌词高亮
-
播放列表
播放歌曲高亮
切歌(单击切歌)
删歌(点击右侧小X)
清空播放列表
本地缓存播放列表
-
排行榜
排行榜列表
排行榜里的歌曲(单击播放)、全部播放
-
音乐搜索
搜索单曲、歌手
搜索历史记录
侧边栏
未实现的功能
喜欢、分享、下载、切换播放模式
预览
更多预览?更多
技术栈
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 提升用户体验
本次更新日志
把监听audio加载完数据事件统一管理起来,避免重复监听,优化代码结构。
更新axios请求,让请求更加优美。
修改播放页面,优化用户体验。
添加加载音乐loading等待,提升用户体验。
添加播放全部,避免一个一个添加。
本地缓存播放列表与清空。
后记
MagicMusic还在不断努力的改进,觉得还行的可以点个star,你的star是我继续开源创作的动力,谢谢!!!当然有建议可以在issues里提。
项目地址: https://github.com/hzzly/MagicMusic
欢迎大家的star啦~
求实习
本人大三,求一个前端实习:简历
以上是脚本宝典为你收集整理的DIY一个自己的音乐播放器2.0来袭全部内容,希望文章能够帮你解决DIY一个自己的音乐播放器2.0来袭所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。