Noise Sequencer in Javascript

Try it out here

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.

From there, I added buttons to manipulate the tempo. Each button was set up as an object with callback to trigger when clicked.

function createButton(x1,y1,label,c){
let buttonWidth = 40;
let buttonHeight = 20;
let button = {
"x1" : x1,
"y1" : y1,
"x2" : x1+buttonWidth,
"y2" : y1+buttonHeight,
"label" : label,
"callback": c
return button;

My last changes were cleaning up the interface, making it full screen with a variable number of steps.

See the code here

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.

Posted in ICM

One thought on “Noise Sequencer in Javascript

Leave a Reply