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

yarn install

dev

yarn start

Reference

• tone.js
• colour palettes of vintage drum machines