一个 React 简易网页端音乐播放器

前言

这是一个轻量级的 react 音乐播放器,前端使用 UmiJS,后端采用网易云音乐 NODEJS API 制作。项目的 TS 声明写的比较乱,后续有空的话会发布重写 TS 的版本或者直接重构该播放器。

后续计划将右侧播放器抽离为一个单独的组件,可供页面直接使用。

功能

现有功能

  1. 登陆 / 退出个人网易云账号
  2. 获取私人雷达歌单
  3. 播放歌曲
  4. 播放自己已有的网易云音乐歌单 / 订阅的歌单
  5. 单曲播放 / 全部循环 / 随机播放
  6. 搜索歌曲
  7. 背景图切换

计划中功能(先把饼画着)

  1. 音质选择
  2. 歌曲切换 -> 背景图变化
  3. 保存播放列表并同步到网易云
  4. 双语歌词对照
  5. 歌词自定义字体大小
  6. 歌曲查看评论 / 点赞 / 留言
  7. 详情页相似歌曲推荐
  8. 无版权歌曲或加载出错歌曲增加标记
  9. 将右侧播放器抽离成独立组件

比较有特色的地方

1、右侧全局播放栏

播放栏可以清空播放列表,查看当前歌曲歌词,对播放列表的歌曲可以使用拖拽进行顺序调整。

2、主页左上角频谱图的实现

开始构建使用

1.安装项目

js 复制代码
npm install

2.设置后台接口地址

第一个:网易云 NODEJS 服务器,到 src/utils/request.ts 将其设置为你的网易云后台 API 地址。

js 复制代码
switch (process.env.NODE_ENV) {
  case 'production':
    // 你的生产环境地址 / Your production mode api
    axios.defaults.baseURL = '';
    break;

  default:
    // development
    axios.defaults.baseURL = 'http://localhost:3000';
    break;
}

第二个:天气地址,到 src/constant/api/weather.ts 进行设置。

然后到 src/redux/modules/Weather/action.ts 下根据你设置的天气接口改变传入数据结构,文件内均有注释。

js 复制代码
      const info = {
        // 空气质量
        airQuailty: dewPt,
        // 当前气温
        currentTemp: temp,
        // 体感气温
        feelTemp: feels,
        // 湿度
        humidity: rh,
        // 气压
        baro,
        // 天气描述,如晴或多云
        weatherDescription: cap,
      }

如果想高度自定义样式或内容的话可以到 src/pages/IndexPage/topRightWeather 进行调整。

打包发布

js 复制代码
npm run build

部分功能预览

相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json