The synapse/brainbeat is simple step sequencer synthesizer and drum machine made with Tone.js and React
synapse is the top grid and synthesizer component
The synthesizer is a basic synthesizer with a sawtooth oscillator made using Tone.Synth()
The synthesziser grid uses the F#minor pentatonic scale. If you don't know what that means, don't worry about it. There are no "wrong" notes.
brainbeat is the bottom grid drum machine component
Slightly more complex than its counterpart, the drum sounds were made using a variety of synths available in the Tone.js library
-
kick/toms - The kick drum and toms use the Tone.MembraneSynth() with sinewave oscillators and employ a variety of octaves to achieve distict tonality
-
hit-hats - The hi-hats use the Tone.MetalSynth()
-
snare - My personal fav. The snare drum is a combination of the Tone.MembraneSynth(), Tone.NoiseSynth(), and Tone.Filter()
Each grid consists of 6 voices represented by rows, and 16 steps represented by columns
The steps are subdivided by 8th notes allowing the user to create and loop 8count phrases
Click the buttons to toggle the sound on, click again to toggle the sound off
Use the slider to adjust the tempo (be gentle or she will get sad)
Click the start button to start the loop
Click the stop to stop the loop
In your terminal run:
-
npm i build
npm i -g serve
serve -s build
the link will be copied to your clipboard
paste and play!
For now this is purely ornamental. Just click the "make noise" button to play
The sky's the limit! I have all kinds of plans for this. This includes, but is not limited to:
-
user profiles
-
saving loops
-
all the normal features one would expect from a synthesizer & drum machine
-
a visulizer would be cool
I need all kinds of extra hands on this project.
You made it this far, you might as well star and watch this repo!