Skip to content

Vue技术栈 打造精美音乐WebAppp,且能听付费歌曲(比如周杰伦等),提供优雅的用户体验。仿网易云音乐、仿QQ音乐、vue音乐播放器、music player。

Notifications You must be signed in to change notification settings

fujiazhang/Music-For-The-Poor

Repository files navigation

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

声明

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

About

Vue技术栈 打造精美音乐WebAppp,且能听付费歌曲(比如周杰伦等),提供优雅的用户体验。仿网易云音乐、仿QQ音乐、vue音乐播放器、music player。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published