Music For The Poor
2021.09.24 更新
- 1.已经从vue2.x更新vue3.x，并基于vue3的composition Api 抽离了可复用逻辑，做完这个项目，既有了react hooks的灵活也有了vue的直观，Interesting～
- 2.切换了音乐Api,修改了解析接口并加入了我自己的登录信息（尊贵的vip会员😄）以获取付费资源；
- 3.一小部分部音乐获取到的播放歌曲依然有问题，tm的QQ音乐的规则老换，没那么多时间去研究，顶不住了😭... 等他规则变动不那么频繁了，回来看看；
- 4.移除了没啥卵用的模块，添加了下载音乐资源的功能，改进了mv模版的交换体验，体验更棒啦；
2020.09.17更新
- Vue3已经进入RFC了，估计没几个月就要正式发布了，目前本项目正在使用vue3升级重构中～，已重构部分 提前感受一波Vue3
简介：
打造精美音乐WebAppp，提供优雅的用户体验，且能听付费歌曲（比如周杰伦等），为祖国2020全面脱贫实现小康社会尽一份自己力量，打赢这场脱贫攻坚战。精准扶贫，让穷人也能听到好的音乐，让穷人省下一笔钱来脱贫，愿天下没有穷人！
扫描二维码：
当然，以上是开玩笑的，主要还是造轮子玩。
Build Setup
npm i //安装依赖
npm run serve //开发
npm run build //打包, 记得修改你的publicPath项目介绍（为了减少gif大小，掉帧严重，优雅的交互体现不出来==）
一、首页
首页主要由顶部搜索和推荐歌单与推荐单曲构成，图片部分应用了懒加载。
二、 音乐播放器
音乐播放器有两种形态，一种mini的小图标，在没有播放或暂停时为静止的icon，当有播放音乐时，为一个有节奏跳动的音律动效，点击后进去播放界面，在缓冲时，音频资源未ready时 ，进度条为一个小小的转圈的loadng,准备就绪，可以拖动进度条对音乐前进或后退，下一首上一首操作播放列表。
下一步接着要做的便是歌词同步~
三、搜索
首页搜索功能
四、歌手页面
歌手页面，左右可以滑动，当点击歌手时，前往歌手主页，歌手主页下有歌曲列表，上拉加载更多功能，
一、Mv
此处解析了哔哩哔哩（bilibili）音乐区的推荐（演奏类），都是非常的棒的视频，同时费劲周折解析了B站视频的高清视频原地址（1080p），很棒的噢~
此处后期可以考虑扩展封装一个播放器组件，目前只是一个简单的播放基础功能。也是一个很有趣的事情哦~~ 欢迎大家来一起参与造轮子~
五、我的
此处待开发...
未来规划和展望
目前武汉新型肺炎爆发，适逢春节，国家号召宅在家里，口罩难求，怕是怕死懒得出门，一直在家里做该项目，进度飞快，这个项目的核心已经完成，但是还是有很多扩展的余地。关于未来的规划，我是这么安排的:
- 音乐player播放器 增加歌词等扩展功能
- 视频播放器
- 完成收藏、播放历史功能
- 实现MV模块 评论页更优雅的交互
- 同时撰写拆解文章
- “我的”待开发
- 未来更多功能待补充...
这个项目长期维护，希望大家踊跃提issue和pr，把这个项目打造得更加完美，帮助到更多的Vue开发者。
最后的最后，万水千山总是情，给个star行不行（你回头也好找这个项目呀 (^_^)）
声明
本项目代码仅用学习交流， 请勿商业使用。