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.
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).
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.
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?
- 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.
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.
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/
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
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.
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.
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.
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).
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.
120 comments
[ 2.9 ms ] story [ 173 ms ] threadA 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.
And 'random' button too.
https://www.attackmagazine.com/features/interview/roger-linn...
as previously discussed on HN (https://news.ycombinator.com/item?id=34425861).
The (...) button next to "Your jam" -> Clear does the job for me
Are you planning to open source it?
https://peel.fm/1dd2e8a
/random
Banana is underrepresented contributor to technological growth.
See also https://www.converttobananas.com/
https://peel.fm/33e538b
Nice work, fun and the repeats system is cool
https://peel.fm/6a78420
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.
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
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.
It's a free, fully fledged DAW in the browser, they emulate the most iconic Roland devices like the 808, 909 and 303
Have you tried Tone.js vs Howler? Any thoughts?
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.
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?
Now we need more instruments and collab editing and you have fruity loops online :)
Collaborative real-time audio/video/midi platform that supports VST-like web plugins (the WebAudio Module 2, or WAM2, standard)
Just moving the cowbell creates another interesting rhythm: https://peel.fm/bc80cbc
Edit: Correct link
Beautiful and simple interface, dark mode would be cool. Appreciate you making this and sharing, thanks.
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:
To this: It's not necessarily more compact, but you can iterate over all of the collections with a single index.The banana tapping in rhythm is a great little touch. Fruity!
Here’s a house one. https://peel.fm/abe44a8
https://peel.fm/65bade0
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!
Instead I went with a S3 based storage solution — still pretty simple, not managing any servers or databases manually.
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).
https://peel.fm/a413ced
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.
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.
https://youtu.be/R6pTNuBSqhw
(the producer is from detroit, the track name is not)
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?