7 ms·

Show HN: I built a little online drum machine using 808 style samples

353 points by berkcebi 4y ago

kblev 4y ago
It's really cool that I place the dots just randomly, and the rythm still sounds good.
zoklet-enjoyer 4y ago
This is really fun! Thanks for sharing. I'm going to sample my loop into my sp404 and add some effects https://peel.fm/356c797 https://peel.fm/356c797
- spoonfeeder006 4y ago
  Thats a really good one
bambax 4y ago
Great! Here's my try https://peel.fm/53fa418 https://peel.fm/53fa418
webscalist 4y ago
https://peel.fm/e38d7e2 https://peel.fm/e38d7e2 https://peel.fm/61eb568 https://peel.fm/61eb568
- Zar_Rok 4y ago
  Alternative from https://peel.fm/e38d7e2 https://peel.fm/e38d7e2: https://peel.fm/9f9074d https://peel.fm/9f9074d
srcreigh 4y ago
https://peel.fm/5a69bff https://peel.fm/5a69bff Really fun to drop the kick & cowbell for a few bars then bring them back in.
elwell 4y ago
https://peel.fm/2d38f70 https://peel.fm/2d38f70
maartn 4y ago
How to get to the second bar?
sublinear 4y ago
https://peel.fm/7173aba https://peel.fm/7173aba
- deleted 4y ago
  [deleted]
- make2 4y ago
  :-)
xwj 4y ago
Mambo? Super intuitive interface! https://peel.fm/23ffd9c https://peel.fm/23ffd9c
eajakobsen 4y ago
Looks great and works great! A reset button would be nice to undo the horrible mess I made. A minor note, when I load the page I get console warnings about an Audio Context being prevented from starting automatically, but once I click play everything works perfectly fine.
- justsomehnguy 4y ago
  > A reset button And 'random' button too.
  - berkcebi 4y ago
    Oh yeah, adding to my to-do list!
    - bsaul 4y ago
      If you're willing to go a bit further, i recommend adding a "groove" cursor, that slightly shift each box within the beat, at random (then you can have more complex algorithm to make the randomisation move the beat toward a ternary rythm instead of completely at random). It's called "humanize" in some audio software and can be fun (if you feel like putting one cursor per track, that's even better).
      - nereye 4y ago
        Or follow the swing recipe from "Roger Linn on Swing, Groove and the Magic of the MPC's Timing (2013)": https://www.attackmagazine.com/features/interview/roger-linn-swing-groove-magic-mpc-timing/ https://www.attackmagazine.com/features/interview/roger-linn... as previously discussed on HN (https://news.ycombinator.com/item?id=34425861 https://news.ycombinator.com/item?id=34425861).
- atentaten 4y ago
  The audio context thing where it won’t start without user interaction is by webaudio API design. OP would need to prevent the errors from coming up though.
ibz 4y ago
Good stuff! Are you planning to open source it?
- cloudking 4y ago
  Yes, please open source
- berkcebi 4y ago
  Yes, it makes a lot of sense to open source it — will do in a day or two!
alphabet9000 4y ago
nice, the banana tapping to the bpm was a nice touch https://peel.fm/1dd2e8a https://peel.fm/1dd2e8a
- ncr100 4y ago
  https://peel.fm/ad54081 https://peel.fm/ad54081 - my creation /random Banana is underrepresented contributor to technological growth. See also https://www.converttobananas.com/ https://www.converttobananas.com/
  - edholland 4y ago
    https://peel.fm/39ecb93 https://peel.fm/39ecb93
    - digitailor 4y ago
      Only bc it’s Valentine's Day :) https://peel.fm/33e538b https://peel.fm/33e538b Nice work, fun and the repeats system is cool
- spoonfeeder006 4y ago
  thats a good groove you got there. I built off of it. What do you think? https://peel.fm/6a78420 https://peel.fm/6a78420
itcrowd 4y ago
Fantastic, had a lot of fun poking around this little machine. I really love it, here are some minor improvement points: - when right-clicking, the intended functionality of selecting the appropriate rhythm works only half the time or so. The other half is the browser modal showing normal right-click action. Consider doing long-press to change rhythm? - volume per channel feels off. Putting the slider halfway already results in nearly inaudible contribution from that sample. Consider changing the "slope" of the volume slider? - the BPM slider is a bit on the small side. Consider making it wider for finer control? - the window at default zoom level (100%, 1080p resolution) doesn't fill the screen. Works perfect on 125% setting. Consider filling the entire screen so that the button sizes etc. are maximized? Amazing to play around with.
- berkcebi 4y ago
  That's awesome to hear, and thanks so much for the detailed feedback. Really appreciate it!
  - irjustin 4y ago
    AH! yeah in my chrome it didn't work at all. i was super confused how the example got the little dots and what they meant.
- enlyth 4y ago
  >Volume slider This is a common mistake [0], even popular applications like the Netflix player get it wrong [0] https://www.dr-lex.be/info-stuff/volumecontrols.html https://www.dr-lex.be/info-stuff/volumecontrols.html
- devalnor 4y ago
  I would also suggest a 'Solo' button
- srcreigh 4y ago
  Also having tons of fun with this Some more feedback: - The blue indicator is 4 ticks behind the playback - It would be nice to have more options for where the sounds can appear, like bars 3 and 4 - When I enable a track, I expect any notes that have already passed to have been skipped, but some (kick, cymbal) will start playing halfway through the track even after the note has long passed.
mattgreenrocks 4y ago
Love it. Hope you add more samples :)
atentaten 4y ago
As someone who was into making electronic music back before Fruity Loops and Hammerhead—-a time when one coveted actual hardware, but was always searching and dreaming about software drum machines because they were cheaper or free, I always find it amazing that we can do this in the browser. I always love seeing cool projects like this come about.
- fat-chunk 4y ago
  Have you ever come across https://audiotool.com https://audiotool.com ? It's a free, fully fledged DAW in the browser, they emulate the most iconic Roland devices like the 808, 909 and 303
  - neumann 4y ago
    How did I never come across this! What an achievement, there goes my evening.
