Drum machines revolutionized music production in recording studios. They mimic the sound of a drum kit and make it easy to create repeatable beats. Try it out.
Vakis Rigas
April 17, 2024
Why on earth are we talking about drum kits? Yes, you are correct. Drum kits are irrelevant to web development, and it makes no sense to write about them other than that they are an incredibly fun toy to play with.
But we wanted a good excuse to play around with one of the latest packages in toddle: Web Media. This package allows you to control media playback in toddle.
A drum machine is one of the best use cases for that package, so we thought we’d build one—not just any drum machine, but one that looks like something teenage engineering would build.
If anyone from @jugendingenieur wants to build one, you’ve got a customer.
The app lets you adjust the volume, insert new beats, adjust the output of each beat and share your beat to X.
The app is 100% built in toddle. There’s no custom JavaScript code or other fancy tricks involved.
The app consists of a set of variables that control things like beats, beats per minute, etc. We also added a series of formulas for the various kits and configurations.
To bring it all together, we added some workflows to control things like the URL(updates every time you configure your drum machine), the beats, and more.
The drum machine is easy to use; click any button to add a beat. Each row controls the frequency of the beats, and each column represents various parts of a drum kit, such as crash, snare, kick, etc.
The dial controls your beats per minute. You can drag the mouse up to increase the speed to 280 or down to 0. The numbers 1, 2, and 3 represent different variations of the beats, and you control your session with the play and pause buttons.
You can share your beats to X or click the copy button to copy the URL and share it elsewhere.
Andreas made a short video of how it’s built and works.
You can build anything in toddle, and this is an example of how you can let your creativity flow freely and create something other than a basic web app with landing pages. If you'd like to take it a step further and create a whole band, you could technically do that.
If you're curious and love to reverse engineer apps, you can see how we built the app here. Feel free to clone the app, make it your own.
