Show HN: I built one of the most advanced web-based drum/beat sequencers

Show HN: I built one of the most advanced web-based drum/beat sequencers(maximecb.github.io)

4 points by maxime_cb 18 days ago | 2 comments

Hi there! Just wanted to share an open source music project I've been working on. There are already a number of web-based drum machines, but I think most of them are pretty basic (small fixed drum kit, single pattern, no effects, etc), so I built something more advanced.

The app is live here: https://maximecb.github.io/groovie

The GitHub repo: https://github.com/maximecb/groovie

I'm calling it Groovie, and notably, it has a timeline view so you can arrange up to 32 patterns into a song. It has 150+ samples you can select from. You can adjust the panning and volume of each row individually. It has delay as well as an LPF/HPF filter and swing. It has the ability to send a MIDI clock signal so you can sync it with your hardware (Chrome only), and lastly, it works on mobile phones and tablets too. I designed the interface to be intuitive and to use fairly standard design language (I hate cryptic UIs).

The app is fully static with no backend, but you can share beats/tracks with others as they can be encoded into the hash part of a link, in a compressed format. It uses multiple tricks to try to shrink the data since many patterns are repetitive, sparse, or reuse data from previous patterns.

Since it's open source and fully static, it's free forever. You don't need any kind of account to use it. You can't upload new samples in the app, but I am very much open to accepting contributions (pull requests) for new samples, but they have to be public domain / CC0 / out of copyright. I would love to get more vocal one shots and more metallic sounds. One idea I had was to maybe sample old movies that are out of copyright.

For those who like to play with Claude Code, I added a "make a beat" Claude skill to the repo that will generate an arrangement based on your description and give you a shareable link. It might also work with other AI assistants if you point them to the skill (untested, let me know).

Let me know what you think. If anybody wants to share some patterns they create, I would love to add them as new examples in the readme.

prologic 18 days ago |

This is very cool! What inspired you to create this?

maxime_cb 18 days ago | |

Thanks :)

I've made a couple of music apps over the years, including one of the oldest JS music apps on the web, that also does URL encoding: https://pointersgonewild.com/2012/04/23/musictoy-music-made-...

But also generally, I was looking at other web-based drum machines, and most of them are either super basic, full of ads, or they have bad cryptic UIs. I also wanted to design a more advanced sequencer with a timeline that would have an intuitive UI to work with.

I built a sequencer in NoiseCraft, a browser-based music programming language I built a few years ago (e.g. https://noisecraft.app/101), but you can't chain pattern in this sequencer, which makes it harder to create longer piece (though people have found workarounds).