6 ms·

Show HN: A Web-Based Modular Drum Machine for You to Play With

214 points by maxime_cb 4y ago

maxime_cb 4y ago
OP here. I've been working on an app/platform for people to explore musical ideas. This is a drum machine that a European friend of mine created using the app. You can press the Play button in the top-right corner to start audio playback and customize the pattern being played by clicking the red squares on the step sequencer. If this example is too big and scary, I've made a simpler drum machine here: https://noisecraft.app/529 https://noisecraft.app/529 And many more examples can be found on the browse page: https://noisecraft.app/browse https://noisecraft.app/browse One of my all-time favorites is this one: https://noisecraft.app/101 https://noisecraft.app/101 Disclaimer that this is made with laptop/desktop computers in mind and may not work well on mobile. The app supports binding MIDI controls by double clicking on knobs :)
- ycombinatorrio 4y ago
  Thank you internet stranger for all the work you have done there
  - maxime_cb 4y ago
    No problem :) I should mention that this is open source too: https://github.com/maximecb/noisecraft https://github.com/maximecb/noisecraft
- quijoteuniv 4y ago
  Awesome! It worked quite alright on my mobile i have to say.
  - maxime_cb 4y ago
    Nice. What kind of device are you using?
    - nickphx 4y ago
      I'm on a pixel 6, using chrome and it worked rather well.
- ogig 4y ago
  > One of my all-time favorites is this one: https://noisecraft.app/101 https://noisecraft.app/101 I have to agree. Already spent 10 minutes only with the cutoff and res. Impressive work on the app, kudos!
- ushakov 4y ago
  do you have a tutorial how to use it? the main page is a bit overwhelming
  - maxime_cb 4y ago
    There is a help page to get you started: https://noisecraft.app/help https://noisecraft.app/help It's pretty basic but I invite people to open pull requests to improve it. This video shows how (an older version) of the app is used: https://www.youtube.com/watch?v=609k3_Z-16o https://www.youtube.com/watch?v=609k3_Z-16o
    - localhost 4y ago
      I can’t seem to scroll the help on iOS. Workaround is to use reader mode in Safari.
      - maxime_cb 4y ago
        That's pretty weird. If you or anyone has time to help me debug this, I would much appreciate your help. Might be something with the CSS.
- greg7gkb 4y ago
  I've used various forms of these audio tools in the past (MAX, PD) and this is a very impressive piece of work. First, I haven't seen one implemented with web technologies before, and after running through many example projects there were zero errors or issues for me. Everything seems clear and straightforward. Nicely done, congrats on publishing this, and thanks for making it open source!
- pjmlp 4y ago
  Looks quite cool application, thanks for sharing and good luck with it.
necro 4y ago
Hats off. Great interface and i enjoyed making a few simple beats which is probably a very small part what the system is capable of. Thank you
- maxime_cb 4y ago
  Thank you. The UI is pretty basic but I tried to design it in such a way that the functionality would feel intuitive to newcomers, with as few hidden features as possible. I picked this project to share because I figured that it was very easy for people to play with by editing the pattern, without needing to understand how the sound synthesis works.
yesenadam 4y ago
Thank you! Musician here, this is the first music-related ShowHN I ever loved at first sight like this. Amazing, sounds awesome and looks gorgeous.
andoli 4y ago
this is great thanks for sharing
PaulDavisThe1st 4y ago
This is deeply impressive. I remain in principle opposed to web-centric audio app development, but this is probably the first one I've seen that puts a couple of small explosive devices under the foundations of that belief and gives it a good rumble. So much stuff that has been done right, and so much open-endedness to the entire system. As much as I hate to say it, amazing!
- maxime_cb 4y ago
  Thanks Paul. Web development definitely has its downsides. It's been challenging to get everything to work well across Chrome/Firefox and Safari because there's annoying little differences in the way they handle mouse events for example (I might blog about this at some point). The upside though is that with an app like this, anyone can start experimenting with music and sound design from their computer, without installing anything, and you can easily show your friends the things you created (or share ideas with internet strangers).
1ntEgr8 4y ago
This is amazing :)
measure2xcut1x 4y ago
Very quickly added knobs and filters and mapped them to my NI controller with no friction. Legit acid tones within minutes.
- maxime_cb 4y ago
  Please share your project with acid tones! :)
lbj 4y ago
Very impressive. How long have you been working on this?
- maxime_cb 4y ago
  Since 2019 on and off in my spare time. I've found motivation comes and goes and I actually spent one year not working on it at all, but resumed work in 2021.
appleflaxen 4y ago
This is incredible; thank you for posting it!
lagrange77 4y ago
Wow, that's outstanding.
jethronethro 4y ago
I'm not a musician or even musically inclined, but I'm really enjoying this! Thanks for creating and sharing it.
raptor99 4y ago
This is amazing and I've only tried it out for about 20 minutes now. I'm just learning about MIDI and sequencers and such. Is it possible yet or will it be possible to export what we build in here to other software, or at least to an audio file?
- maxime_cb 4y ago
  You can save it locally to a file that's in a JSON format and easy to parse. That can allow you to run it locally, or you could build some kind of exporter. Right now to export audio you'd have to record the audio output.
terrycody 4y ago
An amazing project, really fun to play!
_throwawayaway 4y ago
doesn't work on my ipad
lukasb 4y ago
this recreation of Luke Abbott's Brazil is gorgeous https://noisecraft.app/233 https://noisecraft.app/233
- lukasb 4y ago
  Even if you don't plan to make your own tracks, this is just an amazing way to experience music - as this big beautiful machine that you can play with.
Orionos 4y ago
Absolutely great work! UX is actully pretty good and I think it helps understanding some usefull basics. I remember using it a while ago, I think I'm guilty of this one https://noisecraft.app/113 https://noisecraft.app/113

