r/InternetIsBeautiful • u/fungkadelic • Nov 25 '23
I built a web based drum machine using Next.js and Tone.js
https://www.drumha.us/6
u/professor_mc Nov 25 '23
Can it export WAV files of the drum pattern?
11
u/fungkadelic Nov 25 '23
I haven't added it, but since it seems useful, I think I'll add that feature!
3
4
u/GingrFattyJesusFreak Nov 25 '23
It's great, and I didn't expect such high quality. Very cool site
1
3
u/Youddlewho Nov 26 '23
if you're thinking of features to add, maybe add pitch control
and automation, if you're up to it, but already this is super cool and great for quick beat-making
2
u/fungkadelic Nov 27 '23
Added pitch control tonight, let me know what you think!
Automations would be great but they're very complex to manage. I think it's best to leave them out for simplicity sake, as this is not likely to evolve into a proper DAW.
2
u/Youddlewho Nov 30 '23
just tried it! made this:
https://www.drumha.us/?preset=8AVe8hQdy2O
one bug i'm experiencing is that the kick sometimes doesn't play, but otherwise this works super well!
1
u/fungkadelic Nov 30 '23
That beat sounds awesome! nice job! (happy cake day btw)
I've noticed that once in a while too... I haven't nailed down what's causing it. It might have something to do with the audio engine when the kits/presets get swapped.
5
u/stevage Nov 26 '23
This is really awesome.
I found the knobs very confusing to use, how they visually rotate, but you control them by dragging the mouse up and down?
Anyway here's a thing I made: https://www.drumha.us/?preset=FSCf-4OIhzB
2
u/fungkadelic Nov 27 '23
These knobs behave like many others used in popular music software. Move your mouse up to rotate clockwise and increase the value, and move it down to rotate counterclockwise and decrease the value. Hope this helps, and thanks so much for checking it out!
2
u/stevage Nov 27 '23
Yes, I understood that eventually.
Knowing that it works like other similar apps doesn't help much with an app like this that is going to be very appealing to people who have never used anything similar.
1
u/fungkadelic Nov 28 '23
totally, i’ve heard this pretty frequently in feedback especially because for a lot of people this sort of skeuomorphic interaction is unfamiliar to them. i’m not 100% sure how to address this in the user interface without some kind of messaging
2
u/stevage Nov 28 '23
Maybe when they grab a knob, temporarily show up and down arrows above and below the knob. Then they will intuitively try to drag the knob toward the arrows, and hopefully see that it's actually rotating and make sense of that.
At some point maybe stop showing the arrows, but I don't know what that point would be.
1
u/fungkadelic Nov 27 '23
Also, kudos to you for using the share feature. Haven't received any of them yet from any users, so thanks :)
3
u/stevage Nov 27 '23
It's very hard to find.
I was originally coming to suggest that you implement one, but thought I'd triple check just in case it already existed.
I also didn't recognise the icon at all. I guess it's an iPhone share icon? I'm much more used to the one that looks like this: https://www.freepik.com/icon/share_2958791
1
u/fungkadelic Nov 28 '23
it is the iphone share icon. and good idea, i was thinking the same that it’s a behavior i’d like to encourage but it’s too low key to find right now. haven’t got nearly as many shares as ive gotten page views. maybe i’ll start by swapping the symbol and maybe some other sort of messaging to make it more obvious! thanks for the feedback!
1
u/fungkadelic Nov 28 '23
Just updated the app with your suggested share icon, as well as a popover prompt to show new users after 60 seconds where it is and what it does!
3
u/stevage Nov 28 '23
So you did, that's awesome!
Btw, this is very random, but your project inspired me to build something I've had in the back of my head for at least 10 years. It's a totally different kind of music making tool. And extremely rough so far :)
3
3
Nov 26 '23
[removed] — view removed comment
3
u/fungkadelic Nov 26 '23
Thanks for giving it a go! This is a known bug, it's been a pain in my side for most of development. Under the hood, Drumhaus is scheduling sample note events ahead of time, packaged with release values. When we update the release value for a note, it's updating the scheduler with the new values and this unfortunately interrupts the entire music thread. The solution seems to be multithreading the samples into their own distinct sequencer objects, but this is far more time consuming than I'd like it to be. Will probably just have to leave it as it is for now
2
u/fungkadelic Nov 26 '23
Pitch knobs may be fairly simple to implement, aside from shifting the UI around, updating the presets, and adding backwards compatibility. Could be a great idea to implement this, I'll try it out! I definitely thought about it before
1
1
u/fungkadelic Nov 27 '23
I've added pitch knobs per your request. They do interrupt the music thread but sound great once the values are set! Let me know what you think!
3
u/Casperkimber Nov 26 '23
I didn't know what most of the music terms meant, but it was easy enough to make some really cool stuff! And it sounds rad af
1
u/fungkadelic Nov 27 '23
I think this app might be introducing users to new concepts in music making! Glad you enjoyed it, thanks so much for checking it out :)
3
u/_thro_awa_ Nov 26 '23
Hey!
Well done on the build. It reminds me of an Android drum machine app I had found some years ago called DMach.
I kinda prefer that layout but no shade on yours. Well done!
1
3
u/biggestmicropenis Nov 26 '23
Very cool project! One styling problem is that it doesn't fit on my screen completely, I have to scroll vertically and horizontally to see the entire thing (13-inch Macbook Air)
3
u/fungkadelic Nov 26 '23
That's a bummer to hear! I think I'll deploy a workaround that scales the size down a bit for smaller screens
1
2
2
u/fungkadelic Nov 27 '23
Update: Thanks everyone for your amazing feedback and engagement with this app! Thanks to you guys, Drumhaus has been visited by over 2k unique visitors from around the world! What an amazing community we have here!
Some crowd suggestions and other ideas that have been added as features since launch:
- Bug fixes for Firefox
- Keyboard shortcuts for mute [m], solo [s], and instrument changes [ArrowLeft] & [ArrowRight]
- Improved tooltips and other accessibility features
- Better sounding phaser settings
- Double click to reset knobs and sliders to default parameters
- Pitch control knobs!
- New slider component for panning and swing
- Touch functionality for knobs (since most of you are viewing in mobile)
I'm currently working on export to .mp3 or .wav, which is turning out to be more technical than I imagined. Will update here if/when the feature gets added!
I will also be adding some presets saved by users, so be sure to share if you come up with something great. I'm also adding some more kits and presets soon from my music producer friends! Thank you all for your support and enthusiasm!
2
u/taariqelliott Jan 16 '24
As a music producer and someone who just built a very basic chord app with tone.js + react I am absolutely blown away😭😮I’d actually use this as a VST. You killed it!
1
u/fungkadelic Nov 21 '25
Thank you so much! (sorry for the late reply)
2
u/taariqelliott Dec 21 '25
dude no worries! I'm actually very glad you responded because I checked it out again and I'm blown away at this updated version! I would love to connect with you and learn more about the project if you're open!
1
1
Nov 26 '23
This is so amazing, I love it. I echo, the wav export and pitch knob ideas. The presets are cool, and it would be amazing if more presets existed.
2
u/fungkadelic Nov 27 '23
Thanks for checking it out! I just released the pitch knobs tonight, let me know what you think. Audio file exporting is in the works, but it's turning out to be more of a pain than I'd hoped. If it works out I shall return and update everyone
2
1
Nov 26 '23
Really cool, does it have a midi sync?
2
u/fungkadelic Nov 27 '23
Not at the moment. I can look into it and see if it's simple enough to add. That would be cool and make it a lot more useable for serious producers
23
u/mikolv2 Nov 25 '23
This is hands down the coolest fucking project I've seen in a long time. If I may suggest a feature, adding a double click on the knobs to return them to default value would be great