- jbjbjbjb 4y ago
  Hammerhead now that’s a name I haven’t heard in a long time… since my teens. Just googled it and there’s an mobile app! https://ruismaker.com/hammerhead/ https://ruismaker.com/hammerhead/
  - tomduncalf 4y ago
    Yeah Bram Bos is one of the best iOS music app developers out there :)
- jimt1234 4y ago
  Same. My first drum machine was a broken Roland TR-909 that I bought from a pawn shop around '88. I borrowed a bunch of my mother's old records, and was on my way to hip-hop-producer stardom! LOL
- samdafi 4y ago
  I second this and thank you heartily for reminding me of hammerhead. These dreams are very familiar!
kingsloi 4y ago
Awesome job! I've bookmarked it for future use, can't wait to fill the time before meetings start to jam out!
cronix 4y ago
Nice job! A few suggestions: volume control per note (possibly a popup to avoid slider clutter) and the ability to add additional patterns and then sequence them with copy/paste between patterns so you don't have to recreate each one from scratch.
- berkcebi 4y ago
  Makes a ton of sense — will add to my list!
patchorang 4y ago
Woah, I made almost the same thing the other week https://beatmaker.adammenz.com/ https://beatmaker.adammenz.com/ https://github.com/patchorang/drummachine https://github.com/patchorang/drummachine
- berkcebi 4y ago
  Huh! I love how you can switch between instruments on each track, that's a great idea. Have you tried Tone.js vs Howler? Any thoughts?
  - patchorang 4y ago
    Interesting, I didn't come across Tone.js until now. It looks like it handles a few more things than Howler. Most useful for the drum machine would be scheduling. I'm just using setInterval, which isn't guaranteed to be accurate, but seems good enough for my use case. I want to build some other browser based audio/synth tools. I'll have dig into Tone.js more for one of those, thanks. I'm re-learning to code with these projects, but the goal is to build a multiplayer web-based modular synth.
    - modfreq 4y ago
      Yooo... MY PEOPLE!!! I am working on building a web based modular synth I can sequence with/use to sequence my real life modular synth. I want to be able to live stream my real life synth patches and allow people to mess with some CV paramaters in the browser. Where can I follow your work?
vernon99 4y ago
Very cool, here's my loop :) https://peel.fm/f3148e6 https://peel.fm/f3148e6 Now we need more instruments and collab editing and you have fruity loops online :)
- gravitronic 4y ago
  You should take a look at https://sequencer.party https://sequencer.party Collaborative real-time audio/video/midi platform that supports VST-like web plugins (the WebAudio Module 2, or WAM2, standard)
- Zar_Rok 4y ago
  Nice loop! Just moving the cowbell creates another interesting rhythm: https://peel.fm/bc80cbc https://peel.fm/bc80cbc Edit: Correct link
  - srcreigh 4y ago
    That’s the same loop
    - Zar_Rok 4y ago
      Yes, I fixed the link, thanks!
LosMyke 4y ago
Can’t get audio to work on iPad (could be human error). Beautiful and simple interface, dark mode would be cool. Appreciate you making this and sharing, thanks.
- berkcebi 4y ago
  Thank you! I noticed on my iPhone that if it's on silent, the audio doesn't play — that could be it.
  - eyelidlessness 4y ago
    I can confirm this. It’s definitely not expected! I turned my audio volume all the way up and heard nothing. I shouldn’t need to turn on my phone ringer (and wouldn’t ever think to do so!) to hear a drum machine on a website.
