Check it out here!

The synapse/brainbeat is simple step sequencer synthesizer and drum machine made with Tone.js and React

synapse

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

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()

grid

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

controls

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

get started

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!

login

For now this is purely ornamental. Just click the "make noise" button to play

roadmap

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

contribute

I need all kinds of extra hands on this project.

star power

You made it this far, you might as well star and watch this repo!