maomao1996 / React Music
Licence: mit
基于React的在线音乐播放器（移动端高仿安卓网易云音乐）（重构是不可能的，这辈子都不会用 hooks 重构）
Stars: ✭ 269
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Music
Tonzhon Music
将QQ音乐、网易云音乐和酷我音乐上的歌添加到一个列表来播放！
Stars: ✭ 257 (-4.46%)
Mutual labels: music, music-player, react-router
Html Midi Player
🎹 Play and display MIDI files on the web
Stars: ✭ 158 (-41.26%)
Mutual labels: music, music-player
Nighthawk
A stealthy, simple, unobtrusive music player that stays out of your way
Stars: ✭ 197 (-26.77%)
Mutual labels: music, music-player
Electron Vue Music
基于 electron-vue 开发的音乐播放器，界面模仿QQ音乐，技术栈electron-vue+vue+vuex+vue-router+element- UI。欢迎star
Stars: ✭ 1,901 (+606.69%)
Mutual labels: music, music-player
Vue Soundcloud
🎧 A SoundCloud client built with Vue and Nuxt
Stars: ✭ 141 (-47.58%)
Mutual labels: music, music-player
Estmusicplayer
An elegant and simple iOS music player.
Stars: ✭ 2,165 (+704.83%)
Mutual labels: music, music-player
Cloudtunes
Web-based music player for the cloud ☁️ 🎶 Play music from YouTube, Dropbox, etc.
Stars: ✭ 2,449 (+810.41%)
Mutual labels: music, music-player
Swift Radio Pro
Professional Radio Station App for iOS!
Stars: ✭ 2,644 (+882.9%)
Mutual labels: music, music-player
Musicplayer
A music player with pretty ui/ux design.
Stars: ✭ 232 (-13.75%)
Mutual labels: music, music-player
Discord Bot
A discord bot that can play music, moderate, log events and more
Stars: ✭ 127 (-52.79%)
Mutual labels: music, music-player
Musicplayer
A minimal music player built on electron.
Stars: ✭ 145 (-46.1%)
Mutual labels: music, music-player
Dmusic
DMusic Player for Android - An online music player based on Component + MVP Base + MVP Customization + greenDAO + OkHttp3 + Retrofit + RxJava2; supports local and network music playback; can play Baidu music, Netease cloud music; support online music list , radio, MV, music online, download, local and online lyrics; Lyrics, music cache; self-built song list, song management, collection, sorting, sorting, skinning, sleep timing, mode switching, more settings, etc. 基于 Component + MVP Base + MVP Customization + greenDAO + OkHttp3 + Retrofit + RxJava2 的在线音乐播放器; 支持本地及网络音乐播放; 可播放百度音乐，网易云音乐; 支持在线音乐榜单, 电台, MV, 音乐在线播放,下载, 本地及在线歌词; 歌词, 音乐缓存; 自建歌单, 歌曲管理, 收藏, 排序, 分类, 换肤, 睡眠定时, 模式切换, 更多设置等
Stars: ✭ 121 (-55.02%)
Mutual labels: music, music-player
Tonejs Instruments
A small instrument sample library with quick-loader for tone.js
Stars: ✭ 172 (-36.06%)
Mutual labels: music, music-player
Oud
🎵 The frontend of Oud, an online music streaming service that is a mimic of Spotify with all its functionalities built using ReactJS, React-Router, Bootstrap.
Stars: ✭ 48 (-82.16%)
Mutual labels: music-player, react-router
Nicemusic
A Nice MusicPlayer Powered by StarrySky
Stars: ✭ 107 (-60.22%)
Mutual labels: music, music-player
React-Music（2018.12.27）
高仿网易云音乐安卓客户端
API：一个开源的网易云音乐 NodeJS 版 API（有 api 才有动力写！！！）
如何安装与使用
react-music
# 下载 react-music
git clone https://github.com/maomao1996/react-music.git
# 进入 react-music 项目目录
cd react-music
# 安装依赖
npm install
# // 运行 react-music 访问 http://localhost:8163
npm run start
# // 项目编译打包
npm run build
后台服务器
# 下载 NeteaseCloudMusicApi
git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
# 安装依赖
npm install
# 服务端运行 访问 http://localhost:3000
node app.js
运行 react-music 后无法获取音乐请检查后台服务器是否启动
.env 的 REACT_APP_BASE_API_URL 地址要和后台服务器地址一致
技术栈
- React（核心框架）
- React-Router（页面路由）
- Redux（状态管理）
- React-Redux
- Redux-Thunk
- ES 6 / 7（JavaScript 语言的下一代标准）
- Sass（CSS 预处理器）
- Axios（网络请求）
- ClassNames（处理动态 class ）
- Better-Scroll（一款重点解决移动端各种滚动场景需求的插件）
- FastClick（解决移动端 300ms 点击延迟）
项目布局
展开查看
.
├── config // webpack 配置文件
├── public // 项目启动页面
├── scripts // 脚本工具
├── screenshots // 项目截图
├── src // 项目源码目录
│ ├── api // 数据交互
│ │ └── index.js
│ ├── assets // 静态资源目录
│ │ └── images // 图片目录
│ ├── base // 公共基础组件目录
│ │ ├── columnList // 歌单基础列表组件 —— 列
│ │ ├── drawer // 抽屉组件
│ │ ├── loading // loading 组件
│ │ ├── notification // 通知组件（Toast）
│ │ ├── progress // 进度条拖动组件
│ │ ├── rowList // 歌单列表基础组件 —— 行
│ │ ├── scroll // 滚动组件
│ │ ├── slide // slide 组件
│ │ ├── songlist // 歌曲列表基础组件
│ │ └── toast // Toast 组件
│ ├── components // 公共项目组件目录
│ │ ├── menu // 菜单组件
│ │ ├── mm-header // 一级导航组件
│ │ ├── mm-nav // 二级导航组件
│ │ ├── player // 播放组件
│ │ └── search-list // 搜索列表详情组件
│ ├── model // 数据模型目录
│ ├── pages // 项目主页面目录
│ │ ├── discover // 发现页面
│ │ ├── playlist // 歌单详情页面
│ │ ├── search // 搜索
│ │ ├── sheetlist // 歌单页面
│ │ ├── skin // 皮肤切换页面
│ │ ├── toplist // 排行榜页面
│ │ └── App.js // 根组件
│ ├── store // redux 目录
│ │ ├── actions.js // 配置 actions 方法
│ │ ├── actionTypes.js // 配置 actions 常量
│ │ ├── index.js // 引用 redux
│ │ └── reducers.js // 处理数据
│ ├── styles // 样式表目录
│ │ ├── index.scss // 基础样式
│ │ ├── mixin.scss // 基础样式宏
│ │ ├── playCount.scss // 播放数量样式宏
│ │ ├── reset.css // 基础重置
│ │ └── var.scss // 基本变量
│ ├── utils // 公共 Js 目录
│ │ └── utils.js // 公用 Js 方法
│ ├── config.js // 基础配置
│ └── index.js // 入口主文件
功能
- 播放器
- 正在播放
- 排行榜
- 歌单列表
- 歌单详情
- 搜索（歌曲、歌单）
- 皮肤切换
更新说明
V1.1.1（2018.12.27）
- 修复 Banner 图片不显示问题
- 修复歌单详情打开失败问题
V1.1.0（2018.07.24）
- 制作皮肤切换功能
- 增加 Toast 弹出层
- 优化 Scroll 组件逻辑
- 优化抽屉组件样式
V1.0.0（2018.06.12）发布正式版
- 制作播放器功能
- 制作正在播放列表功能
- 制作排行榜功能
- 制作歌单列表功能
- 制作歌单详情功能
- 制作搜索功能（歌曲、歌单）
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].