hoosieree 4y ago
Cute and fun! The toe-tapping banana is a nice touch. A minor suggestion for your export format is to switch from an "array of structs" to a "struct of arrays" layout: For example, change this: "steps": [{"isOn":true, "repeat":"1:2"}, {"isOn":false}, {"isOn":false}, {"isOn":false}, ...] To this: "steps": {"repeat": ["1:2",null,null,null,...], "isOn":[true,false,false,false,...]} It's not necessarily more compact, but you can iterate over all of the collections with a single index.
hougaard 4y ago
Lo and Hi tom samples seem to be switched?
janglezz 4y ago
the banana tapping its foot to the beat is a nice touch.
automatom 4y ago
Very nice! I love a good drum sampler and this was fun to play with.
davepeck 4y ago
Fun. Always love playing with toys like this. A little d'n'b loop: https://peel.fm/c275e61 https://peel.fm/c275e61 The banana tapping in rhythm is a great little touch. Fruity!
- jimt1234 4y ago
  168 bpm :)
- ekphrasis 4y ago
  Nice amen break-ish loop. Here’s a house one. https://peel.fm/abe44a8 https://peel.fm/abe44a8
  - rnmmrnm 4y ago
    good one!
painted-now 4y ago
Here is my loop :-) https://peel.fm/e431e31 https://peel.fm/e431e31
- thrwaway12 4y ago
  Added more cowbells as a joke, but it actually worked well https://peel.fm/65bade0 https://peel.fm/65bade0
- throwme_123 4y ago
  How big are the patterns? Looks like the author implemented a server-side storage with tiny hash. Why not the data itself as base64? That would make it real serverless!
  - berkcebi 4y ago
    That's a good point! I did consider this but decided against it since the share URLs would be pretty long. Instead I went with a S3 based storage solution — still pretty simple, not managing any servers or databases manually.
    - throwme_123 4y ago
      Thanks! I may be biased but I like Unix composability principles :) Unless you plan to forever update your credit card on AWS, it can be better to develop without cloud and use one or more url shorteners to share (socials do it anyway).
- FpUser 4y ago
  I dig this one ;)
- bane 4y ago
  Well, now I know where the funky thread is! https://peel.fm/a413ced https://peel.fm/a413ced
- zepp157 4y ago
  created an HN account to contribute to the funk. https://peel.fm/464063a https://peel.fm/464063a
Archer6621 4y ago
Very nice! I like the idea that allows you to make notes skip certain bars, keeps the UI compact instead of having to show all the bars. It would be nice if you could place notes while dragging the mouse instead of having to click all the time, and a clear button would also be cool.
parabyl 4y ago
A little detroit techno vibe? https://peel.fm/15f0762 https://peel.fm/15f0762 This is really neat! the kick some sweet distortion when you put an accent on it and have it layered with some other samples. I've been using the Volca Drum recently and an idea from that which I imagine would be relatively simple to add to this would be a divide step option - allowing for double-time hats and the like. It would make a great addition to this fun little drum machine.
- boredemployee 4y ago
  Nice! Talking about detroit and 808: https://youtu.be/R6pTNuBSqhw https://youtu.be/R6pTNuBSqhw (the producer is from detroit, the track name is not)
  - parabyl 4y ago
    Oof, so very dusty! Lovely track, thanks for the recommendation.
    - boredemployee 4y ago
      yw! i could talk about D producers all day
- deleted 4y ago
  [deleted]
tumidpandora 4y ago
Fun tool, love how the banana peel logo stars to foot tap soon as the track's playing
consumer451 4y ago
here is a quick sketch: https://peel.fm/b02789c https://peel.fm/b02789c variation https://peel.fm/e854bbc https://peel.fm/e854bbc Super clean and fun, thanks for sharing! One request would be to raise the max tempo so half time could be programmed allowing 32 steps per bar. oh, and maybe a "song" playlist which allowed you to paste multiple links in a list?
deleted 4y ago
[deleted]
mobinov 4y ago
Nice idea but this is terrible to use on mobile, the buttons are tiny. Tested on Chrome and Firefox for Android, identically awful on both. An example of a smooth and beautiful mobile experience for this sort of thing: https://tones.fm https://tones.fm - synth not drums, same principle though.
- berkcebi 4y ago
  Right, it's not optimized for mobile at all — definitely on the to-do list.
tobych 4y ago
In the Air Tonight: https://peel.fm/985d7e0 https://peel.fm/985d7e0
- deleted 4y ago
  [deleted]
matt3210 4y ago
dang! Very nice!
PaulDavisThe1st 4y ago
The "official" Roland browser-based 808: https://roland50.studio/ https://roland50.studio/ along with the rest of the "classic" Roland instruments. Nice that this version allows saving/sharing.
- deleted 4y ago
  [deleted]
RigelKentaurus 4y ago
Awesome, I loved this! I have been using it for my guitar practice. I'm trying to create the drum track for the starting part of Blue rondo a la turk by Dave Brubeck. Not sure how I can tell you but one quick listen will suffice: https://youtu.be/vKNZqM0d-xo https://youtu.be/vKNZqM0d-xo. Can anyone figure out how to program that?
- dwringer 4y ago
  Unfortunately that song is in 9/8 and this drum computer appears to be fixed only in 4/4, you'd need an extra two steps to properly do it in this format really. Or at the very least a way to limit the steps to nine.
