Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/uniquemo/react-netease-music

React Netease Music——一个基于React、TypeScript的高仿网易云mac客户端🎵播放器。
https://github.com/uniquemo/react-netease-music

apollo-client graphql music-player react react-hook typescript webpack

Last synced: 8 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/uniquemo/react-netease-music
Owner: uniquemo
Created: 2020-04-22T08:49:03.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-08-03T06:20:10.000Z (over 1 year ago)
Last Synced: 2024-10-12T14:15:59.021Z (29 days ago)
Topics: apollo-client, graphql, music-player, react, react-hook, typescript, webpack
Language: TypeScript
Homepage: http://www.uniquemo.cn
Size: 18.5 MB
Stars: 532
Watchers: 7
Forks: 118
Open Issues: 11
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md

Awesome Lists containing this project

awesome-react-cn - 一个基于React、TypeScript的高仿网易云mac客户端🎵播放器

README

        # React Netease Music

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

## 项目体验地址

[高仿网易云音乐播放器——音为爱呀😍](http://www.uniquemo.cn/discovery)

## 功能列表

- [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](https://github.com/uniquemo/mui)替换@blueprinjs（Doing）。

- CSS Modules。

- Webpack。

- Eslint做代码检查。

## API接口

- [NeteaseCloudMusicApi](https://binaryify.github.io/NeteaseCloudMusicApi)

- [Express Graphql Server](https://github.com/uniquemo/express-graphql-server)

## 播放器的相关截图

![01_个性推荐页](./resources/01_个性推荐页.png)

![02_每日歌曲推荐](./resources/02_每日歌曲推荐.png)

![03_全部歌单](./resources/03_全部歌单.png)

![04_最新音乐页](./resources/04_最新音乐页.png)

![05_歌单详情页](./resources/05_歌单详情页.png)

![06_音乐播放详情](./resources/06_音乐播放详情.png)

![07_播放记录功能](./resources/07_播放记录功能.png)

![08_搜索功能](./resources/08_搜索功能.png)

![09_搜索结果页](./resources/09_搜索结果页.png)

## 项目启动

- 首先将上面👆提到的API接口部分，两个API服务代码拉到本地，并启动对应的服务；

- [安装`pnpm`包管理工具](https://pnpm.io/installation)；

- 然后拉取本仓库代码，并执行以下命令：

```

pnpm install

pnpm run dev:local

```

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