Introducing Noodlr

an exploration of the possibilities of web audio

Garrett Bodley
2 min readMay 27, 2021
image of an electronic step sequencer, screen and pads lit up in the dark
Photo by Wes Hicks on Unsplash

I built Noodlr as part of my final project at the Flatiron School. The requirements for the project were rather open-ended and, unsure of what to make, I asked a couple of my friends for suggestions. A good friend of mine is a drummer, and he suggested came up with the idea of creating an online web metronome which I thought would be a good challenge.

I had never worked with web audio before, and admittedly felt a little lost when I was first working on things. After a few days of research, I discovered Tone.js, an amazing open-source web audio framework that lets you programmatically generate music. I became fascinated by Tone, with the framework instantly expanding the horizons of my app. My metronome soon morphed into something much larger, ultimately transforming into an online step sequencer.

Using Noodlr, users can express themselves creatively, creating musical vamps by clicking on a grid of buttons. Your musical creations can also be saved so that you can share them with your friends at a later date.

A screenshot of the step sequencer in Noodlr, which consists of a grid of colorful buttons.
Noodlr allows users to express themselves creatively by creating vamps on a web-based step sequencer

Today I merged a new feature onto the production branch, adding a second page where users can play with a web based piano/synth. Plans for future updates include revamping the look/styling of the step sequencer, expanding the app further to allow users to play the piano over the vamps they have created, as well as allowing users to save an mp3 recording of their musical creations.

A screenshot of a digital piano, spanning one octave.
The newly added digital piano

I had a lot of fun creating this website and learned a lot throughout the process. I’m excited to build out further features and to continue to learn and grow throughout the process.

The site is currently live on Netlify. Take a look, make some music, and enjoy!

--

--