- yesenadam 4y ago
  It seems this drum machine only can do 4-beat loops (with beats subdivided into 4). Sounds like the Brubeck is in 9/8, subdivided 2-2-2-3, 2-2-2-3, 2-2-2-3, 3-3-3.
hayley-patton 4y ago
At half speed you can fit two bars (at eighth-note resolution): https://peel.fm/e4b8d7c https://peel.fm/e4b8d7c
dancc 4y ago
https://peel.fm/0eeddb0 https://peel.fm/0eeddb0 I'm having too much fun with this. Thanks!
s1mon 4y ago
I would highly recommend enabling click and drag to "paint" notes. As it is right now, if I want 16 closed hats, I have to move, click, 16 times. I'd rather drag to paint based on whatever state of the note I start on. The mutes on the left would be better if they mute the notes, not the sounds. Muting and then enabling can end up playing the tail of some of the longer sounds. This isn't typically how you want this to work. You can always use the volume control if you really want to get that effect. It would be nice to get some of the tone controls of the real 808, and the swing is pretty important too..... At some point though, I wonder what your goal is since there are so many apps and web versions of X0X style drum machines these days. https://io808.com https://io808.com https://roland50.studio https://roland50.studio https://drumbit.app https://drumbit.app https://www.onemotion.com/drum-machine/ https://www.onemotion.com/drum-machine/ https://hiphopmakers.com/best-free-drum-machine-online https://hiphopmakers.com/best-free-drum-machine-online
- berkcebi 4y ago
  Great suggestions, thanks so much. I definitely want to keep the app simple UI-wise, so it's going to be a challenge!
  - deleted 4y ago
    [deleted]
- deleted 4y ago
  [deleted]
moshegramovsky 4y ago
Thank you for making this!!! Drummer here. Well someone who plays drums, but doesn't play too much these days. This is wonderful and very fun. I now shared this with everyone I know who has children. Here is my composition. https://peel.fm/68acc69 https://peel.fm/68acc69
jdkee 4y ago
Can we chain multiple loops?
nickybuzz 4y ago
This is awesome.
deleted 4y ago
[deleted]
gitgud 4y ago
Nice! Reminds me of these little Teenage Engineering machines, which have a similar UX but are a the size of a calculator. A lot of fun to mess around with https://teenage.engineering/products/po https://teenage.engineering/products/po
giancaIta 4y ago
That's cool! I've built something similar some months ago, in Vue.js - If you double click on the pads you'll get a stronger beat, useful for accent. Please check it out: https://www.fachords.com/drum-machine-tool https://www.fachords.com/drum-machine-tool
okl 4y ago
Your "Rim Shot" sounds like a sidestick.
- matt_heimer 4y ago
  And it needs more contrast
tagyro 4y ago
Love the small detail of the banana tapping, when the song is playing.
srcreigh 4y ago
There’s some sub bass in the kick, don’t miss out by listening on phone speakers
anon1094 4y ago
Great job! Projects like these were what fascinated me with front-end web development in the first place. :) https://peel.fm/12e9f28 https://peel.fm/12e9f28
make2 4y ago
here's mine https://peel.fm/08d1221 https://peel.fm/08d1221
make2 4y ago
Nice job! and thanks for sharing.. Here are some suggestions / wishes: - Can you add a decay slider to each channel? That shouldn't be hard. It could change the sound & balance of the set by a lot. - Also panning is very useful.. - The repeat every n bars is a very nice touch. Trig conditions are out of the question i guess. - A random button would be lots of fun and make users stick around more. It could have a percentage parameter, too. Could be used as a starting template each time you reload or revisit the page. - The sliders could be a bit wider, especially the one for tempo. Do you make music yourself?
kenfehling 4y ago
I really like the "1st of 2 bars", etc. options. It's a nice UI to make a more complex beat in a smaller space. It'd be cool if there was some kind of "randomize" function to just make a random beat. Maybe not truly random, just something with the basic drums and maybe within some set of constraints.
- polyterative 4y ago
  I agree. I would like it in Ableton
  - digitalslr 4y ago
    Bitwig has this feature for looping clips: "Operators". The recurrence operator, specifically. You can do more complicated stuff like "play this note on the 2nd & 4th loop of a 5 loop cycle". https://www.bitwig.com/userguide/latest/operators/ https://www.bitwig.com/userguide/latest/operators/
jstr_ 4y ago
I had way too much fun with this during my backlog refinement meeting. Amazing project, well done!
Anonio 4y ago
Would love to have more bars available! anyway here's what I made https://peel.fm/01bdaea https://peel.fm/01bdaea
ghkth0987 4y ago
wow this was fun i would suggest adding more rings and tunes, and maybe an equlizer to make more complex beats
grvdrm 4y ago
I made three so far! 1: https://peel.fm/1e0025f https://peel.fm/1e0025f (from my phone) 2: https://peel.fm/ecafb25 https://peel.fm/ecafb25 3: https://peel.fm/1bfd07f https://peel.fm/1bfd07f Fun way to take a 10-minute break in the middle of the day.
spoonfeeder006 4y ago
Oh man this is soo cool https://peel.fm/c33c29a https://peel.fm/c33c29a

