Fantastic, had a lot of fun poking around this little machine.<p>I really love it, here are some minor improvement points:<p>- 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?<p>- 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?<p>- the BPM slider is a bit on the small side. Consider making it wider for finer control?<p>- 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?<p>Amazing to play around with.
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.
Cute and fun! The toe-tapping banana is a nice touch.<p>A minor suggestion for your export format is to switch from an "array of structs" to a "struct of arrays" layout:<p>For example, change this:<p><pre><code> "steps": [{"isOn":true, "repeat":"1:2"}, {"isOn":false}, {"isOn":false}, {"isOn":false}, ...]
</code></pre>
To this:<p><pre><code> "steps": {"repeat": ["1:2",null,null,null,...], "isOn":[true,false,false,false,...]}
</code></pre>
It's not necessarily more compact, but you can iterate over all of the collections with a single index.
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.<p>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.<p>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.<p><a href="https://io808.com" rel="nofollow">https://io808.com</a><p><a href="https://roland50.studio" rel="nofollow">https://roland50.studio</a><p><a href="https://drumbit.app" rel="nofollow">https://drumbit.app</a><p><a href="https://www.onemotion.com/drum-machine/" rel="nofollow">https://www.onemotion.com/drum-machine/</a><p><a href="https://hiphopmakers.com/best-free-drum-machine-online" rel="nofollow">https://hiphopmakers.com/best-free-drum-machine-online</a>
Very cool, here's my loop :) <a href="https://peel.fm/f3148e6" rel="nofollow">https://peel.fm/f3148e6</a><p>Now we need more instruments and collab editing and you have fruity loops online :)
Woah, I made almost the same thing the other week
<a href="https://beatmaker.adammenz.com/" rel="nofollow">https://beatmaker.adammenz.com/</a>
<a href="https://github.com/patchorang/drummachine">https://github.com/patchorang/drummachine</a>
A little detroit techno vibe? <a href="https://peel.fm/15f0762" rel="nofollow">https://peel.fm/15f0762</a><p>This is really neat! the kick some <i>sweet</i> distortion when you put an accent on it and have it layered with some other samples.<p>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.
nice, the banana tapping to the bpm was a nice touch<p><a href="https://peel.fm/1dd2e8a" rel="nofollow">https://peel.fm/1dd2e8a</a>
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.<p>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.
Fun. Always love playing with toys like this. A little d'n'b loop: <a href="https://peel.fm/c275e61" rel="nofollow">https://peel.fm/c275e61</a><p>The banana tapping in rhythm is a great little touch. Fruity!
Awesome, I loved this! I have been using it for my guitar practice.<p>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: <a href="https://youtu.be/vKNZqM0d-xo" rel="nofollow">https://youtu.be/vKNZqM0d-xo</a>. Can anyone figure out how to program that?
<a href="https://peel.fm/0eeddb0" rel="nofollow">https://peel.fm/0eeddb0</a><p>I'm having too much fun with this. Thanks!
Nice! Reminds me of these little <i>Teenage Engineering</i> machines, which have a similar UX but are a the size of a calculator. A lot of fun to mess around with<p><a href="https://teenage.engineering/products/po" rel="nofollow">https://teenage.engineering/products/po</a>
Nice job! and thanks for sharing..<p>Here are some suggestions / wishes:<p>- 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.<p>Do you make music yourself?
This is really fun! Thanks for sharing. I'm going to sample my loop into my sp404 and add some effects
<a href="https://peel.fm/356c797" rel="nofollow">https://peel.fm/356c797</a>
<a href="https://peel.fm/5a69bff" rel="nofollow">https://peel.fm/5a69bff</a><p>Really fun to drop the kick & cowbell for a few bars then bring them back in.
here is a quick sketch: <a href="https://peel.fm/b02789c" rel="nofollow">https://peel.fm/b02789c</a> variation <a href="https://peel.fm/e854bbc" rel="nofollow">https://peel.fm/e854bbc</a><p>Super clean and fun, thanks for sharing!<p>One request would be to raise the max tempo so half time could be programmed allowing 32 steps per bar.<p>oh, and maybe a "song" playlist which allowed you to paste multiple links in a list?
I made three so far!<p>1: <a href="https://peel.fm/1e0025f" rel="nofollow">https://peel.fm/1e0025f</a> (from my phone)<p>2: <a href="https://peel.fm/ecafb25" rel="nofollow">https://peel.fm/ecafb25</a><p>3: <a href="https://peel.fm/1bfd07f" rel="nofollow">https://peel.fm/1bfd07f</a><p>Fun way to take a 10-minute break in the middle of the day.
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: <a href="https://www.fachords.com/drum-machine-tool" rel="nofollow">https://www.fachords.com/drum-machine-tool</a>
Thank you for making this!!!<p>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.<p>Here is my composition.<p><a href="https://peel.fm/68acc69" rel="nofollow">https://peel.fm/68acc69</a>
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.<p>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.
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.
Looks great and works great! A reset button would be nice to undo the horrible mess I made.<p>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.
Great job! Projects like these were what fascinated me with front-end web development in the first place. :)<p><a href="https://peel.fm/12e9f28" rel="nofollow">https://peel.fm/12e9f28</a>
Would love to have more bars available!
anyway here's what I made <a href="https://peel.fm/01bdaea" rel="nofollow">https://peel.fm/01bdaea</a>
At half speed you can fit two bars (at eighth-note resolution): <a href="https://peel.fm/e4b8d7c" rel="nofollow">https://peel.fm/e4b8d7c</a>
Can’t get audio to work on iPad (could be human error).<p>Beautiful and simple interface, dark mode would be cool.
Appreciate you making this and sharing, thanks.
Nice idea but this is terrible to use on mobile, the buttons are tiny.<p>Tested on Chrome and Firefox for Android, identically awful on both.<p>An example of a smooth and beautiful mobile experience for this sort of thing: <a href="https://tones.fm" rel="nofollow">https://tones.fm</a> - synth not drums, same principle though.
The "official" Roland browser-based 808: <a href="https://roland50.studio/" rel="nofollow">https://roland50.studio/</a> along with the rest of the "classic" Roland instruments.<p>Nice that this version allows saving/sharing.