Noise Sequencer in Javascript

See the code
This week, I began experimenting with the p5 sound library, trying to create a simple sequencer using the noise generator. I started by creating a bunch of sliders in the dom where each would represent a step in a sequence. The slider would control the length of the note by modulating the release time of the envelope.

At first, I set up an array of sliders and an array of envelopes. With some experimenting, I settled on changing both the sustain ratio and the release time of each step, but the range of values could still probably use further tweaking.

After messing around, I got it working but the html sliders left much to be desired. I couldn’t modify them very easily to do something as simple as make the drag point change color, and generally dealing with DOM elements over canvas ones seemed annoying. So I created my own sliders.

I decided to refactor my sequencer to only use a single envelope instead of 8, which is more like a normal sequencer on a synth you would find. It made the sequence sound tighter since the envelope could change and be more tied to the prior step.

If I were to continue working on this, there are a loooot of features I’d want to add – a filter, multiple sequences/instruments, muting of steps, other ways of controlling sounds. I’d also want to figure out how to get it to have scrolling disabled on a phone; it seems like the browser bar is not accounted for when getting windowHeight.