353 points by berkcebi 4y ago

It's really cool that I place the dots just randomly, and the rythm still sounds good.

This is really fun! Thanks for sharing. I'm going to sample my loop into my sp404 and add some effects https://peel.fm/356c797 https://peel.fm/356c797

spoonfeeder006 4y ago
Thats a really good one

bambax 4y ago

Great! Here's my try https://peel.fm/53fa418 https://peel.fm/53fa418

webscalist 4y ago

https://peel.fm/e38d7e2 https://peel.fm/e38d7e2 https://peel.fm/61eb568 https://peel.fm/61eb568

Zar_Rok 4y ago
Alternative from https://peel.fm/e38d7e2 https://peel.fm/e38d7e2: https://peel.fm/9f9074d https://peel.fm/9f9074d

srcreigh 4y ago

https://peel.fm/5a69bff https://peel.fm/5a69bff Really fun to drop the kick & cowbell for a few bars then bring them back in.

elwell 4y ago

https://peel.fm/2d38f70 https://peel.fm/2d38f70

maartn 4y ago

How to get to the second bar?

sublinear 4y ago

https://peel.fm/7173aba https://peel.fm/7173aba

deleted 4y ago
[deleted]
make2 4y ago
:-)

xwj 4y ago

Mambo? Super intuitive interface! https://peel.fm/23ffd9c https://peel.fm/23ffd9c

eajakobsen 4y ago

Looks great and works great! A reset button would be nice to undo the horrible mess I made. A minor note, when I load the page I get console warnings about an Audio Context being prevented from starting automatically, but once I click play everything works perfectly fine.

justsomehnguy 4y ago
> A reset button And 'random' button too.
- berkcebi 4y ago
  Oh yeah, adding to my to-do list!
  - bsaul 4y ago
    If you're willing to go a bit further, i recommend adding a "groove" cursor, that slightly shift each box within the beat, at random (then you can have more complex algorithm to make the randomisation move the beat toward a ternary rythm instead of completely at random). It's called "humanize" in some audio software and can be fun (if you feel like putting one cursor per track, that's even better).
    - nereye 4y ago
      Or follow the swing recipe from "Roger Linn on Swing, Groove and the Magic of the MPC's Timing (2013)": https://www.attackmagazine.com/features/interview/roger-linn-swing-groove-magic-mpc-timing/ https://www.attackmagazine.com/features/interview/roger-linn... as previously discussed on HN (https://news.ycombinator.com/item?id=34425861 https://news.ycombinator.com/item?id=34425861).
atentaten 4y ago
The audio context thing where it won’t start without user interaction is by webaudio API design. OP would need to prevent the errors from coming up though.

ibz 4y ago

Good stuff! Are you planning to open source it?

cloudking 4y ago
Yes, please open source
berkcebi 4y ago
Yes, it makes a lot of sense to open source it — will do in a day or two!

alphabet9000 4y ago

nice, the banana tapping to the bpm was a nice touch https://peel.fm/1dd2e8a https://peel.fm/1dd2e8a

ncr100 4y ago
https://peel.fm/ad54081 https://peel.fm/ad54081 - my creation /random Banana is underrepresented contributor to technological growth. See also https://www.converttobananas.com/ https://www.converttobananas.com/
- edholland 4y ago
  https://peel.fm/39ecb93 https://peel.fm/39ecb93
  - digitailor 4y ago
    Only bc it’s Valentine's Day :) https://peel.fm/33e538b https://peel.fm/33e538b Nice work, fun and the repeats system is cool
spoonfeeder006 4y ago
thats a good groove you got there. I built off of it. What do you think? https://peel.fm/6a78420 https://peel.fm/6a78420

itcrowd 4y ago

Fantastic, had a lot of fun poking around this little machine. I really love it, here are some minor improvement points: - when right-clicking, the intended functionality of selecting the appropriate rhythm works only half the time or so. The other half is the browser modal showing normal right-click action. Consider doing long-press to change rhythm? - volume per channel feels off. Putting the slider halfway already results in nearly inaudible contribution from that sample. Consider changing the "slope" of the volume slider? - the BPM slider is a bit on the small side. Consider making it wider for finer control? - the window at default zoom level (100%, 1080p resolution) doesn't fill the screen. Works perfect on 125% setting. Consider filling the entire screen so that the button sizes etc. are maximized? Amazing to play around with.

berkcebi 4y ago
That's awesome to hear, and thanks so much for the detailed feedback. Really appreciate it!
- irjustin 4y ago
  AH! yeah in my chrome it didn't work at all. i was super confused how the example got the little dots and what they meant.
enlyth 4y ago
>Volume slider This is a common mistake [0], even popular applications like the Netflix player get it wrong [0] https://www.dr-lex.be/info-stuff/volumecontrols.html https://www.dr-lex.be/info-stuff/volumecontrols.html
devalnor 4y ago
I would also suggest a 'Solo' button
srcreigh 4y ago
Also having tons of fun with this Some more feedback: - The blue indicator is 4 ticks behind the playback - It would be nice to have more options for where the sounds can appear, like bars 3 and 4 - When I enable a track, I expect any notes that have already passed to have been skipped, but some (kick, cymbal) will start playing halfway through the track even after the note has long passed.

mattgreenrocks 4y ago

Love it. Hope you add more samples :)

