Show HN: Beats, a web-based drum machine(beats.lasagna.pizza)
129 points bykinduff19 hours ago |28 comments
bicepjai21 minutes ago
I really enjoyed playing around with this, thanks for sharing. You can tell a lot of care and effort went into the experience. I’m curious: did you use any AI tools while building it or was that all done manually?
99990000099951 minutes ago
I absolutely love this as an amateur beat maker.

I want a way to add a chiptune piano with different notes, but this is already awesome!

dworks5 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/
fatherwavelet2 hours ago
I have messed around with making a number of different web drum machines but I really like the square step sequencer for something fresh instead of the standard row.

I notice right away how I am focused on the specific sound I am looking at compared to the step row that feels more focused on the pattern overall.

You could also make it so it plays samples for the drums instead of synthesizing them directly but I do like the default sounds too.

oniony1 hour ago
For something that loops would you not want a circle?
TheCraiggers46 minutes ago
The scan line effect is very nice. Not over done like many others are.
adrianwaj7 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.

Voltage17 hours ago
ofrzeta10 hours ago
Well done. It reminded me of Tricky :)

https://www.youtube.com/watch?v=B2xAjxpwFmw

kinduff16 hours ago
Nice beat! What do you mean by triplets?
Voltage16 hours ago
https://www.youtube.com/watch?v=wYPY9-yjclo

Squeezing 3 hits (evenly placed) in the time that you'd expect to hit 2 hit.

bevelwork3 hours ago
trip-o-let trip-o-let
skupig8 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...

utopiah8 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.

djmips7 hours ago
Fascinating, first time I've seen an open source project written with ADA.
millzlane1 hour ago
A randomize button would be cool.
lagniappe14 hours ago
Lots of crackling and popping in firefox on macos, pretty cool otherwise
darkwater4 hours ago
Same here. Also, the current beat highlight is always red and so it's invisible when the content is red as well (i.e. kick by default).

Beside this, very cool!

yellowapple9 hours ago
Same, with Firefox on Linux (via Flatpak). The UI's great, though.
ofrzeta10 hours ago
No crackling here (Firefox/M4 Air).
exodust10 hours ago
I'm getting a little popping on Firefox Windows, which disappears if I remove the kick step on second row of the default bosa nova. Nice work anyway, the UI is immediate and instant play.
chaosprint3 hours 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

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

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

igleria6 hours ago
This is great! I can report a bit of odd sounds here and there on firefox ubuntu, but chromium ubuntu works perfect.
myky226 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.

ajxs10 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-japan10 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.
nilram17 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.
hmokiguess17 hours ago
Nice UI but your examples don’t feel right to me. Bossa nova sounds nothing like bossa nova.
kinduff16 hours ago
I agree, let me see if I can tweak it so it sounds a bit more like it.
zerr6 hours ago
Nice! What's the UI toolkit?
hmcamp14 hours ago
I like it. I think I’ll eventually take a whack at making something similar. Thanks for sharing
brikym13 hours ago
Nice. I love how you're not using a framework just pure javascript.
cyrusradfar9 hours ago
This made my day. Love this, thank you!
Igor_Wiwi7 hours ago
pls add examples from the Google Sheets for easy bootstrapping
MintyPyro16 hours ago
Very well made!
metalman16 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/

beratbozkurt08 hours ago
can we control with keyboard?