Code Monkey home page Code Monkey logo

music-for-the-poor's Introduction

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

声明

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

music-for-the-poor's People

Contributors

fujiazhang avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.