atentaten 4y ago

As someone who was into making electronic music back before Fruity Loops and Hammerhead—-a time when one coveted actual hardware, but was always searching and dreaming about software drum machines because they were cheaper or free, I always find it amazing that we can do this in the browser. I always love seeing cool projects like this come about.

fat-chunk 4y ago
Have you ever come across https://audiotool.com https://audiotool.com ? It's a free, fully fledged DAW in the browser, they emulate the most iconic Roland devices like the 808, 909 and 303
- neumann 4y ago
  How did I never come across this! What an achievement, there goes my evening.
jbjbjbjb 4y ago
Hammerhead now that’s a name I haven’t heard in a long time… since my teens. Just googled it and there’s an mobile app! https://ruismaker.com/hammerhead/ https://ruismaker.com/hammerhead/
- tomduncalf 4y ago
  Yeah Bram Bos is one of the best iOS music app developers out there :)
jimt1234 4y ago
Same. My first drum machine was a broken Roland TR-909 that I bought from a pawn shop around '88. I borrowed a bunch of my mother's old records, and was on my way to hip-hop-producer stardom! LOL
samdafi 4y ago
I second this and thank you heartily for reminding me of hammerhead. These dreams are very familiar!

kingsloi 4y ago

Awesome job! I've bookmarked it for future use, can't wait to fill the time before meetings start to jam out!

cronix 4y ago

Nice job! A few suggestions: volume control per note (possibly a popup to avoid slider clutter) and the ability to add additional patterns and then sequence them with copy/paste between patterns so you don't have to recreate each one from scratch.

berkcebi 4y ago
Makes a ton of sense — will add to my list!

patchorang 4y ago

Woah, I made almost the same thing the other week https://beatmaker.adammenz.com/ https://beatmaker.adammenz.com/ https://github.com/patchorang/drummachine https://github.com/patchorang/drummachine

berkcebi 4y ago
Huh! I love how you can switch between instruments on each track, that's a great idea. Have you tried Tone.js vs Howler? Any thoughts?
- patchorang 4y ago
  Interesting, I didn't come across Tone.js until now. It looks like it handles a few more things than Howler. Most useful for the drum machine would be scheduling. I'm just using setInterval, which isn't guaranteed to be accurate, but seems good enough for my use case. I want to build some other browser based audio/synth tools. I'll have dig into Tone.js more for one of those, thanks. I'm re-learning to code with these projects, but the goal is to build a multiplayer web-based modular synth.
  - modfreq 4y ago
    Yooo... MY PEOPLE!!! I am working on building a web based modular synth I can sequence with/use to sequence my real life modular synth. I want to be able to live stream my real life synth patches and allow people to mess with some CV paramaters in the browser. Where can I follow your work?

vernon99 4y ago

Very cool, here's my loop :) https://peel.fm/f3148e6 https://peel.fm/f3148e6 Now we need more instruments and collab editing and you have fruity loops online :)

gravitronic 4y ago
You should take a look at https://sequencer.party https://sequencer.party Collaborative real-time audio/video/midi platform that supports VST-like web plugins (the WebAudio Module 2, or WAM2, standard)
Zar_Rok 4y ago
Nice loop! Just moving the cowbell creates another interesting rhythm: https://peel.fm/bc80cbc https://peel.fm/bc80cbc Edit: Correct link
- srcreigh 4y ago
  That’s the same loop
  - Zar_Rok 4y ago
    Yes, I fixed the link, thanks!

LosMyke 4y ago

Can’t get audio to work on iPad (could be human error). Beautiful and simple interface, dark mode would be cool. Appreciate you making this and sharing, thanks.

berkcebi 4y ago
Thank you! I noticed on my iPhone that if it's on silent, the audio doesn't play — that could be it.
- eyelidlessness 4y ago
  I can confirm this. It’s definitely not expected! I turned my audio volume all the way up and heard nothing. I shouldn’t need to turn on my phone ringer (and wouldn’t ever think to do so!) to hear a drum machine on a website.

hoosieree 4y ago

Cute and fun! The toe-tapping banana is a nice touch. A minor suggestion for your export format is to switch from an "array of structs" to a "struct of arrays" layout: For example, change this: "steps": [{"isOn":true, "repeat":"1:2"}, {"isOn":false}, {"isOn":false}, {"isOn":false}, ...] To this: "steps": {"repeat": ["1:2",null,null,null,...], "isOn":[true,false,false,false,...]} It's not necessarily more compact, but you can iterate over all of the collections with a single index.

