13 ms·
Show HN: I built a website for sharing drum patterns
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.
- rajangdavis 2y agoThis is great, thanks for sharing.
- wesz 2y agoThank you for contributing patterns:)
- lasarkolja 2y agoCan't open the link, no https
- madphilosopher 2y agoJust 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.
- lasarkolja 2y agoFirefox (@Android) blocked it.
- wesz 2y agoI had to regenerate ssl cert, give it some time and try again.
- bqmjjx0kac 2y agoNice 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 2y agoOr 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/src/index.js#L160-L179 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 2y agoInteresting, 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 2y agoI 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/ https://www.audjust.com/blog/unmute-web-audio-on-ios/ (nice site you created btw! I love seeing audio stuff for the web)
- wesz 2y agoThanks mate! I'll implement your solution:)
- matteason 2y agoI hit this on https://ambiph.one 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 https://codepen.io/matteason/pen/VYwdzVV
- cdiamand 2y agoGreat stuff! You're missing a few bass drum notes in "When the levee breaks"
- wesz 2y agoYou 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.
- spapas82 2y agoI had built something similar (but much less refined) for greek rhythms https://boombox-agw.pages.dev/ https://boombox-agw.pages.dev/
- chaosprint 2y agoI would be happy to port some patterns to Glicol (https://glicol.org/ https://glicol.org/) only suggestion: support https...
- phyzix5761 2y agoHonest question. What is the current obsession with https for things that don't need to be secure like looking at drum patterns?
- chaosprint 2y agothere is a login
- phyzix5761 2y agoFor the login I completely understand but most pages don't need to be secured in my opinion.
- binarysneaker 2y agoSecure it all vs secure just the login...may as well do it all.
- rubendev 2y agoIf 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 2y agoBrowsers seem to lose their mind when presented with not HTTPS content these days right?
- phyzix5761 2y agoExactly
- desertmonad 2y agoGreat work and nice site. Add generic midi so patterns can be mapped to any voice!
- wesz 2y agoI'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.
- metalman 2y agoHeres a stand alone android drum machine with some good sounds, dont know if its the patterns are portable. Drum On, tiny apk. https://f-droid.org/en/packages/se.tube42.drum.android/ https://f-droid.org/en/packages/se.tube42.drum.android/
- mamonoleechi 2y agothanks to share this ; i had no idea of the existence of this gem! the interface is a bit rough, but it does the job
- tttym 2y agoNice 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 2y agoEverything 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 2y agoI 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 2y agoGreat work; focus down on the patterns, no distractions. Nice!
- bbx 2y agoVery nice. I'd suggest adding a metronome option, so that we know where the 1 is.
- wesz 2y agoThanks, added to the TODO list.
- blackdorn 2y agoI really like it!
- pacifika 2y agoNice work left a few patterns under the cloudseer moniker
- sfilmeyer 2y agoNice, 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 2y agoYoo, great patterns. I'm working right now on procedural pattern generation to help with brainstorming ideas.
- throwaway2562 2y agoVery 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 2y agoOriginally 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 2y agoHi! Great work! Could you add support for other amounts of measures such as 3/4?
- wesz 2y agoSure thing! Adding to todo list.
- IAmGraydon 2y agoLove this. Bookmarked - going to import some of the patterns into Ableton later.
- wesz 2y agoYou can download each pattern as a .mid file and it should map correctly to percussion channel.
- kazinator 2y agoIs 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 2y agoThere 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 2y agoYour 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 2y agoGood 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.
- jader201 2y agoNice 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.
- ozornin 2y agoYes, I experience the same on desktop Safari.
- wesz 2y agoMaybe this helps? http://drumpatterns.onether.com/?audio=3 http://drumpatterns.onether.com/?audio=3
- wesz 2y agoI 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=1 http://drumpatterns.onether.com/?audio=2 http://drumpatterns.onether.com/?audio=2 http://drumpatterns.onether.com/?audio=3 http://drumpatterns.onether.com/?audio=3 <- check this one out first
- padenot 2y agoHi, https://blog.paul.cx/post/audio-video-synchronization-with-the-web-audio-api/ 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/AudioContext/outputLatency 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!
- wigster 2y agovery 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.
- wesz 2y agoI based it off the order on the original site - https://www.reddit.com/media?url=https%3A%2F%2Fi.redd.it%2Fbrlws1a4xuvb1.png https://www.reddit.com/media?url=https%3A%2F%2Fi.redd.it%2Fb... I'll definitely add the option to reverse the order in user settings. If more people mention it i'll make it the default.
- s1mon 2y agoI 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 2y agoSo, 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 2y agoSince 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
- sarreph 2y agoThis 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/ https://goodhertz.com/funklet/
- tacker2000 2y agoNice! Gonna try some of these on my TR8S
- sen 2y agoThis 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 2y agoI 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 2y agoThis 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 2y agoThank 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 2y agoVery cool! Reminds me a bit of this visualizer I built a few years ago. https://michaelmior.github.io/rhythm-wheel/ https://michaelmior.github.io/rhythm-wheel/
- adentranter 2y agoThis is actually really cool way to show it. Love it.
- michaelmior 2y agoCredit for the idea goes to Godfried Toussaint. https://www.amazon.com/Geometry-Musical-Rhythm-Makes-Second/dp/0815370970/ https://www.amazon.com/Geometry-Musical-Rhythm-Makes-Second/...
- wesz 2y agoIt's super fun to mess around. I think i found a bug - https://imgur.com/BRwst17 https://imgur.com/BRwst17 - in this setup kick triggers on red instead of green? Or am i tripping?
- michaelmior 2y agoThat 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 2y agoNope, it's all good:)
- andrewrn 2y agoThis is very cool and fun
- albinekb 2y agoAwesome! Some filters in the list views would be nice, and a way to change the playback BPM, samples etc. Keep goin!
- dbalatero 2y agoThis is cool–can you make it so the closed hat chokes the hi hat closed? I really like that feature in drum machines!
- captradeoff 2y agothis is really creative! would be fun to train on
- spoonfeeder006 2y agohttps://drumpatterns.onether.com/doofusbeatz666s-yowzah-2/ https://drumpatterns.onether.com/doofusbeatz666s-yowzah-2/ Ohhh yeah baby, this hits!
- wesz 2y agoThat's dope!
- askvictor 2y agoI've tried unsuccessfully to get Rebirth running (on either Windows or Wine). Any modern re-implementations?
- omneity 2y agoThis is amazing! Please consider adding PWA support so it can be installed as a mobile app. It’s super easy, just a manifest.json file to add which you can generate here [0]. Also are you considering adding more drumkits? Or maybe allow a user to set their own samples (stored locally, just for themselves) like you can change the header color in HN. 0: http://pwabuilder.com/ http://pwabuilder.com/
- wesz 2y agoNo problem, just added PWA to my todo list. Regarding the different drum kits, this is actually on the top of todo list, right know i'm working on Yamaha RX5 and Oberhiem DMX. They should be available in a day or two. Any drum machines you recommend?
- omneity 2y agoThanks! I’m a fan of 8-bit synthesizers but also classics like the Roland TR series (707, 808, 909, 08, 09)
- codedokode 2y agoI hate such sites. You open it to play for a minute and hours get lost. Also, when creating a new variation, a blank pattern is created. It would be cool if I could copy one of previous patterns and modify it instead of recreating it from scratch. Also, drums seem to not be balanced perfectly - in some patterns, when several sounds are playing simultaneously I cannot hear all of them. Are some drums too loud or is it a problem with me maybe?
- wesz 2y agoThat makes sense, will fix that. Regarding the balance of the sound i've also experienced that, not sure if it's sample pack i've used or something else, will investigate that.
- boguscoder 2y agoNot the same but reminds me of noisecraft vibes - https://noisecraft.app/532 https://noisecraft.app/532
- wesz 2y agoI've seen it before, pretty cool. If i remember correctly most of the implementation is done in software instead of using WebAudio nodes.
- greenwhite 2y agoLove this idea and the execution. Would it make sense to make this for synth patches or some other musical idea? I'm wondering if that's something you plan on exploring in the future?
- wesz 2y agoThere will be more drum machines, that's for sure. Do you mean custom/user provided synth patches?
- greenwhite 2y agoYea user provided synth patches for a vintage synth like a Moog or something. Not sure how feasible it is but could also be cool as a web app
- todotask 2y agoChange your favicon, at least make that a dot.
- wesz 2y agoAdded favicon.
- fatih-erikli-cg 2y ago[dead]
- flakes 2y agoPlease allow triplets! You're missing out big without a basic shuffle! I also second the other comments about ordering. Cymbals on top, snare and toms in middle, bass and other pedals on the bottom. e.g. hh |x-x-x-x-x-x-x-x-| S |----o-------o---| B |o-------o-o-----|
- nxpnsv 2y agoI guess you could make a 3x16 pattern but interpret it as a 4x12, so each beat is three steps...
- badmintonbaseba 2y agoThey don't roll over to the next 16 on playback automatically, which makes this very awkward.
- wesz 2y agoIs order CH, OH, CY, CB, MA, CL, HC, MC, LC, SD, BD, AC fine or need any other adjustments? There will be support for triples, soooon.
- unnamed76ri 2y agoI’ve never seen a drum pattern setup where the kick and snare are at the top. Usually from bottom to top it is something like: Kick, Snare, hihat, toms, various cymbals
- wesz 2y agoJust reversed it. Check it out.
- flakes 2y agoSome other ideas: - 2 bar patterns would also be great. Many patterns repeat over 8 quarters. - Allowing accents (dynamics). A lot of drum patterns involve just a few drums, where accents are what bring the pattern to life. With accents and triplets, you can have the Purdie shuffle [1], which is one of my favorite patterns ever :) :[1] https://tomtommag.com/wp-content/uploads/2011/10/Purdie-Shuffle.jpg https://tomtommag.com/wp-content/uploads/2011/10/Purdie-Shuf...
- 4wayfreedom 2y ago[dead]
- 4wayfreedom 2y ago[dead]
- tobyhinloopen 2y agoI love how half the links in the comments dont work on Safari
- frantzmiccoli 2y agoDoesn't work on FF on iPhone. Very nice otherwise!
- wesz 2y agoMobile support will be ready in a couple of days.
- mattjhall 2y agoReally nice work!
- squarefoot 2y agoI loved xoxo pattern based drum machines as a teen in the early 80s. Was never able to afford a 808 back in the day, but bought a DR110 back then. However I've always been mostly a hard / prog rock guy, so I see 16 beats pattern based drum machines as extremely limiting: no flams, no triplets, no effective rolls, no ghost notes, etc. The day I could buy a R8 was liberating, but in the end nothing beats real drumming on a real drum set.
- johnisgood 2y agoThere are categories (genres), and I thought if I click on one, it will insert that particular "dot" as such (same colors somehow, or some form of indication or visual feedback of the genre placed). Pretty cool nevertheless.
- aamorel25 2y agohi, would it be possible to parametrize the length of the loop ?
- wesz 2y agoProbably yes, check out in a couple of days.
- taikahessu 2y agoiPhone + Firefox, can't hear anything, moving along, sorry ...
- wesz 2y agoSorry to hear that, i didn't spend time to make it compatible with mobile devices yet.
- badmintonbaseba 2y agobug: when playing back an Nx16 pattern, and switching, then when rolling to the next pattern the very first beat is played from the previously played pattern instead of the current one.
- _spduchamp 2y agoAnyone here doing rhythm work without sequencers? I've been noodling with a side project for a couple years trying to figure out how to replicate folk drumming patterns by adding LFOs together and doing beats at the zero crossing. My aim is to create drumming patterns that can flow and evolve. Results are so-so. I cant seem to find much info on other doing this sort of thing. https://youtu.be/yVlgPoTpL94 https://youtu.be/yVlgPoTpL94
- rrherr 2y agoCheck out "African Polyphony and Polyrhythm", a presentation by Chris Ford at Strange Loop 2016. He uses Clojure to model traditional central African drumming patterns with variations. https://www.youtube.com/watch?v=EK4qctJOMaU https://www.youtube.com/watch?v=EK4qctJOMaU https://github.com/ctford/african-polyphony-and-polyrhythm https://github.com/ctford/african-polyphony-and-polyrhythm
- scarecrowbob 2y agoI'd think that the problem with LFOs is that they don't make it easy to think about rhythm- they are tied to specific times. So it's a hard tool for that kind of work. I've been enjoying tools like "euclidian rhythms" where you have a variety of sounds that all have a fundamental division of beat that they share but have differing numbers of beats-per-bar. I have a squarp pyramid sequencer that implements that quite well. You might look in that direction if you haven't already.
- wesz 2y agoSo, i've reversed the order of the instruments. Let me know what do you think. Audio and visual should sync better now, also fixed small issue pointed out by @badmintonbaseba. Creating new variation no longer creates empty pattern, it copies the previous one.
- taco_emoji 2y agoEDIT: nevermind, it's my stupid work proxy blocking the .WAV filetype :( On both Edge and Chrome on Windows 11 I hear nothing. No "sound" icon in the tab either to indicate that it's muted.
- james_marks 2y agoThis is beautiful, thank you for creating and sharing. I like the colors and interface for making a beat especially, great ergonomics.
- fryingneurons 2y agoVery cool! Similar to the drum sequencer at drumloopai.com
- Anthony-G 2y agoI’m not a music producer or drummer (just a beginner guitarist interested in how other music is made) but I think this is great. I noticed a typo when you mouse-over the CY, cymbal is mis-spelled with an extra ‘l’).
- wesz 2y agoUu, nice catch, fixed.
- ElijahLynn 2y agoThis is useful, I think this will help me actually learn drum stuff for my electronic music production that I'm learning now.
- motes 2y agoi love this! i wish i could use both MA and CP at the same time though for a particular beat im making here http://drumpatterns.onether.com/beat-2/ http://drumpatterns.onether.com/beat-2/ i cant wait for more samples to be added and triplets, had fun doing this on my lunch :) im not really a musician but i live with 2 producers so playing with them rubs off on me
- an_aparallel 2y agoNice site, a few things: 1.youre missing the 808 clap!? 2.nice to have: beat one of each bar to be slighly darker than the others. 3.And obviously in true feature creep style: pls implement some random feature i use in my daw
- 082349872349872 2y agothe maracas channel toggles to handclap (look just under the stylised-R of the Roland logo on: https://en.wikipedia.org/wiki/Roland_TR-808#/media/File:TR-808_-_MIM,_Phoenix_(2019-08-30_14.59.26_by_Bryan_Pocius)_(cropped).jpg https://en.wikipedia.org/wiki/Roland_TR-808#/media/File:TR-8... for the pair on the original front panel)
- an_aparallel 2y agoOh...im a child of the digital era (40 now) but never played an 808...pls ignore !! Had no idea they were set up like that.
- wesz 2y agoYou can click on small labels on the left to change some instruments. LC to LT (low conga to low tom), MC to MT (mid conga to mid tom), HC to HT (high conga to high tom), MA to CP (maraca to clap), CL to RS (claves to rimshot). I agree with the need for bar separation. The last one, yeah:))
- ProfessorPixels 2y ago[dead]
- wesz 2y agoNew stuff! - Fixed another thing with desync between audio and visual - Hi-Hat choking - when open and closed hat are placed on the same beat, the open hat is ignored and closed one is played on two channels as shorter note - You can now hold mouse down to paint pattern - Clicking on instrument label besides changing some instruments should also play a sound - Fixed cymbal spelling - Added clear and delete pattern buttons in "Create" mode - Ability to paste text (CTRL+V) representation in "Create" mode, it doesn't have to be the full list of instruments, but the pasted pattern should have 16 beats, here is the example: CH X-X-X-XXX-XXX-XX SD ---X-XX-----XXX- BD XX------XX------ AC X-XX--X-X-X-X-X-
- grepfru_it 2y agoPlease please work with hydrogen to provide premade drum patterns. It’s a great sequencer but no one has any premade patterns for it
- wesz 2y agoI can provide some kind of API for fetching patterns in MIDI if that helps.
- OhHiMarkos 2y agoReally cool! Bookmarked for inspiration when programming drums
- 331c8c71 2y agoDon't think it does justice to "when the levee breaks" Quantizing John Bonham is a sacrilege https://m.youtube.com/watch?v=hT4fFolyZYUDl https://m.youtube.com/watch?v=hT4fFolyZYUDl
- wesz 2y agoIf anybody still looks here i just added song links in the comments. Write in your comment @[comma separated list of patterns] to create song trigger, e.g @[1,1,1,2,3,4,3,4]
- timoxley 2y agoGreat stuff. Feature requests: non-wp login, accents, Bar lines, support for non-4/4, swung meter, search by pattern (e.g. write a kick snare pattern, find beats with same kick snare pattern to e.g. find inspiration for hat patterns)
- badmonster 2y agothis is super cool