Netease-Cloud-Music 🚀

介绍

🚀🚀🚀 Netease-Cloud-Music，基于 React18、React-Router v6、React-Hooks、Redux && Redux-Toolkit、TypeScript、Ant-Design 仿网易云音乐做的一个项目，主要给自己练手 react 使用，完成了网易云播放器的核心部分，没有全部完成

项目后端文档

后端 api 采用网上 neteasecloudmusicapi.js.org/#/ 该网址提供的网易云接口实现

一、Git 仓库地址（欢迎 Star⭐）

• Gitee：gitee.com/li_yongqi/n…

二、🔨🔨🔨 项目功能

• 🚀 采用最新技术找开发：React18、React-Router v6、React-Hooks、TypeScript、Antd
• 🚀 整个项目集成了 TypeScript （完全是为了想学习 🤣）
• 🚀 使用 redux 做状态管理，集成 react-redux、redux-toolkit 开发
• 🚀 使用 TypeScript 对 Axios 二次封装 （错误拦截、常用请求封装）
• 🚀 使用 自定义高阶组件 进行路由权限拦截（403 页面）
• 🚀 支持 React-Router v6 路由懒加载配置
• 🚀 使用 Prettier 统一格式化代码，集成 Eslint、Stylelint 代码校验规范（项目规范配置）
• 🚀 对 commit 提交进行了约束，当时没有找对应的 git commit 插件，所以自己提前设定了一些约束，例如 feat 添加新功能、fix 修复 bug

三、项目截图

image.png

四、项目核心逻辑

主要的逻辑目前就是这些，也是自己开发该项目的难点

4.1 音乐播放

首先在播放音乐时，需要通过 api 获取到这首音乐，放置到 store 中，然后在对应页面使用 audio 直接播放即可

4.2 进度改变

进度条使用的是 antd 中的 progress 组件，当你拖动组件时，会触发一个 update 事件，里面可以获取到当前的一个进度，用当前进度和歌曲的总时长做对比，即可改变进度

4.3 歌词展示

当你获取到音乐时，接着用 歌曲 id 去调用歌词接口，拿到歌词存储在 store 中，然后对歌词进行解析，歌词是一个大的数组，每一句歌词又是一个数组，里面有对应的 time，用当前播放的 currentTime 去遍历歌词数组，即可拿到对应的歌词，然后在页面进行展示

4.4 播放模式

有三个模式：单曲循环、循环播放、随机播放 store 中 维护了一个 playMode 记录当前的一个模式，当歌曲播放完成时，会根据当前的模式去歌曲列表中选择对应的歌曲进行播放