hougaard 4y ago

Lo and Hi tom samples seem to be switched?

janglezz 4y ago

the banana tapping its foot to the beat is a nice touch.

automatom 4y ago

Very nice! I love a good drum sampler and this was fun to play with.

davepeck 4y ago

Fun. Always love playing with toys like this. A little d'n'b loop: https://peel.fm/c275e61 https://peel.fm/c275e61 The banana tapping in rhythm is a great little touch. Fruity!

jimt1234 4y ago
168 bpm :)
ekphrasis 4y ago
Nice amen break-ish loop. Here’s a house one. https://peel.fm/abe44a8 https://peel.fm/abe44a8
- rnmmrnm 4y ago
  good one!

painted-now 4y ago

Here is my loop :-) https://peel.fm/e431e31 https://peel.fm/e431e31

thrwaway12 4y ago
Added more cowbells as a joke, but it actually worked well https://peel.fm/65bade0 https://peel.fm/65bade0
throwme_123 4y ago
How big are the patterns? Looks like the author implemented a server-side storage with tiny hash. Why not the data itself as base64? That would make it real serverless!
- berkcebi 4y ago
  That's a good point! I did consider this but decided against it since the share URLs would be pretty long. Instead I went with a S3 based storage solution — still pretty simple, not managing any servers or databases manually.
  - throwme_123 4y ago
    Thanks! I may be biased but I like Unix composability principles :) Unless you plan to forever update your credit card on AWS, it can be better to develop without cloud and use one or more url shorteners to share (socials do it anyway).
FpUser 4y ago
I dig this one ;)
bane 4y ago
Well, now I know where the funky thread is! https://peel.fm/a413ced https://peel.fm/a413ced
zepp157 4y ago
created an HN account to contribute to the funk. https://peel.fm/464063a https://peel.fm/464063a

Archer6621 4y ago

Very nice! I like the idea that allows you to make notes skip certain bars, keeps the UI compact instead of having to show all the bars. It would be nice if you could place notes while dragging the mouse instead of having to click all the time, and a clear button would also be cool.

parabyl 4y ago

A little detroit techno vibe? https://peel.fm/15f0762 https://peel.fm/15f0762 This is really neat! the kick some sweet distortion when you put an accent on it and have it layered with some other samples. I've been using the Volca Drum recently and an idea from that which I imagine would be relatively simple to add to this would be a divide step option - allowing for double-time hats and the like. It would make a great addition to this fun little drum machine.

boredemployee 4y ago
Nice! Talking about detroit and 808: https://youtu.be/R6pTNuBSqhw https://youtu.be/R6pTNuBSqhw (the producer is from detroit, the track name is not)
- parabyl 4y ago
  Oof, so very dusty! Lovely track, thanks for the recommendation.
  - boredemployee 4y ago
    yw! i could talk about D producers all day
deleted 4y ago
[deleted]

tumidpandora 4y ago

Fun tool, love how the banana peel logo stars to foot tap soon as the track's playing

consumer451 4y ago

here is a quick sketch: https://peel.fm/b02789c https://peel.fm/b02789c variation https://peel.fm/e854bbc https://peel.fm/e854bbc Super clean and fun, thanks for sharing! One request would be to raise the max tempo so half time could be programmed allowing 32 steps per bar. oh, and maybe a "song" playlist which allowed you to paste multiple links in a list?

deleted 4y ago

[deleted]

mobinov 4y ago

Nice idea but this is terrible to use on mobile, the buttons are tiny. Tested on Chrome and Firefox for Android, identically awful on both. An example of a smooth and beautiful mobile experience for this sort of thing: https://tones.fm https://tones.fm - synth not drums, same principle though.

berkcebi 4y ago
Right, it's not optimized for mobile at all — definitely on the to-do list.

tobych 4y ago

In the Air Tonight: https://peel.fm/985d7e0 https://peel.fm/985d7e0

deleted 4y ago
[deleted]

matt3210 4y ago

dang! Very nice!

PaulDavisThe1st 4y ago

The "official" Roland browser-based 808: https://roland50.studio/ https://roland50.studio/ along with the rest of the "classic" Roland instruments. Nice that this version allows saving/sharing.

deleted 4y ago
[deleted]

RigelKentaurus 4y ago

Awesome, I loved this! I have been using it for my guitar practice. I'm trying to create the drum track for the starting part of Blue rondo a la turk by Dave Brubeck. Not sure how I can tell you but one quick listen will suffice: https://youtu.be/vKNZqM0d-xo https://youtu.be/vKNZqM0d-xo. Can anyone figure out how to program that?

dwringer 4y ago
Unfortunately that song is in 9/8 and this drum computer appears to be fixed only in 4/4, you'd need an extra two steps to properly do it in this format really. Or at the very least a way to limit the steps to nine.
yesenadam 4y ago
It seems this drum machine only can do 4-beat loops (with beats subdivided into 4). Sounds like the Brubeck is in 9/8, subdivided 2-2-2-3, 2-2-2-3, 2-2-2-3, 3-3-3.

