sujinleeme / vocal-remover-app

🎤 Vocal Remover for Karaoke (on-going..)

Vocal Remover for Karaoke

About

This project is under by Music and Audio Research Group, Seoul National University.

Usage

Install dependencies:

$ yarn

Run development server:

$ yarn client

Run backend server:

$ yarn server

Run development and backend server together:

$ yarn dev

To start a MongoDB server:

$ mongod

Building

$ yarn build

Will create a dist directory containing your compiled code.

Depending on your needs, you might want to do more optimization to the production build.

Webpack Bundle Analyzer

Run in development:

$ yarn dev:bundleanalyzer

Run on the production oprimized build:

$ yarn build:bundleanalyzer

vocal-remover-app's Issues

User Authentication

UI

• Show/Hide Modal
• Changeable Signin/Signup contents
• Singin/Singup Buttons (facebook/google)
• Show name, profile picture on AppHeader
• Logout when clicks 'log out' button

social authentication

• Install react-facebook-login react-google-login
• Facebook button without styling
• Get response and work with saga
• When user is not logged in redirect to login (Refs. https://stackoverflow.com/questions/43164554/how-to-implement-authenticated-routes-in-react-router-4/43171515#43171515)

DB

Refs

https://github.com/jcolemorrison/redux-sagas-authentication-app
https://github.com/diegohaz/redux-saga-social-login

Snackbar Notification

Refs
https://material-ui.com/demos/snackbars/

• Log in
• Log out

MyPage

• If user doesn't login and access url, open modal and request to login (redirect)
• Facebook Profile picture is too small. (refs. keppelen/react-facebook-login#177)

Hydrate State With LocalStorage

https://github.com/rt2zz/redux-persist

Service Worker

Server API Documentation

redux, redux-saga, react-router-redux, devtools Integration

• react-redux (store, reducers, actions, history)
• react-router-redux
• redux-devtools-extensions
• redux-saga

Audio Player Bar

Footeer

Introduction Page

Run App on Openshift Online

https://blog.openshift.com/run-your-nodejs-projects-on-openshift-in-two-simple-steps/

Waveform Visualization

#2

Libraries

• wavesurfer.js
• react-wavesurfer

Related Issues

SOF : HTML script is loading after react components.
SOF : How to make react wavesurfer component
Generating Waveforms for Podcasts in Winds 2.0

Bug

react wavesurfer : mspae/react-wavesurfer#60
this._wavesurfer.init is not a function ->
Note: This version does not work for the version 2 (beta) of wavesurfer.js – A version of react-wavesurfer that will work with the new version is in the making.

Thus, please use wavesurfer.js v1.4.0 instead of v2.x.x

UI

refs

output

Convert tensorflow.py to tensorflow.js

Config Webpack4 & Babel & eslint & flow

https://github.com/esausilva/react-starter-boilerplate-hmr

Esau Silva's How to use Webpack with React: an in-depth tutorial was translated into Korean by me.
https://sujinlee.me/webpack-react-tutorial/

Usage React + Redux + Flow
https://blog.callstack.io/type-checking-react-and-redux-thunk-with-flow-part-1-ad12de935c36
https://www.robinwieruch.de/the-soundcloud-client-in-react-redux-flow/

Realtime visualization of the microphone audio signal

http://wavesurfer-js.org/example/microphone/

audio file upload progress with redux-saga

File Upload Progress with Redux-Saga

TODO

• Show Success/Fail message snack bar
• File Upload Process status UI
• After drag and drop a file and show snack bar message

Server setup with Node.js & MongoDB

Refs
Build simple Medium.com on Node.js and React.js

Drag & Drop File (Ready to upload audio files)

• Install React-Dropzone
• Styling
• Show error message if file format is not accepted.

Definition of input/output audio file

• Time Duration

• precalculate time-duration when user props an audio file

• Format