Show HN: Beats, a web-based drum machine

beats.lasagna.pizza

109 points by kinduff 16 hours ago


Hello all!

I've been an avid fan of Pocket Operators by Teenage Engineering since I found out about them. I even own an EP-133 K.O. II today, which I love.

A couple of months ago, Reddit user andiam03 shared a Google Sheet with some drum patterns [1]. I thought it was a very cool way to share and understand beats.

During the weekend I coded a basic version of this app I am sharing today. I iterated over it in my free time, and yesterday I felt like I had a pretty good version to share with y'all.

It's not meant to be a sequencer but rather a way to experiment with beats and basic sounds, save them, and use them in your songs. It also has a sharing feature with a link.

It was built using Tone.js [2], Stimulus [3] and deployed in Render [4] as a static website. I used an LLM to read the Tone.js documentation and generate sounds, since I have no knowledge about sound production, and modified from there.

Anyway, hope you like it! I had a blast building it.

[0]: https://teenage.engineering

[1]: https://docs.google.com/spreadsheets/d/1GMRWxEqcZGdBzJg52soe...

[2]: https://tonejs.github.io

[3]: https://stimulus.hotwired.dev

[4]: http://render.com

dworks - 2 hours ago

Love the UI. I think these browser-based products are great at removing the "mystery" around music making or DJing by making it accessible. All you need to do is type a URL and click a few elements to get started and you get instant feedback. I built a similar browser app but for DJing (I was also inspired by Pocket Operators): https://dj.t-tunes.com/

chaosprint - 37 minutes ago

cool. for those who are interested, you can actually use code to control the seq like this example in Glicol:

https://glicol.org/demo#minitechno

Voltage - 14 hours ago

https://beats.lasagna.pizza/?name=lo-fi+dust&bpm=95&i0=K0100...

Fun!

I'd love to be able to add triplets.

skupig - 6 hours ago

The share button doesn't show up on Firefox for some reason?

Fun stuff! It would be nice to be able to make longer patterns. Maybe by having triggers that play randomly or every nth loop, like a lot of drum machines do.

https://beats.lasagna.pizza/?name=hakkernuse&bpm=141&i0=K100...

utopiah - 6 hours ago

Very neat! I had a https://www.crowdsupply.com/wee-noise-makers/wee-noise-maker... but I don't always carry it with me. I do have my phone though most of the time in my pocket so having this on, Web based, is great! The author of ToneJS is very kind, if the documentation wasn't clear you might want to reach out to help clarify it.

PS: didn't check it but being a PWA to work offline would be quite neat, just in case the subway or train goes through a spot without connectivity.

adrianwaj - 4 hours ago

Very nice. Would be great to see a "tap bpm" instead of setting numerically, also a way to run offline, and lastly a way to submit drum covers of popular tracks that used say the Linn 9000 and TR-808 drum machines - with those sounds available!

To really make it interesting, have a way to switcheroo the drum tracks of some cloud music to layer in one's own version instead.

igleria - 3 hours ago

This is great! I can report a bit of odd sounds here and there on firefox ubuntu, but chromium ubuntu works perfect.

myky22 - 4 hours ago

Love it. The pixel UX reminds my of Roguelite games hehe.

So easy to use. Would love to see some bass lunes in the future.

I normally use my OP-XY when improvising.

bracketfocus - 11 hours ago

Nice. I made something similar ~6 years ago, yours is a lot better though.

https://erikburt.github.io/TSequencer/

lagniappe - 11 hours ago

Lots of crackling and popping in firefox on macos, pretty cool otherwise

ajxs - 8 hours ago

I like the interface! It's even better than this other interactive drum machine: https://www.youtube.com/watch?v=3yRx-dd7Jcs

ferg-in-japan - 7 hours ago

Wow this is cool! Inspiration to try making something like this myself. The 8-bit aesthetic looks great too. It would be cool if users could edit the tones - maybe a way to expand in the future.

nilram - 15 hours ago

Not great waveforms, to my ear. Decent UI for a first cut -- trying it out, I found it really addictive. Makes me want to learn more about beats.

zerr - 3 hours ago

Nice! What's the UI toolkit?

hmokiguess - 14 hours ago

Nice UI but your examples don’t feel right to me. Bossa nova sounds nothing like bossa nova.

Igor_Wiwi - 4 hours ago

pls add examples from the Google Sheets for easy bootstrapping

hmcamp - 12 hours ago

I like it. I think I’ll eventually take a whack at making something similar. Thanks for sharing

brikym - 10 hours ago

Nice. I love how you're not using a framework just pure javascript.

cyrusradfar - 7 hours ago

This made my day. Love this, thank you!

MintyPyro - 13 hours ago

Very well made!

metalman - 14 hours ago

heres an offline drum machine, "drum on"

like the online one here as well, but does have static glitches.

https://f-droid.org/en/packages/se.tube42.drum.android/

beratbozkurt0 - 5 hours ago

can we control with keyboard?

juicytip - 14 hours ago

[dead]