https://github.com/hhow09/react-drum-machine
web drum machine using React
https://github.com/hhow09/react-drum-machine
drum machine music react tonejs
Last synced: about 2 months ago
JSON representation
web drum machine using React
- Host: GitHub
- URL: https://github.com/hhow09/react-drum-machine
- Owner: hhow09
- Created: 2020-10-26T10:14:50.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-16T11:34:41.000Z (over 1 year ago)
- Last Synced: 2025-02-05T05:29:56.034Z (over 1 year ago)
- Topics: drum, machine, music, react, tonejs
- Language: JavaScript
- Homepage: https://hhow09.github.io/react-drum-machine/
- Size: 4.35 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# A Javascript Drum Machine Made with React & tone.js
Live Link: https://hhow09.github.io/react-drum-machine/
## Instruction
### Sound System
- Click 'Play' or 'Spacebar' to start drum loop.
- Click 'Stop' or 'Spacebar' to stop drum loop.
- Click 'Reset' to clear drum patterns.
- Click 'Random' to generate random patterns
### DrumPad
- Click on 4x4 pads to create drum pattern.
- Single-click for normal hit (velocity=0.8).
- Double-click for accentuation (velocity=1).
- Change Instrument on the right side menu.
### Mixer
- Adjust the volumn with mouse click on the height
- volume unit: dB
- Click 'Reset' on top-right to reset volumnes to 0 dB.
## Development
### install
```bash
yarn install
```
### dev
```bash
yarn start
```
## Reference
- [tone.js](https://tonejs.github.io/)
- [colour palettes of vintage drum machines](https://github.com/hhow09/react-drum-machine/tree/master/src/assets/color%20ref)