hayley-patton 4y ago

At half speed you can fit two bars (at eighth-note resolution): https://peel.fm/e4b8d7c https://peel.fm/e4b8d7c

dancc 4y ago

https://peel.fm/0eeddb0 https://peel.fm/0eeddb0 I'm having too much fun with this. Thanks!

s1mon 4y ago

I would highly recommend enabling click and drag to "paint" notes. As it is right now, if I want 16 closed hats, I have to move, click, 16 times. I'd rather drag to paint based on whatever state of the note I start on. The mutes on the left would be better if they mute the notes, not the sounds. Muting and then enabling can end up playing the tail of some of the longer sounds. This isn't typically how you want this to work. You can always use the volume control if you really want to get that effect. It would be nice to get some of the tone controls of the real 808, and the swing is pretty important too..... At some point though, I wonder what your goal is since there are so many apps and web versions of X0X style drum machines these days. https://io808.com https://io808.com https://roland50.studio https://roland50.studio https://drumbit.app https://drumbit.app https://www.onemotion.com/drum-machine/ https://www.onemotion.com/drum-machine/ https://hiphopmakers.com/best-free-drum-machine-online https://hiphopmakers.com/best-free-drum-machine-online

berkcebi 4y ago
Great suggestions, thanks so much. I definitely want to keep the app simple UI-wise, so it's going to be a challenge!
- deleted 4y ago
  [deleted]
deleted 4y ago
[deleted]

moshegramovsky 4y ago

Thank you for making this!!! Drummer here. Well someone who plays drums, but doesn't play too much these days. This is wonderful and very fun. I now shared this with everyone I know who has children. Here is my composition. https://peel.fm/68acc69 https://peel.fm/68acc69

jdkee 4y ago

Can we chain multiple loops?

nickybuzz 4y ago

This is awesome.

deleted 4y ago

[deleted]

gitgud 4y ago

Nice! Reminds me of these little Teenage Engineering machines, which have a similar UX but are a the size of a calculator. A lot of fun to mess around with https://teenage.engineering/products/po https://teenage.engineering/products/po

giancaIta 4y ago

That's cool! I've built something similar some months ago, in Vue.js - If you double click on the pads you'll get a stronger beat, useful for accent. Please check it out: https://www.fachords.com/drum-machine-tool https://www.fachords.com/drum-machine-tool

okl 4y ago

Your "Rim Shot" sounds like a sidestick.

matt_heimer 4y ago
And it needs more contrast

tagyro 4y ago

Love the small detail of the banana tapping, when the song is playing.

srcreigh 4y ago

There’s some sub bass in the kick, don’t miss out by listening on phone speakers

anon1094 4y ago

Great job! Projects like these were what fascinated me with front-end web development in the first place. :) https://peel.fm/12e9f28 https://peel.fm/12e9f28

make2 4y ago

here's mine https://peel.fm/08d1221 https://peel.fm/08d1221

make2 4y ago

Nice job! and thanks for sharing.. Here are some suggestions / wishes: - Can you add a decay slider to each channel? That shouldn't be hard. It could change the sound & balance of the set by a lot. - Also panning is very useful.. - The repeat every n bars is a very nice touch. Trig conditions are out of the question i guess. - A random button would be lots of fun and make users stick around more. It could have a percentage parameter, too. Could be used as a starting template each time you reload or revisit the page. - The sliders could be a bit wider, especially the one for tempo. Do you make music yourself?

kenfehling 4y ago

I really like the "1st of 2 bars", etc. options. It's a nice UI to make a more complex beat in a smaller space. It'd be cool if there was some kind of "randomize" function to just make a random beat. Maybe not truly random, just something with the basic drums and maybe within some set of constraints.

polyterative 4y ago
I agree. I would like it in Ableton
- digitalslr 4y ago
  Bitwig has this feature for looping clips: "Operators". The recurrence operator, specifically. You can do more complicated stuff like "play this note on the 2nd & 4th loop of a 5 loop cycle". https://www.bitwig.com/userguide/latest/operators/ https://www.bitwig.com/userguide/latest/operators/

jstr_ 4y ago

I had way too much fun with this during my backlog refinement meeting. Amazing project, well done!

Anonio 4y ago

Would love to have more bars available! anyway here's what I made https://peel.fm/01bdaea https://peel.fm/01bdaea

ghkth0987 4y ago

wow this was fun i would suggest adding more rings and tunes, and maybe an equlizer to make more complex beats

grvdrm 4y ago

I made three so far! 1: https://peel.fm/1e0025f https://peel.fm/1e0025f (from my phone) 2: https://peel.fm/ecafb25 https://peel.fm/ecafb25 3: https://peel.fm/1bfd07f https://peel.fm/1bfd07f Fun way to take a 10-minute break in the middle of the day.

spoonfeeder006 4y ago

Oh man this is soo cool https://peel.fm/c33c29a https://peel.fm/c33c29a