React实现H5在线音乐播放器

46次阅读

共计 1213 个字符,预计需要花费 4 分钟才能阅读完成。

React-music
React Music WebApp,在听音乐的时候忽然想听腾格尔的钢铁之翼(隐形的翅膀),在网易云上却找不到,就很气。于是想到了做一个,音乐搜索的功能,把所有想听的歌,能够一次性在酷狗、网易云、QQ、虾米等平台上找找完。本项目非常适合新手练习熟悉 react 全家桶,欢迎 start 哦。
地址 (欢迎 start 哦~)
在线地址:http://music.wuhann.cn/#/home 后端 github 地址:https://github.com/Mohannnnn/react-music-koa2 前端 github 地址:https://github.com/Mohannnnn/react-music

技术栈
React + React-router + Redux + React-redux + ES6/7 + webpack4 + Ant Design + Ant Motion + Fetch/Axios + Scss
目录结构
│ .babelrc #babel 的规则以及插件
│ .editorconfig #IDE/ 编辑器相关的配置
│ .eslintignore #Eslint 忽视的目录
│ .eslintrc.js #Eslint 的规则和插件
│ .gitignore #Git 忽视的目录
│ .postcssrc.js #postcss 的插件
│ package-lock.json
│ package.json #项目相关的包
│ README.md
│ yarn.lock

├─build #webpack 相关的配置
│ utils.js #webpack 配置中的通用方法
│ webpack.base.conf.js #webpack 的基础配置
│ webpack.dev.conf.js #webpack 的开发环境配置
│ webpack.prod.conf.js #webpack 的生产环境配置

└─src #主目录,业务代码
│ app.css
│ App.js
│ favicon.ico
│ index.ejs
│ index.js

│-api #接口 api 等配置
│-compontents #组件
│-store #Redux 管理目录
│-utils #工具函数位置
│-router #路由
└─assets #静态目录,存放静态资源
V1.0 实现的功能

[x] 1. 推荐歌单页
[x] 2. 推荐歌单详情页
[x] 3. 热门歌曲页
[x] 4. 播放页
[x] 5. 搜索(QQ 音乐、网易云、酷狗)
[x] 6. 音乐全局播放
[x] 7. 歌词同步 (在播放页,点击转动的图片)
[x] 8. 切换上一首、下一首

V2.0 实现的功能

[x] 1. 添加到歌单、从歌单删除、删除全部
[x] 2. 歌词动画、以及每个路由下的页面出场动画
[x] 3. 随机播放、顺序播放
[] 4. 音量控制(未做, 感觉意义不大, 手机能自己调)
[] 5. 其他 ( 待定功能,想到在做)

安装依赖
yarn install / npm install
启动项目
yarn dev/npm run dev
打包项目
yarn build/npm run build
demo

正文完
 0