Faizy711 / step-sequencer

A 1 bar loop 16 step drum sequencer using MIDI sound react. Made with React.js

The React Drum Sequencer

https://step-sequencer.herokuapp.com/
Version 1.0
Deployment Date: April 4, 2018

Purpose

The React Drum Sequencer is a 1 bar drum looper that will play a 1 bar loop according to the pattern on the pads. This is very similar to a lot of drum sequencer machines where a loop will be played and the pads or buttons triggered will make a sound. I made this project to better understand React.js and to better understand how music is programmed for simple drum machines. Many thanks to n1k0/tinysynth github repo for the general wireframe idea and also from Unlikeness's React Sequencer Tutorial for the general functionality of the sequencer.

Instructions

Go to the website The React Drum Sequencer. You do not have to sign up or sign in in order to just dive in and play. But in order to save your pattern you must sign up and then sign in with your email. You can click the pads to activate them and click play to hear the loop play the sounds. Adjust the BPM to your liking with the slider and save and load your patterns with the buttons, if you are signed in.

Built Using

React.js
Javascript
Midi-sounds-react npm package

IceBox

There are several ideas pending for possible future development.

1. A different pad sequencer for synth sounds and different notes.
2. Better Login and Sign Up capabilities.
3. Additional Styling such as the sliders and alert messages.
4. Saving not only the pattern but the Volume and the selected drums, also to loads those at the same time.