HN Explorer

Show HN: I built a website for sharing drum patterns (drumpatterns.onether.com)

495 points by wesz ↗ HN
Originally started as a project to restore patterns from now defunct website 808.pixll.de just for myself, but eventually i decided to share it with others. I've seen this website mentioned a couple of times on HN:)

Currently it only supports Roland TR-808, but there will be more.

196 comments

[ 3.7 ms ] story [ 227 ms ] thread
lasarkolja
Can't open the link, no https
madphilosopher
Just curious, is this a corporate network restriction, or something you've configured your web browser to block? This is the first time I've seen this as a problem for Hacker News folks.
wesz
I had to regenerate ssl cert, give it some time and try again.
bqmjjx0kac
Nice work! It might be nice to hint to iOS users that they should disable silent mode via the little side toggle if they want to hear anything. Just a quirk of iOS that took me literally years to figure out -- I assumed it just didn't support the Web Audio API and went on with my life.
donbrae
Or as the developer you can play some silent audio in the background via an `<audio>` element: https://github.com/donbrae/onscreen-piano-keyboard/blob/main.... This will ensure the Web Audio API produces sound even with the ‘silent’ switch active.
wesz
Interesting, i already do something similar and never had a chance to check if it really works. Here is my code:

var buffer = dm.audio.createBuffer(1, 1, dm.samplerate); var source = dm.audio.createBufferSource();

source.buffer = buffer; source.connect(dm.audio.destination);

if (source.start) { source.start(0); } else { source.noteOn(0); }

jaflo
I believe you need to use the audio element specifically. The Web Audio API is subject to different restrictions than the audio element. I used a similar approach on Audjust: https://www.audjust.com/blog/unmute-web-audio-on-ios/

(nice site you created btw! I love seeing audio stuff for the web)

wesz
Thanks mate! I'll implement your solution:)
matteason
I hit this on https://ambiph.one - my solution ended up being similar (use an <audio> element) but because I also wanted audio to play in the background and when the screen is off there's an extra step of tricking Safari into thinking it's playing a livestream, since apparently that's the only kind of audio Apple thinks should be allowed to play in the background.

Coincidentally someone asked me about this the other day so I put together a minimal demo here in case it's useful to anyone: https://codepen.io/matteason/pen/VYwdzVV

MomsAVoxell
Do you mean the hardware slide toggle? I’m on an iPad on iOS and I can’t get sound working, no matter what. My iPad doesn’t have a mute toggle.
bqmjjx0kac
Yes, exactly. This is on an iPhone, to be clear. Maybe the control center on iPads has an equivalent software toggle? Sorry, that probably isn't very helpful.
moritzwarhier
Thanks, I fiddled with the volume and would have given up without your advice.

And this web app is indeed very cool. Enviable idea & execution!

