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行不行（你回头也好找这个项目呀 (^_^)）

声明

本项目代码仅用学习交流， 请勿商业使用。