After two years of development, I'm super excited to release Beat Maker! This is my take on what I hope is the best free, web-based drum machine.
My goal was to build something that was not only fun and easy to use for beginners but also powerful enough for serious producers. I did extensive research on existing drum machines, analyzed their UX, and tried to build something that adds something new.
It's a nearly 100% client-side app, written in ClojureScript, and is a PWA so you can install it to your home screen for an app-like experience.
Besides the standard grid editor, Beat Maker has some unique features that I think HN readers might find interesting:
- Procedural sample generation. One annoying thing about writing beats is searching through folders full of samples. I wanted to improve this and so I added the ability to generate new samples with a single click, giving you an infinite supply of unique drum samples. * Generative beat creation. If you're looking for inspiration, Beat Maker can generate entire patterns for you as a starting point. You can then edit and tweak the beat to your liking. Great for solving the "blank canvas" problem and giving you something good to start from. * Advanced export options. This is where it really shines for producers. You can export your work as: * A standard WAV loop * Individual stems (ZIP) * A MIDI file * A ZIP file of all your samples as WAVs * A SoundFont (.sf2) drum kit from your generated samples * An Impulse Tracker (.it) file for use in trackers like Renoise, OpenMPT or a Polyend * Pocket Operator/Volca sync. It can output a sync signal on the left audio channel to sync with these hardware devices for perfect timing. * Per-Note FX. You can add effects like volume slides, repeats, and start volume changes to individual notes for more complex drum phrases incorporating flam and roll.
As an old school tracker guy, I'm particularly excited about the Impulse Tracker export mode. I was surprised to discover how many DAWs (including hardware like Polyend) can import this format. Of course, you can also pull up Impulse Tracker on DOSBox, or the more modern re-implementation, Schismtracker for that retro experience.
By the way, the beat generator feature is not trained on any artists or anything like that. It's an algorithm I built from scratch myself.
The audio engine is built on a declarative audio graph (using `virtual-audio-graph`), inspired by React's virtual DOM, which makes managing the Web Audio API much cleaner. If you're building web based audio apps I highly recommend checking out this library.
I'd love for you to try it out and let me know what you think. Feedback (and the inevitable bug reports) most welcome! Thank you!
P.S. Also, here's a video summary: https://youtu.be/qVmEn9z3H24
chaosprint7 days ago
> "The audio engine is built on a declarative audio graph (using `virtual-audio-graph`), inspired by React's virtual DOM, which makes managing the Web Audio API much cleaner. If you're building web based audio apps I highly recommend checking out this library. "
when you have more and more interactions on the gui web audio api will become a problem, check out audioworklet.
I am developing https://glicol.org/ and it has a js port on https://glicol.js.org/ a typical usecase is drum machine with very high time accuracy
chr15mop6 days ago
I don't like creating a lot of audio nodes on the fly for that reason. Beat Maker re-renders the audio to a buffer any time a value is changed. The audio engine is very efficient, literally playing one static buffer on loop. For the browser/OS this is basically memcpy, which is cheap, and does not take place on the GUI thread.
anonymous3445 days ago
does this solve the stupid problem with chrome mobile (samsung) that if you make javascript timer for example 4 seconds, and then play() the audio is already deleted by garbage-collection.. ?
chr15mop4 days ago
The algorithm in Beat Maker bypasses that issue completely by rendering the webaudio graph to a static buffer on every change.
iamben7 days ago
This is great fun, congrats!
2 small requests that (I think) would help with the UX: consider moving (or duplicating) the play button - maybe directly in the middle below the editor, or on that panel itself. It took me a few confusing seconds to realise where it was. Also, could you consider making each fourth (or first) column a very slightly lighter grey? So if I want my kick on 1, 3, 10 and 11 it's really easy to see where to click without counting?
mockingloris6 days ago
> Also, could you consider making each fourth (or first) column a very slightly lighter grey
This could be a component logic; a row of drop downs for customizing the UI and a good examples are color and grid count. This could even be a toml/json config file that can be imported/exported.
My own addition is ability to import samples from my own device.
chr15mop6 days ago
Importing samples is on my TODO list. Thank you for the feedback!
chr15mop6 days ago
Great ideas, thank you. I will triage these suggestions into the issue tracker. Many thanks!
dpoljak7 days ago
Really cool! How come you've chosen ClojureScript, and did you regret that choice in the 2 years you've been working on this?
To be clear, this is pure curiosity on my part as I love Clojure(Script) and am consistently missing it during my day job.
chr15mop6 days ago
No regrets. As a solo dev I can use whatever I want and I use ClojureScript for almost all projects. I've been writing code for decades, used dozens of languages, and nothing comes even close to the DX affordances of cljs. It's an absolute joy.
raspasov7 days ago
I think the question is for other projects: How come you've not chosen ClojureScript? ;)
h4ch17 days ago
This takes me back to 2019 when me and my team won HackInOut, a hackathon held in Bangalore, India by building Rosaline, a generative drum machine, that took in lead melodies (guitar tracks, piano samples, etc) and generated a full fledged drum track.
Used GANs & a lot of weird hacky optimizations, can't even find the code for it anymore, but it was a great time :)
https://devfolio.co/projects/rosaline
This is all that's left of it
chr15mop6 days ago
Looks cool! It's a much more difficult problem than it looks - great that you got something working.
gabriel666smith6 days ago
Love this!
One thing I'd find frustrating if using this when working on music: "When beat is playing, get new sample for drum plays as soon as it generates".
If "this sample is programmed to play in playing beat", then it'd be good to do a silent replace, or have the option to, so that you don't get a weird unquantized snare sound, for example. I'm finding it puts me off the generated sound more if I initially hear it in a context where it doesn't fit.
chr15mop6 days ago
That's a good point. Will fix, thanks.
gabriel666smith4 days ago
No - thank you. Really fun drum machine.
marksholms6 days ago
Thanks for building this. Really inspiring and great work.
ClojureScript is such an awesome secret weapon for building web apps. I started building a similar web audio looping app using borkdude's scittle version of ClojureScript. Only once the app had grown substantially, did I move on to proper ClojureScript. The cljs development experience is just awesome.
chr15mop6 days ago
Sounds like a fun project! I also love that you can start out lightweight in Scittle and then switch to compiled cljs fairly seamlessly if your idea takes off. Such a nice dev experience!
WesleyJohnson6 days ago
Very cool and quite fun. I love that you used Clojurescript. I played with it years ago and have been meaning to get back to it.
One piece of feedback; I'd love an option to toggle background color of everything nth note. Makes it easier to place on beat.
chr15mop6 days ago
Will add this, thanks for the suggestion!
spapas827 days ago
I had also build a similar (non polished) app using js: https://boombox-agw.pages.dev/
It also includes a bunch of greek rhythms; try tsifteteli!
chr15mop6 days ago
Very cool! Love greek music, ancient and new.
viccy-kobuletti6 days ago
That background really captures the look of a dirty laptop display. I was actually taken aback at first, thinking that I must have somehow sneezed over my screen without realising!
amelius7 days ago
Thanks for making this a web app, and not some app that only runs on half of the phones/tablets out there.
chr15mop6 days ago
I'm all in on web apps! The browser is an incredible runtime. I do not think I will ever touch native code again.
monneyboi7 days ago
Dope!
One thing I notice is that the generated beats are very alike. Yeah it makes sense to play snare on the 2 and the 4, and to have kicks always fall on the downbeat, but you'd get more creative grooves if you allow for some more variation there.
It could even be a slider that allows you to stray away from the common patterns.
weego6 days ago
I really like it, and the FX option is a really fun addition on top of where most people get to. One ask I'd have is for FX to stay "on" and duplicate what was put down for each new cell until it's turned off again? It's a tiny thing.
chr15mop6 days ago
That's a good idea. Will investigate, thanks for the suggestion!
thw_9a83c7 days ago
Nice work! Nice that you also implemented an MPC-style swing. How do you generate samples? Are they also procedurally generated or are they chosen from a fixed set of samples? I suppose you're not planning to release any sources for this...
s20n6 days ago
I found some repositories related to this on OP's github page <https://github.com/chr15m?tab=repositories>
This is the repository for the webaudio functions <https://github.com/chr15m/cljs-dopeloop>
recursive6 days ago
What is Mpc style swing? Does that mean you can push the swing beats all the way to the next time slice?
thw_9a83c6 days ago
> What is Mpc style swing?
You can get an explanation directly from the MPC 3000 manual [0].
> Does that mean you can push the swing beats all the way to the next time slice?
At least the original MPC series couldn't move the note to the next time slice. The maximum setting was 75%. That made the first note of each pair of 1/8 or 1/16 notes three times the length of the second note.
[0]: <https://www.manualslib.com/manual/207365/Akai-Mpc-3000.html?...>
recursive6 days ago
Thanks.
That sounds like a very normal and unremarkable swing implementation, like I've used in every DAW and sequencer. But maybe MPC did it first, and I've been using MPC-like swing this whole time.
chr15mop6 days ago
Beat Maker's maximum swing setting is 132% greater than the MPC. I'll add this to the marketing materials, thank you!
RigelKentaurus6 days ago
Cool tool! I often play odd time signatures, e.g. I'm trying to program the drums for Rondo ala turk by Dave Brubeck (repeating 2-2-2-3 pattern). Can you tell me how I can do that?
chr15mop6 days ago
Sorry, this drum machine cannot do 9/8 time.
ericyd6 days ago
It's not very mobile friendly but on desktop it's a pleasure! The ability to generate waveforms feels pretty novel, well done.
dmje6 days ago
Really great, very responsive, fun, like the fact you can download your work in lots of different formats. Ace!
raspasov7 days ago
Very nice! ClojureScript rocks. Just curious, did you use any React for this, or is it vanilla HTML interop?
diggan7 days ago
> view-source:https://dopeloop.ai/beat-maker/js/main.js
> CTRL+F "React"
> 93 matches
Somewhere there is a React lurking :)
Guessing it's via Reagent as it's also mentioned 8 times, and is a fairly traditional approach to frontend with ClojureScript.
chr15mop6 days ago
Thanks! Yes, it uses React via Reagent.
ratelimitsteve6 days ago
already using this to practice randomized beats on my drum pad. this is dope, thank you.
chr15mop14 hours ago
That's awesome! I never thought of this use case. Thank you for letting me know.
ratelimitsteve8 hours ago
I've been playing for a couple months now and I'm getting to a point where the basic 8 hat 4 bass 2 snare beat is coming naturally, but now I need to work on keeping each limb independent of all the others. The way your system does 8ths on the hat then randomizes the snare and bass helps me break out of that pattern, and being able to visualize the beats as loops is a lot easier for me than reading sheet music. I'm really having a lot of fun with this.
mclau1577 days ago
Is this able to be used with Strudel the code-based beat maker?
chr15mop6 days ago
I suppose you could import the samples into Strudel?
nonethewiser6 days ago
Pricing page could say what the features are
Seems like a cool, simple app
chr15mop6 days ago
Good point, thanks. I need to improve the pricing page and I will note this down for when I do.
asimpletune7 days ago
This is wonderful work. Thanks for sharing.
sakrist7 days ago
awesome tool! would be more usable to scroll horizontally as one page and ability to add verticals one at a time.
phrygian7 days ago
very nice, enjoy listening to the beats. also good to see something come out of Clojure land after a while
hdb27 days ago
this is really great, I like it!