xutongle / netease-music-react Goto Github PK

View Code? Open in Web Editor NEW

react+nodejs+es6+babel技术实现网易云音乐网页版

License: MIT License

JavaScript 97.97% CSS 2.00% HTML 0.03%

netease-music-react's Introduction

netease-music-app

使用react + nodejs + es6 技术实现高仿网易云音乐网页版

部署

本项目存在Dockerfile,可以再daocluod等平台直接github库部署:tada:
app已经部署到daocloud的net-ease应用🎉net-ease-music应用(daocloud不稳定，不能保证能正常访问到);

/lib 和 /public 是部署所需文件

// 部署环境运行
npm start

环境

安装nodejs
安装git
安装npm

下载和使用

git clone https://github.com/lilongllong/netease-music-react.git
cd netease-music-react
npm install -g webpack
npm install

// for window
npm install -dev

运行

// 开发环境
npm run dev

实现功能

app 功能

网易云音乐歌单列表PlayList
网易云音乐歌单TrackInfo
网易云音乐歌单歌曲列表TrackTable
歌曲播放及进度控制，音量控制, 模块隐藏控制Player
搜索Search
搜索结果展示SuggestionList
播放列表Songlist
歌词展示

开发者功能

webpack
热更新，react-hot-loader.
docker file
babel es6 -> es5
nodejs server

不足

因为个人精力原因，相当多的部分未来得及优化，之后有时间我会继续work.

任务列表

歌曲播放顺序控制。现在采用的是列表顺序播放，预留了代码接口，详情看代码(player component audio控制部分)
歌词展示模块。这一部分同样预留了代码接口，详情看代码(songlist component song-lyric模块)
个人网易云音乐ID的更换。一开始仅仅想自己用，并未为它设计图形界面，但在代码('src/service/ServiceClient.js'- __pseudoLogin function)可以修改
suggestionlist的样式需要优化。选中效果，scroll的样式，条目的展示效果等等