bobmk2/emoji-beat

Developed at React Riot 2019 by typescript + react

emoji-beat

❓ What is this

• This is beat sequencer application with emoji sound.
  • App page: 🎶 Emoji Beat
• I developed this at React Riot 2019 in 2 days.
  • Entry page: https://www.reactriot.com/entries/40-team-kuramae
• And I'm honored to receive Hacker favorite award. 🎉🎉🎉
  • Thanks!! 😆

🕰️ Archived Pages

• I've archieved pages in commemoration because react riot will be renewed the top page at next year.
  • https://megalodon.jp/2020-0322-0033-53/https://www.reactriot.com:443/
  • https://megalodon.jp/2020-0322-0039-42/https://www.reactriot.com:443/entries/40-team-kuramae

📝 Note

• 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.

🚀 Intro

# Install
npm install

# Development
npm run dev-server

# Build for deploy
npm run build:prod

📝 Entry Contents at React Riot

⚠ Note

• This site makes a sound.

Recommended browsers

• Google Chrome
• Firefox (Almost OK. But I know some problems.)

How to use

Play beats

• 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.

Edit beats

• Click on the lined up squares.
• The emoji sound will be emitted in the shining it.

Change BPM (play score speed)

• Slide the BPM slider to the left bottom of site.

Add emoji sound

• 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.

Change setting emoji sound

• 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.

Delete emoji sound

• Press the cog button to the right of emoji sound.
• And press the delete button to the left bottom on the modal.

Toggle enable / disable sound

• You can toggle enable / disable the sound by clicking on the volume button of the left emoji.

Save beat score

• 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 .

Share your score

• 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!!

📚 Resources

Sounds

• 効果音ラボ (Japanese site): https://soundeffect-lab.info/
• Wingless Seraph (Japanese site): https://wingless-seraph.net/

Dependencies

Client

• 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

Server

• express: http://expressjs.com/
• helmet: https://helmetjs.github.io/
• pm2: http://pm2.keymetrics.io/

Development

• 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

Other

• Font Awesome: https://fontawesome.com/