- This is beat sequencer application with emoji sound.
- App page: 🎶 Emoji Beat
- I developed this at React Riot 2019 in 2 days.
- And I'm honored to receive Hacker favorite award. 🎉🎉🎉
- Thanks!! 😆
- I've archieved pages in commemoration because react riot will be renewed the top page at next year.
- This repository has been fleezed since React Riot 2019 (except this
README.md
file). - I know there are some issues and plobrems, but I have no plans to fix them.
# Install
npm install
# Development
npm run dev-server
# Build for deploy
npm run build:prod
- This site makes a sound.
- Google Chrome
- Firefox (Almost OK. But I know some problems.)
- Click the blue play button to the bottom center of site.
- If you want to play beats only once, toggle off by clicking on the repeat button.
- Click on the lined up squares.
- The emoji sound will be emitted in the shining it.
- Slide the BPM slider to the left bottom of site.
- Press the add button at the bottom to the left of the emoji sound.
- Select emoji and edit sound volume and playback speed.
- You can change this setting after.
- After then, click the ok button.
- Press the cog button to the right of emoji sound.
- Edit sound, volume and playback speed on the modal.
- After then, click the ok button.
- Press the cog button to the right of emoji sound.
- And press the delete button to the left bottom on the modal.
- You can toggle enable / disable the sound by clicking on the volume button of the left emoji.
- Click the save button to the right bottom of site.
- There is this save data to the local storage of the browser.
- Note: You can save the beat score only one .
- Click the share button to the right bottom of site.
- You can set the title and author of your score.
- Note: Able to skip this steps.
- Click the copy button.
- Copied the share url to the clipboard.
- Share the url!!
- 効果音ラボ (Japanese site): https://soundeffect-lab.info/
- Wingless Seraph (Japanese site): https://wingless-seraph.net/
- React: https://ja.reactjs.org/
- Bootstrap: https://getbootstrap.com/?
- React Bootstrap: https://react-bootstrap.github.io/
- lodash: https://lodash.com/
- Moment.js: https://momentjs.com/
- aphrodite: https://github.com/Khan/aphrodite
- rc-slider: http://react-component.github.io/slider/
- qs: https://github.com/ljharb/qs
- react-sound: https://github.com/leoasis/react-sound
- express: http://expressjs.com/
- helmet: https://helmetjs.github.io/
- pm2: http://pm2.keymetrics.io/
- Webpack: https://webpack.js.org/
- webpack-dev-server: https://github.com/webpack/webpack-dev-server
- Typescript: http://www.typescriptlang.org/
- ESLint: https://eslint.org/
- Prettier: https://prettier.io/
- stop-runaway-react-effects: https://github.com/kentcdodds/stop-runaway-react-effects
- Font Awesome: https://fontawesome.com/