cdiamand
Great stuff! You're missing a few bass drum notes in "When the levee breaks"
wesz
You can click on the pattern, then click on the link below "Create a copy" and add missing bass drums. It's like forking a drum pattern lol.
chaosprint
I would be happy to port some patterns to Glicol (https://glicol.org/)

only suggestion: support https...

phyzix5761
Honest question. What is the current obsession with https for things that don't need to be secure like looking at drum patterns?
chaosprint
there is a login
phyzix5761
For the login I completely understand but most pages don't need to be secured in my opinion.
binarysneaker
Secure it all vs secure just the login...may as well do it all.
rubendev
If you only secure the login you will be sending your session cookies unencrypted for the other pages and they can be intercepted and used to impersonate you.
CPLX
Browsers seem to lose their mind when presented with not HTTPS content these days right?
hirako2000
Perhaps they shouldn't but that forced the hands of many who would have otherwise dragged their feet for another century.

I get bothered by it, Chrome doesn't even allow to confirm and proceed at the boom of the warning page anymore, but there is some flag you may disable if you feel safe about all your visits.

Hopefully Google will start flagging ipv4 servers too. And one day block them by default.

whstl
For me: wi-fi and mobile providers injecting ads. Rarer these days but still happens.
ctxc
I would rather everyone use HTTPS than have them individually decide if it "needs to be secure".
phyzix5761
Why is that?
kadoban
The downsides of being secure are a 5 minute setup, once. The thought process of "should this be secure?" is 10 minutes even if the answer is obvious.

So why bother? Just be secure and move on.

otabdeveloper4
Https does nothing for security.

Its purpose is to authenticate financial transaction packets, not to be "secure". (Whatever that means.)

g105b
You need 9 more minutes of thought process.
otabdeveloper4
No, I need exactly 0 seconds to process empty buzzwords in the vein of "add Frobnozz to your TCP/IP, Frobnozz increases security bigly!".
kadoban
There are zero buzzwords. I was just being vague because again, the cost of just flipping https on is negligible, it's literally more work to have this conversation and work out all of the details of exactly what attacks you're protected against.

It is never worth asking "should I even do https?" The only variation worth considering is "is https enough?" And even then, start with https and then build on top.

otabdeveloper4
HTTPS does nothing for security. (Except in very rate and specific cases that aren't important here.)

> The only variation worth considering is "is https enough?"

Enough for what exactly? Since this charade clearly isn't about security, what exactly is the metric for "enough"?

ziddoap
>Https does nothing for security.

What sort of definition are you using for security? It's obviously not the standard one.

Sending passwords in the clear vs not is covered on the first day of security 101.

otabdeveloper4
Any sort of definition of "security" will need to start from the threat model.

Which you don't have, because you're not doing security. Just buzzwords.

ziddoap
The threat model is really simple, actually!

"I don't want other people to know my passwords".

Perhaps you don't understand what HTTPS does. Which is totally fine! Lots of people don't really get it (or even need to). But yelling "buzzwords" for the things you don't understand doesn't make the usefulness go away.

For someone so wrong about this, you're very opinionated! It's quite a dangerous mix. Thankfully, not dangerous to me, so I can just have a little chuckle and move on.

kadoban
It does quite a lot for security. It prevents evesdropping (to an extent, better with esni), disallows ad/malware-injection or content modification, and prevents credential sniffing. It does all that against most reasonable attackers, up to around the rough ballpark of nation states.

All for the price of about the same amount of work that it took to read this message.

"Https is only for credit cards" is some serious 1990s bullshit.

globular-toast
Security is: confidentiality, integrity, availability. HTTPS gives you two of those. Well, as long as you trust the CAs that came installed on your computer that is.
bigstrat2003
Because securing things that don't need to be secured (which is most of the Internet, frankly) is a waste of time and effort. Unless you are handling credentials or other sensitive data, you don't need TLS and shouldn't bother.
IAmGraydon
There's a login, but also if you aren't https, you're going to be seriously de-ranked by search engines like Google.
jtafurth
I worked for an authority that issued digital certificates for SSL and digital signatures. It's not only about providing encryption but also about trust, when a top level entity issues a SSL certificate, a number of identity validations are carried out, adding an extra layer or confidence on that website.

This may seem inconsequential for static websites without PII, however most browsers consider it important as it reduces the risk for all parties involved when encrypted communication is used and the content providers has taken basic steps for Identity verification.

There are logic flaws with this approach to security imo, but it's the most commonly used technique at the moment.

sergiotapia
you didn't answer the _why do we need all that for a drum beat making website_?
jdiez17
Unauthenticated http is a vector for opportunistic malware. They don’t target specific websites, just inject evil.js wherever.
otabdeveloper4
You ISP sniffing and MiTMing traffic on the wire is the least likely vector of malware injection.

ISP's are usually serious businesses with reputations and don't hack their own customers.

latexr
That “usually” is doing a ton of work. I remember Vodafone injecting scripts into webpages many years ago. While trying to find a source, I bumped into other shenanigans.

https://www.simpleanalytics.com/blog/vodafone-deutsche-telek...

otabdeveloper4
Out of all the bad actors on the Internet, your ISP is the least bad.
[deleted]
(comment deleted)
latexr
That’s not a valid defence, it’s moving the goalposts and whataboutism. ISPs shouldn’t be bad actors at all and they have the ability to do the most harm.
kube-system
Maybe if they live in a high income country with relatively strong consumer protections and are using their home ISP. But quite a lot of the internet is very much not that.

In some places and on some networks, MiTMing http traffic for undesirable use-cases is routine.

nklymok
At least so that login / register data don't go to the middle man.
otabdeveloper4
You don't. But you will be penalized by Big Co for not supporting https.

(It's effectively a "doing business on the Internet" tax. Thankfully not that expensive for small hobby projects now.)

nerdponx
It's literally $0 with LetsEncrypt.
lemax
ISPs / other middlemen can monitor and modify unencrypted traffic. In Egypt, Syria and Turkey for example ISP’s injected malware into unencrypted sites that led people to install spyware when attempting to download legitimate programs (link). Other state actors have changed the content of news media, etc. Without HTTPS you lose the ability to trust the integrity of a given webpage.

https://www.bitdefender.com/en-us/blog/hotforsecurity/turkis...

webprofusion
Chrome labelled sites as Not Secure if they didn't user https since 2018. Most people didn't like that label showing on their website address, so it was a clever way to shift everyone.

Years before that the free certificate authority Let's Encrypt was established (there are now several more), so for most people using https with your website is just configuration, not an extra cost. On top of that some http protocol versions are now https only.

MisterTea
Would you trust handing a sack full of money to a stranger and tell them to bring it to the bank for you or do you hire an armored car service?

We need https because the modern web browser isn't a trustworthy or secure program. A web browser isn't a sandbox so code can be injected into an insecure http stream to force the browser to compromise the machine it is running on. This is just the state of the internet - there are literal highwaymen in the form of malicious routers and other networking hardware on the internet. https is unfortunately the ony way to ensure the highway for your data is secure and the data arriving to you is trustworthy.

The only way to avoid this is to use a browser like netsurf that eliminates the insecure modernity or dont use the web.

pbreit
That ship has sailed. http has been retired.
bigstrat2003
It hasn't been retired. Using HTTPS everywhere is cargo cult nonsense. Most sites do not benefit from it, and the push to have it everywhere is obnoxious as hell.
hirako2000
It was obnoxious, let's encrypt solved that from the operator's perspective.

Man in the middle attacks are very real. A good ratio of routers get hacked during manufacture, or have a backdoor that get exploited by other hackers. an http hits make these exploit even easier to execute. Public WiFi are often insecure, https works around that problem (for the most part).

From an attacker perspective, widespread https has become obnoxious, yes.

GuinansEyebrows
The prevalence of good advice is obnoxious? Or is it the five minutes' labor of setting up https for your services that annoys you?
wesz
Woah, nice work dude.

I had to regenerate ssl certificate, ovh says it's done but it will probably take some time to take effect.

[deleted]
(comment deleted)
[dead] 0_-_0
[flagged]
dr_kiszonka
Hi! I was very confused about Glycol until I discovered that the desktop version of your site shows way more information than the mobile one. At least in Chrome for Android, you can only select demos to play and click the GitHub link. And GitHub recommends visiting glicol.org, so why do so many people rave about Glycol? Now I know :)

I was wondering if you would be adding any IDE-like features. I like a few features in Sonic-Pi and noticed a few attempts to make a VS Code plugin for it. (I wish I could contribute myself, but my music production skills are atrocious and I mostly rely on GUI-based software to carry me.)

Congrats on an awesome project! (And you, OP, too!)

xingwu
What a rabbit hole and a great use of my precious hour after I put my kid to sleep, thanks for sharing!!
desertmonad
Great work and nice site. Add generic midi so patterns can be mapped to any voice!
wesz
I'm working on adding other drum machines (currently Yamaha RX-5 and Oberhiem DMX), not sure if i'm gonna end up adding generic midi. However, you can download current patterns as midi.
tttym
Nice enjoyed playing with it. How long did it take you to write it? I have been involved in a couple of simmilar projects and I was surprised how much It took us, (we used TypeScript) on Next.js
wesz
Everything took probably around 3-4 weeks, but it was spread around a couple of months. I wrote custom web crawler for web archived 808.pixll.de, pattern extraction tool from crawled data. Then i worked on the pattern player and finally started working on the website. Originally i planned to write website from the scratch, but in the end i decided to use WordPress. I have too much side projects already:)
dmje
I really, really liked that you use WordPress - in my opinion it's a hugely overlooked platform for making really solid products / software. I've built a bunch of dashboards, SaaS tools and other things - once you understand the templating it's so easy to knock out stuff. Nice work!
rossjudson
Great work; focus down on the patterns, no distractions. Nice!
bbx
Very nice. I'd suggest adding a metronome option, so that we know where the 1 is.
wesz
Thanks, added to the TODO list.
pacifika
Nice work left a few patterns under the cloudseer moniker
sfilmeyer
Nice, I really enjoyed listening to a couple of the ones you added. They were at the top of the page when I loaded it, and I listened to and enjoyed them before connecting them with your comment.
wesz
Yoo, great patterns. I'm working right now on procedural pattern generation to help with brainstorming ideas.
pacifika
Thanks for making this, it’s super approachable which helps the fun.
throwaway2562
Very cool, and great selection of tracks.

It would help a lot if a track had breaks and fills as well as the main rhythm.

wesz
Originally on 808.pixll.de most of the tracks had fills and all that, but they are lost unfortunately. This is the only parts i was able to restore.
FranchuFranchu
Hi! Great work! Could you add support for other amounts of measures such as 3/4?
wesz
Sure thing! Adding to todo list.
IAmGraydon
Love this. Bookmarked - going to import some of the patterns into Ableton later.
wesz
You can download each pattern as a .mid file and it should map correctly to percussion channel.
kazinator
Is everything based on a division of the measure into 16 equally spaced beats?

There is so much more to rhythm.

Like, for starters, oh, triplet eighths?

They come up often, and with them, you can have a heavy form of swing (triple 8 swing).

Oh, never mind, I see this is geared toward a piece of drum machine hardware from 1980.

wesz
There will be more drum machines available as the time goes, same goes for different time signatures etc. I just wanted to share the progress on the side project i was seating on for a couple of months.
latexr
Your comment as written comes off as elitist snark, which is likely why you are getting downvoted. You could’ve instead phrased it as a list of suggestions, tips, or feature requests. OP is sharing for free something cool they made for themselves on their free time. We need more independent fun stuff like this, don’t discourage a better world.
kazinator
Good guess, but the comment hit +3 at one point.

The project cannot take tips in this area because it's geared towards programming vintage hardware. It first has to add hardware models which have more advanced sequencing. See sibling comment.

rajangdavis
This is great, thanks for sharing.
wesz
Thank you for contributing patterns:)
jader201
Nice site!

