TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: The simplest drum pattern composing algorithm I could come up with

11 pointsby rurtrackover 2 years ago
Hi there, my name is Jay. Making music and writing software have probably been the two biggest pleasures of my life -only after my family. My team and I recently started a long journey of trying to completely change the way people create music, and as it usually happens with any long journey, it all starts with small steps. One of those small steps was to build https://drummy.io, or "Dummy Drums," a very simple yet useful drum machine that stores the entire drum pattern in the hashtag of the URL. There is no backend. Fully served by a CDN. If you wanna learn how to build your own drum machine in Javascript using the WebAudioAPI, here's an amazing read: "A tale of Two Clocks." (https://web.dev/audio-scheduling/). Also, check Howler.js (https://howlerjs.com/), a rock-solid library with a great community. Anyway, not long ago I noticed the dummy drums site hasn't been getting much traction, but I think I figured out why. Most of the new users are getting frustrated because it is very easy to get stuck trying to come up with a fresh drum pattern, and so https://twitter.com/DrummyBot was born! A function written in less than an hour that comes up with pretty decent rhythms. While not in any specific style, and no ability to choose settings or tune it, it may still be a great kickstarter for that new beat you just can't seem to find. It is like the opposite of a fancy AI that seems to be so hot these days. If you think DrummyBot can help you get inspired, just follow it on Twitter. The bot publishes a new pattern every hour, and even tries to give it a name using PHP's Faker library. You can also simply go to https://drummy.io and use the magic wand button to get a fresh pattern with each click! The function is totally randomized, you will never get the same pattern twice, and customizing literally requires just a few seconds. I hope you like it, and of course, all feedback is gladly welcome!

5 comments

michaelmiorover 2 years ago
Very cool! This reminds of an experiment[0] I made a while back for an alternative pattern composing interface based on the book &#x27;The Geometry of Musical Rhythm: What Makes a &quot;Good&quot; Rhythm Good?&#x27; by Godfried Toussaint.<p>[0] <a href="https:&#x2F;&#x2F;michaelmior.github.io&#x2F;rhythm-wheel&#x2F;" rel="nofollow">https:&#x2F;&#x2F;michaelmior.github.io&#x2F;rhythm-wheel&#x2F;</a>
评论 #32930417 未加载
atentatenover 2 years ago
As someone who has been in music production and software engineering, I appreciate this. I&#x27;ve also read the article you mentioned when looking at audio latency issues across the web and hybrid mobile app platforms (react native, flutter, ionic capacitor). I immediately found that the web audio API was pretty very solid with it&#x27;s AudioContext, but there was some audio recording latency on Chrome for Android (hardware plays a role too) and the hybrid app frameworks all had issues with playing back on time, with the audio libraries for flutter being the most solid. My app needed to be able to play two audio tracks exactly at the same time. Anyway I think what you have done is really neat and wish you much success. I&#x27;m wonder how most of the users are using it.
评论 #32928746 未加载
ccvannormanover 2 years ago
Love the simplicity and immediacy of the interface. Storing the pattern in the URL is also awesome, have you considered compressing the string to shorten to URL? (or is it maximally compressed? I guess we can&#x27;t know..lol)<p>Here&#x27;s a random beat I made in about 2 minutes. <a href="https:&#x2F;&#x2F;drummy.io&#x2F;#&amp;p;,eJwz0TE20jE0MtAx0THUMQBjGETnI0SR5TBVEAsNSaSJNY9aEN1_xLjTEK-8IZw2hNOGSHzK_EPIHTQOPwAsVmmT,t,eJwrz89NygcABo4CJQ" rel="nofollow">https:&#x2F;&#x2F;drummy.io&#x2F;#&amp;p;,eJwz0TE20jE0MtAx0THUMQBjGETnI0SR5TBVE...</a>
评论 #32928691 未加载
atentatenover 2 years ago
Side note: I found <a href="https:&#x2F;&#x2F;recme.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;recme.io&#x2F;</a> in the footer, but on Safari 15.1&#x2F;macOS 12.0.1 recordings result in an error.
评论 #32928918 未加载
rurtrackover 2 years ago
It really all boils down to these 20 lines of code!<p><a href="https:&#x2F;&#x2F;jsfiddle.net&#x2F;rLesqw05&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jsfiddle.net&#x2F;rLesqw05&#x2F;</a><p>The rest of the function is setting up the chances[] array and randomizing length, bpm and figure