neteast-cloud-music-player/README.md

# neteast-music-vue

### Deployed link:
https://neteast.netlify.com/

### It is a mobile first responsive web app for listening music from Neteast cloud platform which is using a open source API: 
https://github.com/Binaryify/NeteaseCloudMusicApi

### The stack is based on Vue, VueX, VueRouter, Vuetify, Axios, PWA, SCSS, Jest, Nightwatch, Eslint, Babel and others.

![picture 01](https://github.com/tatoMa/neteast-cloud-music-player/blob/master/01.jpg?raw=true)

![picture 02](https://github.com/tatoMa/neteast-cloud-music-player/blob/master/02.jpg?raw=true)

- [ ] maybe login?
- [ ] add full PWA support?
- [ ] Progressive Loading? different layout or resources based on device types and network speed
- [ ] large image adaptive loading
- [ ] download music function
- [ ] Lyric sync display
- [ ] redo player animation and transaction
- [ ] player loop/random function
- [ ] UX/UI logic refactor
- [ ] music progress slider click and jump to time function
- [ ] add Skeleton loaders
- [x] fix Chrome security policy don't allow instantiate AudioContext before load audio source 
- [x] fix music url request 403 error (by adding referrer head into index page)
- [x] reduce the bundle size and loading size(to homepage 440k total)
- [x] material icon tree-shaking (Reduce 300K after build the bundle)
- [x] message tab with styled component and function
- [x] click and play music without wipeout playlist
- [x] audio analyser and synchronizer effect by web api and drawing on canvas
- [x] playlist tab in player
- [x] player tabs and sections
- [x] music wave effect (removed)
- [x] player buttons
- [x] slider for volume control
- [x] slider for audio progress
- [x] full screen player mode
- [x] animated transition
- [x] hot music page Tabs and sections
- [x] theme switch (dark and light)
- [x] pagination for all list
- [x] add to playlist function
- [x] play all music in list function
- [x] responsive design implement
- [x] search
- [x] navigation drawer
- [x] hot music page 
- [x] player controller
- [x] state management init
- [x] utils and apis
- [x] hot playlists page 


### need a env file to start this app
```
.env
VUE_APP_baseURL=Your URL
```

#### Project setup
```
npm install
```

##### Compiles and hot-reloads for development
```
npm run serve
```

##### Compiles and minifies for production
```
npm run build
```

##### Run your unit tests
```
npm run test:unit
```

##### Run your end-to-end tests
```
npm run test:e2e
```

##### Lints and fixes files
```
npm run lint
```

##### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
init 2020-02-28 10:21:05 +00:00			`# neteast-music-vue`
bottom nav logic change 2020-03-10 09:35:46 +00:00
update md 2020-03-10 10:20:15 +00:00			`### Deployed link:`
bottom nav logic change 2020-03-10 09:35:46 +00:00			`https://neteast.netlify.com/`

update md 2020-03-09 03:50:40 +00:00			`### It is a mobile first responsive web app for listening music from Neteast cloud platform which is using a open source API:`
update md 2020-03-09 03:48:51 +00:00			`https://github.com/Binaryify/NeteaseCloudMusicApi`
init 2020-02-28 10:21:05 +00:00
update md 2020-03-09 03:50:40 +00:00			`### The stack is based on Vue, VueX, VueRouter, Vuetify, Axios, PWA, SCSS, Jest, Nightwatch, Eslint, Babel and others.`
update md files 2020-03-09 03:46:15 +00:00
			`![picture 01](https://github.com/tatoMa/neteast-cloud-music-player/blob/master/01.jpg?raw=true)`
update md 2020-03-09 03:48:51 +00:00
update md files 2020-03-09 03:46:15 +00:00			`![picture 02](https://github.com/tatoMa/neteast-cloud-music-player/blob/master/02.jpg?raw=true)`

update md 2020-03-11 07:57:29 +00:00			`- [ ] maybe login?`
update todo 2020-03-17 10:31:05 +00:00			`- [ ] add full PWA support?`
music item hover effect 2020-03-19 09:02:03 +00:00			`- [ ] Progressive Loading? different layout or resources based on device types and network speed`
material icon tree shaking applyment 2020-03-13 09:06:58 +00:00			`- [ ] large image adaptive loading`
update md 2020-03-11 07:57:29 +00:00			`- [ ] download music function`
update todo 2020-03-17 10:31:05 +00:00			`- [ ] Lyric sync display`
			`- [ ] redo player animation and transaction`
			`- [ ] player loop/random function`
			`- [ ] UX/UI logic refactor`
update axios 2020-03-14 02:36:46 +00:00			`- [ ] music progress slider click and jump to time function`
music item hover effect 2020-03-19 09:02:03 +00:00			`- [ ] add Skeleton loaders`
fix playlist img to https 2020-03-15 23:45:48 +00:00			`- [x] fix Chrome security policy don't allow instantiate AudioContext before load audio source`
update to https audio url 2020-03-14 04:07:22 +00:00			`- [x] fix music url request 403 error (by adding referrer head into index page)`
fix search error 2020-03-14 01:16:23 +00:00			`- [x] reduce the bundle size and loading size(to homepage 440k total)`
material icon tree shaking applyment 2020-03-13 09:06:58 +00:00			`- [x] material icon tree-shaking (Reduce 300K after build the bundle)`
message tab 2020-03-11 10:09:51 +00:00			`- [x] message tab with styled component and function`
			`- [x] click and play music without wipeout playlist`
update md 2020-03-11 07:57:29 +00:00			`- [x] audio analyser and synchronizer effect by web api and drawing on canvas`
			`- [x] playlist tab in player`
			`- [x] player tabs and sections`
update md 2020-03-11 07:59:39 +00:00			`- [x] music wave effect (removed)`
update md 2020-03-11 07:57:29 +00:00			`- [x] player buttons`
			`- [x] slider for volume control`
			`- [x] slider for audio progress`
			`- [x] full screen player mode`
			`- [x] animated transition`
			`- [x] hot music page Tabs and sections`
			`- [x] theme switch (dark and light)`
			`- [x] pagination for all list`
			`- [x] add to playlist function`
			`- [x] play all music in list function`
			`- [x] responsive design implement`
			`- [x] search`
			`- [x] navigation drawer`
			`- [x] hot music page`
			`- [x] player controller`
			`- [x] state management init`
			`- [x] utils and apis`
			`- [x] hot playlists page`

audio analysier test 2020-03-14 09:32:28 +00:00
			`### need a env file to start this app`
			```
			`.env`
			`VUE_APP_baseURL=Your URL`
			```

update md files 2020-03-09 03:46:15 +00:00			`#### Project setup`
init 2020-02-28 10:21:05 +00:00			```
			`npm install`
			```

update md files 2020-03-09 03:46:15 +00:00			`##### Compiles and hot-reloads for development`
init 2020-02-28 10:21:05 +00:00			```
			`npm run serve`
			```

update md files 2020-03-09 03:46:15 +00:00			`##### Compiles and minifies for production`
init 2020-02-28 10:21:05 +00:00			```
			`npm run build`
			```

update md files 2020-03-09 03:46:15 +00:00			`##### Run your unit tests`
init 2020-02-28 10:21:05 +00:00			```
			`npm run test:unit`
			```

update md files 2020-03-09 03:46:15 +00:00			`##### Run your end-to-end tests`
init 2020-02-28 10:21:05 +00:00			```
			`npm run test:e2e`
			```

update md files 2020-03-09 03:46:15 +00:00			`##### Lints and fixes files`
init 2020-02-28 10:21:05 +00:00			```
			`npm run lint`
			```

update md files 2020-03-09 03:46:15 +00:00			`##### Customize configuration`
init 2020-02-28 10:21:05 +00:00			`See [Configuration Reference](https://cli.vuejs.org/config/).`