Show HN: Beats, a web-based drum machine

https://beats.lasagna.pizza

160•kinduff•2w 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

Comments

nilram•2w 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.

hmokiguess•2w ago

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

kinduff•2w ago

I agree, let me see if I can tweak it so it sounds a bit more like it.

Voltage•2w ago

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

Fun!

I'd love to be able to add triplets.

kinduff•2w ago

Nice beat! What do you mean by triplets?

Voltage•2w 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.

bevelwork•2w ago

trip-o-let trip-o-let

ofrzeta•2w ago

Well done. It reminded me of Tricky :)

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

metalman•2w 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/

MintyPyro•2w ago

Very well made!

hmcamp•2w ago

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

lagniappe•2w ago

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

ofrzeta•2w ago

No crackling here (Firefox/M4 Air).

exodust•2w 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.

yellowapple•2w ago

Same, with Firefox on Linux (via Flatpak). The UI's great, though.

darkwater•2w 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!

bracketfocus•2w ago

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

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

brikym•2w ago

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

ajxs•2w 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•2w 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.

cyrusradfar•2w ago

This made my day. Love this, thank you!

skupig•2w 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•2w 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.

djmips•2w ago

Fascinating, first time I've seen an open source project written with ADA.

beratbozkurt0•2w ago

can we control with keyboard?

kinduff•2w ago

I'll make sure to add that!

adrianwaj•2w 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.

Igor_Wiwi•2w ago

pls add examples from the Google Sheets for easy bootstrapping

myky22•2w 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.

igleria•2w ago

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

zerr•2w ago

Nice! What's the UI toolkit?

kinduff•2w ago

Custom made, I've been using on some apps lately

dworks•2w 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•2w 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

fatherwavelet•2w 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.

oniony•2w ago

For something that loops would you not want a circle?

millzlane•2w ago

A randomize button would be cool.

999900000999•2w 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!

TheCraiggers•2w ago

The scan line effect is very nice. Not over done like many others are.

bicepjai•2w 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?

bicepjai•2w ago

Oh man, I can’t stop using this app. It’s been 2 hours

fallinditch•2w ago

Nice job! Added to my home screen.

Firefox on Android - seems to work perfectly.

Any plans to develop this further? I'm not sure how doable this is but I'd love to be able to program African polyrhythms on my phone.

I think the main dev challenges would be:

- add swing and humanization

- layering the polyrhythms on separate tracks

- adding different time signatures, e.g. 12/8 is common for African polyrhythms.

- allow independent cycle lengths per track

A good resource for further reading - https://djemberhythms.com/books/

epiccoleman•2w ago

I see scanlines, I upvote. Simple as.

turbotim•2w ago

This is nice, I'm similarly a fan of Teenage engineering and have been playing around with ToneJS and Sveltekit to make https://shantylab.com

It's been a really interesting way to understand the elements of putting together music for me. I started off thinking surely it can't be that hard to make a simple way of making music but as I added more and more functionality I found it tricky to keep the UI simple. I'm still plugging away and the challenge of chasing simplicity is what's keeping me going.

kinduff•2w ago

Wow! This is amazing! You went great lenghs to make it complete. I really like the layers, something that I would love to add.

Your sounds are very nice too, are you synthesizing them too?

turbotim•2w ago

There’s some synth sounds and some samples, you can record your own samples in also and play them like an instrument. That part is loosely based on the KO2 which I have and love

yochem•2w ago

Really nice, loved playing with it!

One small improvement: could you disable the "double tap to zoom" on mobile browsers? This happens often when you press multiple squares closeby. Should be one line of css:

    touch-action: manipulation

ssoydan•2w ago

Simple and fun! I love it.

Start all of your commands with a comma (2009)

Software Engineering Is Back

Hoot: Scheme on WebAssembly

Reinforcement Learning from Human Feedback

OpenCiv3: Open-source, cross-platform reimagining of Civilization III

The Waymo World Model

Vocal Guide – belt sing without killing yourself

Omarchy First Impressions

Making geo joins faster with H3 indexes

Unseen Footage of Atari Battlezone Arcade Cabinet Production

Ga68, a GNU Algol 68 Compiler

What Is Ruliology?

Show HN: Look Ma, No Linux: Shell, App Installer, Vi, Cc on ESP32-S3 / BreezyBox

Monty: A minimal, secure Python interpreter written in Rust for use by AI

Cross-Region MSK Replication: K2K vs. MirrorMaker2

Show HN: I spent 4 years building a UI design tool with only the features I use

Hackers (1995) Animated Experience

Sheldon Brown's Bicycle Technical Info

Show HN: If you lose your memory, how to regain access to your computer?

Microsoft open-sources LiteBox, a security-focused library OS

An Update on Heroku

The AI boom is causing shortages everywhere else

PC Floppy Copy Protection: Vault Prolok

Was Benoit Mandelbrot a hedgehog or a fox?

Dark Alley Mathematics

How to effectively write quality code with AI

Female Asian Elephant Calf Born at the Smithsonian National Zoo

I now assume that all ads on Apple news are scams

Understanding Neural Network, Visually

Delimited Continuations vs. Lwt for Threads

Start all of your commands with a comma (2009)

Software Engineering Is Back

Hoot: Scheme on WebAssembly

Reinforcement Learning from Human Feedback

OpenCiv3: Open-source, cross-platform reimagining of Civilization III

The Waymo World Model

Vocal Guide – belt sing without killing yourself

Omarchy First Impressions

Making geo joins faster with H3 indexes

Unseen Footage of Atari Battlezone Arcade Cabinet Production

Ga68, a GNU Algol 68 Compiler

What Is Ruliology?

Show HN: Look Ma, No Linux: Shell, App Installer, Vi, Cc on ESP32-S3 / BreezyBox

Monty: A minimal, secure Python interpreter written in Rust for use by AI

Cross-Region MSK Replication: K2K vs. MirrorMaker2

Show HN: I spent 4 years building a UI design tool with only the features I use

Hackers (1995) Animated Experience

Sheldon Brown's Bicycle Technical Info

Show HN: If you lose your memory, how to regain access to your computer?

Microsoft open-sources LiteBox, a security-focused library OS

An Update on Heroku

The AI boom is causing shortages everywhere else

PC Floppy Copy Protection: Vault Prolok

Was Benoit Mandelbrot a hedgehog or a fox?

Dark Alley Mathematics

How to effectively write quality code with AI

Female Asian Elephant Calf Born at the Smithsonian National Zoo

I now assume that all ads on Apple news are scams

Understanding Neural Network, Visually

Delimited Continuations vs. Lwt for Threads

Show HN: Beats, a web-based drum machine

Comments