React Netease Music

React Netease Music——一个基于React、TypeScript的高仿网易云mac客户端播放器。

项目体验地址

高仿网易云音乐播放器——音为爱呀😍

功能列表

• [x] 登录/登出（目前仅支持手机密码登录）
• [x] 发现页
  • [x] banner
  • [x] 推荐歌单
  • [x] 推荐最新音乐
  • [x] 推荐MV（仅是入口，详情待实现）
• [x] 每日歌曲推荐页
• [x] 全部歌单页
  • [x] 歌单分类查询
• [x] 最新音乐页
• [x] 歌单详情页
• [x] 音乐播放详情页
  • [x] 歌曲评论
  • [x] 点赞/取消点赞歌曲评论
  • [x] 歌词滚动
  • [x] 歌曲所在歌单
  • [x] 相似歌曲推荐
• [x] 播放记录功能
  • [x] 播放列表
  • [x] 历史记录
• [x] 搜索功能
  • [x] 热门搜索关键字
  • [x] 搜索建议
  • [x] 搜索结果页
• [x] 创建的歌单列表
• [x] 收藏的歌单列表
• [ ] 排行榜
• [ ] 所有歌手页
• [ ] 歌手详情页
• [ ] MV相关的页面与功能
• [ ] 创建/编辑/删除歌单
• [ ] 私信/@我/评论等通知功能
• [ ] 主题换肤
• [ ] ......看心情添加功能😂

注意：部分歌曲可能由于版权问题无法播放喔。

技术栈

• React，使用react hook做状态管理，没有使用额外的数据管理库。
• TypeScript，用TypeScript确实可以提高效率😃（容易发现错误）。
• Graphql，使用@apollo/client优化部分页面性能。
• @blueprintjs组件库，主要使用其中的Icon、Dialog、Toast、Spinner等。
• 逐渐使用@uniquemo/mui替换@blueprinjs（Doing）。
• CSS Modules。
• Webpack。
• Eslint做代码检查。

API接口

• NeteaseCloudMusicApi
• Express Graphql Server

播放器的相关截图

项目启动

• 首先将上面👆提到的API接口部分，两个API服务代码拉到本地，并启动对应的服务；
• 安装pnpm包管理工具；
• 然后拉取本仓库代码，并执行以下命令：

pnpm install
pnpm run dev:local

• 最后在浏览器中访问：http://localhost:8080