One bit of feedback I don’t see mentioned. This may be an iPhone thing, but my experience is that the visuals are about a quarter beat ahead of the audio (at 60 BPM, so about 200-250ms off).

Not a big deal, but definitely enough to make it feel a bit off.

Again, could be just the nature of audio in Safari on iPhone.

wesz
I think i can see it now too. I see a couple of things that can cause this, here are 3 solutions, could you check them out and see if it's any better? My best bet is on the third link.

http://drumpatterns.onether.com/?audio=1 http://drumpatterns.onether.com/?audio=2 http://drumpatterns.onether.com/?audio=3 <- check this one out first

padenot
Hi, https://blog.paul.cx/post/audio-video-synchronization-with-t... (I'm the author) will have some info about what is happenning and what to do.

You're out of luck on Safari because it seems that the important APIs aren't implemented yet: https://developer.mozilla.org/en-US/docs/Web/API/AudioContex... (scroll down). This means this cannot be made correct, e.g. there will always be a desynchronization when using high latency audio output devices such as anything wireless. Their handhelds (on which non Safari is not allowed) and their MacBooks, in wired/built-in speaker mode have excellent latency figures and we can get away with not doing anything explicit there, granted the audio is not happening somehow before the visuals, that is jarring for a human. A bit late is a lot more natural if it can't be exact.

