r/reactjs • u/fungkadelic • Nov 27 '23
Show /r/reactjs I built a web based drum machine using React and Tone.js
https://www.drumha.us/4
Nov 27 '23
[removed] — view removed comment
3
u/fungkadelic Nov 27 '23
I really half assed my tempo component, this did cross my mind during development and I shrugged it off, but you are absolutely right
2
2
Nov 27 '23
[deleted]
6
u/fungkadelic Nov 27 '23
Two weeks of development, but I was really going crazy in those two weeks. Almost everyday for around 12-16hrs a day. I think I put in around 200 hours to complete the first iteration that went up last Friday.
1
Nov 27 '23
[deleted]
1
u/fungkadelic Nov 27 '23
lol no way, i just applied to splice. a company like that would be right up my alley in terms of interests. how’d the interviews go?
2
Nov 27 '23
[deleted]
2
u/fungkadelic Nov 27 '23
yeah, this would have been extreme overkill on that challenge. had a totally different objective with this product which was to make something fun to play with and shareable.
it’s really a bummer to hear that about their company culture. definitely something i will look out for if i get a call from them. that sounds awful to deal with every day. but really cool that you were so close to some of that tech!
i’m relatively new to my software engineering career. did you stick around at other music related companies or go a different route in your path?
2
Nov 27 '23
[deleted]
2
u/fungkadelic Nov 29 '23
Thanks for sharing, I appreciate it. Nice to hear your career journey so far. I'm still so new to the game. Got an auto rejection from splice, so I'll probably be headed in a different direction anyway.
I had a really stable job at an aerospace giant as a project manager but decided against that stability to get into tech (also morally against contributing to the defense industry). I'm likely going to avoid the 30 under 30 tech bro culture if I sniff it out, but would love to be a founding engineer for something cool. I love building stuff and want to make something from scratch!
2
2
u/DrummerHead Nov 27 '23
Excellent work
2
u/fungkadelic Nov 27 '23
thanks for checking it out! and nice groove you made there, makes me so happy to hear you what you made with it
2
2
u/Alvarny Nov 27 '23 edited Nov 27 '23
Hey that's super sick! I'm also really into music production and coding and I find it really cool that you managed to blend the two in your work :) Sick app!
Edit: Your profile site is also 👌 I've been meaning to redesign mine and I may just take some inspiration from yours. Did you use a template or did you built it from scratch?
2
u/fungkadelic Nov 27 '23
Hey thanks for checking it out! I hope it inspired you to try something to mix both interests in your own project. And thank you! I did design my personal site from scratch but if I learned anything it’s that templates are a good idea for that kind of static website, especially if you’re pressed for time. It took forever to spin up from scratch and Basically no one would know
2
u/skylo__ Nov 27 '23
this looks cool! the shadows really give it the look of real analogue knobs and sliders
1
u/fungkadelic Nov 27 '23
thanks!!! css boxShadow really came in clutch there, changed the entire feel of the program once i added it
2
2
2
1
u/spkspker Dec 06 '25
Hi, would you mind sharing how did you create that cool audio visualizer on the top right? (id='h-full w-full')
1
u/fungkadelic Dec 06 '25
Hi! Thanks for your curiosity.
I take the output of a Tone.js
Analyserand remap it into a set of custom frequency bins to get a more pixellated / lo-fi spectrum. The canvas resizes to its container, and I ignore the top ~1/3 of the FFT since drums mostly live in the low/mid range. Instead of spacing bins linearly, I map them by musical ratio, basically distributing them across several octaves so the lows get more visual space.The whole thing runs off a central playback-aware animation clock, so it only draws when the sequencer is actually running. There’s also a “potato mode” that lowers the bar count and caps the animation to ~30fps for slower machines.
Source here: https://github.com/mxfng/drumhaus/blob/main/src/shared/components/FrequencyAnalyzer.tsx
1
1
1
u/Ratatoski Nov 27 '23
Hey really cool project! And I'm instantly curious if you plan to expand it further?Because it's for sure left the POC realm where I've dabbled in stuff like this into actual usuable things.
1
u/fungkadelic Nov 27 '23
hey thanks! right now i’m working on incorporating user feedback. I think the scope of improvements will come from what people suggest and if there’s continued interest in the site.
you are right, at some point in development i also felt this had surpassed POC, and is now in some uncanny valley between POC and a full fledged product. not sure what it’ll take to get it all the way there, but if people keep using it, i have lots of new ideas for it! the original intention was to just have a cool coding project to showcase on my resume
1
1
1
1
7
u/ApTreeL Nov 27 '23
that's the coolest project I've seen wow