Drop a beat! Digital drum kit made in toddle

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.

Drop a beat! Digital drum kit made in toddle
Vakis Rigas

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.

T-Beat Pro is a digital drum machine to create beats like any other drum machine. You can share your beats with your community and get hours of fun and play.

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.

This was my best attempt at a funky beat. Can you make a better one?

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!
Server-side rendered Installable PWAs Connect to any database As performant as code toddle is built in toddle undefined undefined undefined undefined undefined
undefined Style tokens Export as web components No feature limits Connec to any API Extend with code undefined undefined undefined undefined

© Copyright 2024 toddle. All rights reserved.