lmk if you need further details on tight synchronization of real time audio and visuals, padenot@mozilla.com, happy to help, and congratulations on the delightful websites!

wesz
Thanks, sent you an email.
sarreph
This kinda reminds me of Funklet[0] that Jack Stratton (Vulfpeck) + Rob Stenson made a long time ago... A true gem if you're into funk + like midi drums.

[0] - https://goodhertz.com/funklet/

wesz
Woah, thank you for this! It's pure gold:)
metalman
thats all right messing with the back beat, and drum sounds, and whatever the reverse signal thing is vera extra funky
wigster
very cool.

i would suggest maybe the instruments vertical order should be reversed. i think it is more usual to have the bass drum at the bottom, thru snare up to hh etc.

i think this maps more like a piano roll with typical midi key/drum assignments.

s1mon
I came here to say the same thing. General MIDI defines the sequence of the drum sounds. Unless there's a really good reason to deviate from that, it is a standard.
wesz
So, if any of you guys have any specific ideas on how i should approach that please contact me via luhasz.wesz at google mail.
hackerdood
Since you’re porting the 808’s sounds/panel I understand the order you have matches it. I also agree it should be reversed if only because the kick/snare are lower frequency sounds and the hats are higher frequency and that would map better to reversing the direction that is currently on the site.

Love this btw, it will be fun to noodle on this when I’m away from the studio

tacker2000
Nice! Gonna try some of these on my TR8S
sen
This is awesome. I'm no drummer but have always loved percussion in general, so just had a lot of fun playing around.

My only tip would probably be a way to click (right-click since left-click is used?) the abbreviation for each instrument to hear it play once, or when you place a beat have it play that instrument once. The guide for which abbreviation is which instrument is above the fold when actually placing notes, so it's lots of scroll back/forth checking what's what again.

wesz
I added titles for instruments, so now when you hover with your mouse over the two letter label it should show you the full instrument name.

I think adding playing samples on left click should be fine, added to todo list.

Also, it should be easier to make pattern on play mode, so you have atleast some feedback.

stosssik
This is fantastic — simple, fun, and with just the right vibe for exploring ideas quickly. I love how focused it is: no clutter, just straight into the groove.

Do you see this staying as a passion project, or are you considering a business model at some point ?

wesz
Thank you!

I'll be working on some procedural stuff for patterns and variations to make exploring ideas even better. It's definitely passion project.

michaelmior
Very cool! Reminds me a bit of this visualizer I built a few years ago.

https://michaelmior.github.io/rhythm-wheel/

wesz
It's super fun to mess around. I think i found a bug - https://imgur.com/BRwst17 - in this setup kick triggers on red instead of green? Or am i tripping?
michaelmior
That doesn't seem to happen for me. If you lower the BPM (the value on the right is a non-obvious text input) does it still seem to trigger incorrectly?
wesz
Nope, it's all good:)