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

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/

bobmk2 / emoji-beat Goto Github PK

emoji-beat's Introduction

emoji-beat

❓ What is this

🕰️ Archived Pages

📝 Note

🚀 Intro

📝 Entry Contents at React Riot

⚠ Note

Recommended browsers

How to use

Play beats

Edit beats

Change BPM (play score speed)

Add emoji sound

Change setting emoji sound

Delete emoji sound

Toggle enable / disable sound

Save beat score

Share your score

📚 Resources

Sounds

Dependencies

Client

Server

Development

Other

emoji-beat's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org