Drumbot loves drum machines so much that she made an API dedicated to them. Nothing would make her happier than for you to bring this API to life.
Drumbot has included a drum machine written using React and the WebAudio API to help you get started.
You can start with this or create your own from scratch.
Drumbot's API has the following methods:
GET /drumbot/patterns
Returns the list of available patterns
GET /drumbot/patterns/{pattern-name}
Returns a pattern.
See the API documention For all the details!
Drumbot has provided a starter kit – a drum machine that runs inside a browser, built with React and the WebAudio API.
To get started with the react example, you'll need recent version of node.js. Fork this repository to your own github account so you can share your work.
cd react-starter
npm install
npm start
This example requires WebAudio support,
The WebAudio API is relatively new and support can be slightly different in each browser. This drum machine should work on Edge, Firefox, Chrome, and Safari.
Also note that on some mobile devices, WebAudio only plays through headphones – so if you don't hear anything, plug some in!
The WebAudio page on MDN is a good place to start learning about the WebAudio API.
Here are a few ideas for you to try:
This drum machine loads its sounds from samples that are stored in the .wav format.
The sounds are found in the public/samples folder. Try replacing these with your own sounds.
If you're feeling adventurous, try synthesizing your own drum sounds using oscillators.
This drum machine doesn't let you set the tempo. Try adding a tempo control!
This drum machine plays each sound at an equal volume. Try varying the volume of the sounds or adding a volume knob to each track.
Use the AudioContext.createGain method to create a gain node to control the volume.
You can move sounds around from left to right. Try using AudioContext.createStereoPanner() to create a StereoPannerNode.
You can even get crazy and move sounds around in 3D with a PannerNode.
A revolutionary feature on the Linn LM-1, one of the earliest drum machines, was "Swing" - the ability to make the beat "swing" by slightly changing the timing of every other step. Most drum machines since then have included some sort of swing control. Try adding one to this drum machine.
Drumbot is not a designer. Are you? Let's see what you got.
Can you reverse-engineer the drumbot API and create your own beats? Show us.
Use AudioContext.createAnalyser to analyze the audio data. Create a sound meter or do something else awesome!
Enable changing the pattern by toggling each spet on or off.
Great! Here are some ideas to get you started.
Most languages and platforms out there can play music, with a little help from a library or two. What's your favorite language?
Connect to a real drum machine! Hook these patterns up to your favorite music program! Make your smart microwave heat up pizza to the beatza!
Playing sounds is just one of them. Build something else cool with these repeating patterns. Light up your smart lightbulbs or anything else.
Push your work up to your own fork.
More about Drumbot here: https://noopschallenge.com/challenges/drumbot