214 points by maxime_cb 4y ago

OP here. I've been working on an app/platform for people to explore musical ideas. This is a drum machine that a European friend of mine created using the app. You can press the Play button in the top-right corner to start audio playback and customize the pattern being played by clicking the red squares on the step sequencer. If this example is too big and scary, I've made a simpler drum machine here: https://noisecraft.app/529 https://noisecraft.app/529 And many more examples can be found on the browse page: https://noisecraft.app/browse https://noisecraft.app/browse One of my all-time favorites is this one: https://noisecraft.app/101 https://noisecraft.app/101 Disclaimer that this is made with laptop/desktop computers in mind and may not work well on mobile. The app supports binding MIDI controls by double clicking on knobs :)

ycombinatorrio 4y ago
Thank you internet stranger for all the work you have done there
- maxime_cb 4y ago
  No problem :) I should mention that this is open source too: https://github.com/maximecb/noisecraft https://github.com/maximecb/noisecraft
quijoteuniv 4y ago
Awesome! It worked quite alright on my mobile i have to say.
- maxime_cb 4y ago
  Nice. What kind of device are you using?
  - nickphx 4y ago
    I'm on a pixel 6, using chrome and it worked rather well.
ogig 4y ago
> One of my all-time favorites is this one: https://noisecraft.app/101 https://noisecraft.app/101 I have to agree. Already spent 10 minutes only with the cutoff and res. Impressive work on the app, kudos!
ushakov 4y ago
do you have a tutorial how to use it? the main page is a bit overwhelming
- maxime_cb 4y ago
  There is a help page to get you started: https://noisecraft.app/help https://noisecraft.app/help It's pretty basic but I invite people to open pull requests to improve it. This video shows how (an older version) of the app is used: https://www.youtube.com/watch?v=609k3_Z-16o https://www.youtube.com/watch?v=609k3_Z-16o
  - localhost 4y ago
    I can’t seem to scroll the help on iOS. Workaround is to use reader mode in Safari.
    - maxime_cb 4y ago
      That's pretty weird. If you or anyone has time to help me debug this, I would much appreciate your help. Might be something with the CSS.
greg7gkb 4y ago
I've used various forms of these audio tools in the past (MAX, PD) and this is a very impressive piece of work. First, I haven't seen one implemented with web technologies before, and after running through many example projects there were zero errors or issues for me. Everything seems clear and straightforward. Nicely done, congrats on publishing this, and thanks for making it open source!
pjmlp 4y ago
Looks quite cool application, thanks for sharing and good luck with it.

necro 4y ago

Hats off. Great interface and i enjoyed making a few simple beats which is probably a very small part what the system is capable of. Thank you

maxime_cb 4y ago
Thank you. The UI is pretty basic but I tried to design it in such a way that the functionality would feel intuitive to newcomers, with as few hidden features as possible. I picked this project to share because I figured that it was very easy for people to play with by editing the pattern, without needing to understand how the sound synthesis works.

yesenadam 4y ago

Thank you! Musician here, this is the first music-related ShowHN I ever loved at first sight like this. Amazing, sounds awesome and looks gorgeous.

andoli 4y ago

this is great thanks for sharing

PaulDavisThe1st 4y ago

This is deeply impressive. I remain in principle opposed to web-centric audio app development, but this is probably the first one I've seen that puts a couple of small explosive devices under the foundations of that belief and gives it a good rumble. So much stuff that has been done right, and so much open-endedness to the entire system. As much as I hate to say it, amazing!

maxime_cb 4y ago
Thanks Paul. Web development definitely has its downsides. It's been challenging to get everything to work well across Chrome/Firefox and Safari because there's annoying little differences in the way they handle mouse events for example (I might blog about this at some point). The upside though is that with an app like this, anyone can start experimenting with music and sound design from their computer, without installing anything, and you can easily show your friends the things you created (or share ideas with internet strangers).

1ntEgr8 4y ago

This is amazing :)

measure2xcut1x 4y ago

Very quickly added knobs and filters and mapped them to my NI controller with no friction. Legit acid tones within minutes.

maxime_cb 4y ago
Please share your project with acid tones! :)

lbj 4y ago

Very impressive. How long have you been working on this?

maxime_cb 4y ago
Since 2019 on and off in my spare time. I've found motivation comes and goes and I actually spent one year not working on it at all, but resumed work in 2021.

appleflaxen 4y ago

This is incredible; thank you for posting it!

lagrange77 4y ago

Wow, that's outstanding.

jethronethro 4y ago

I'm not a musician or even musically inclined, but I'm really enjoying this! Thanks for creating and sharing it.

raptor99 4y ago

This is amazing and I've only tried it out for about 20 minutes now. I'm just learning about MIDI and sequencers and such. Is it possible yet or will it be possible to export what we build in here to other software, or at least to an audio file?

maxime_cb 4y ago
You can save it locally to a file that's in a JSON format and easy to parse. That can allow you to run it locally, or you could build some kind of exporter. Right now to export audio you'd have to record the audio output.

terrycody 4y ago

An amazing project, really fun to play!

_throwawayaway 4y ago

doesn't work on my ipad

lukasb 4y ago

this recreation of Luke Abbott's Brazil is gorgeous https://noisecraft.app/233 https://noisecraft.app/233

lukasb 4y ago
Even if you don't plan to make your own tracks, this is just an amazing way to experience music - as this big beautiful machine that you can play with.

Orionos 4y ago

Absolutely great work! UX is actully pretty good and I think it helps understanding some usefull basics. I remember using it a while ago, I think I'm guilty of this one https://noisecraft.app/113 https://noisecraft.app/113