NoiseCraft: a Browser-Based Visual Programming Language for Sound & Music
I’ve recently resumed work on a side-project I started back in 2019 to create a browser-based visual programming language for sound synthesis and music. I was initially hoping to make this a commercial SaaS product, but I got discouraged when I realized that running and promoting a business could easily become a second job on top of my full-time day job, and suck all the fun out of the project. Thankfully, about six months ago, my motivation to work on the project came back. I decided to build an improved version of this software and make it open source.
NoiseCraft is a node-based visual programming language, loosely inspired by Max/MSP and PureData. The main goal of this project is to provide a way for people to explore musical ideas, and to enable people to share these ideas easily. It’s designed to be easy to use and approachable for beginners. There’s only one type, every connection has a floating-point value that changes over time. It runs in a browser and uses the Web Audio and Web MIDI APIs. This means you don’t need to install anything, and you can share links to your projects just as easily as you can in Google Docs. The user interface is minimalistic and designed to be as simple as possible to facilitate learning. No cryptic shortcuts, no submenus, no esoteric terminology.
I want to set realistic expectations. This is something I’ve been working on in my spare time. It’s not trying to be Ableton Live or Reason. It’s definitely not perfect and you could run into bugs. It’s designed with desktop and laptop computers in mind. It might eventually work on tablets, but for the moment, it probably doesn’t (unless you connect a keyboard and mouse to your tablet). It’s been tested in Chrome and Edge. However, it doesn’t yet work in Firefox because we’re waiting for a bug to get fixed. It also doesn’t yet work in Safari. However, despite its limitations, NoiseCraft has many interesting features:
- Easy to use sequencer node with multiple patterns
- Audio is now rendered in a background thread to avoid glitches
- You can copy and paste, even between different browser tabs
- Colorful, curved edges that are easier to follow visually
- Undo and redo
- Projects can be shared in the cloud in a few clicks
- Projects can also be saved to local files to a simple JSON format
- Ability to play notes from MIDI keyboards and devices
- Ability to map virtual knobs to knobs/sliders/mod/pitch bend on MIDI devices
- New clock divider and sample-and-hold nodes
I started this project to improve my understanding of synths and sound synthesis. NoiseCraft is ideally suited to explore the possibilities of additive, subtractive and FM synthesis. Most nodes are simple building blocks with a low level of granularity so that it’s easy to understand how things work. By connecting oscillators, filters, delays and other basic components you can create your own synth or groovebox. I’ve linked some fun example projects below to showcase various possibilities:
- Detuned saw, sub osc, ping-pong echo & distortion
- Kaïser Clicker Clicker’s FM (FM synthesis example)
- Triple oscillator + delay + overdrive pedal (playable with a MIDI keyboard)
- The little acid machine that could (my attempt at an acid sound)
- Noise Machine / Relaxing Ocean Sounds
- Polyclocks v.1.0 (polyrhythm)
- Long Gate & Retrigger
- Da Wubs (dubstep style wub-wub)
- andyS’ DTMF synth
- (a or not b)’s subtractive synthesizer v1.0
Many more examples can be found on NoiseCraft’s browse page and some instructions are provided in the help page. With this project, I hope to create a community for the open sharing of musical ideas. If this is something that interests you, I’m also hoping to find skilled, like-minded collaborators to help me improve the software. I’ll keep gradually improving it on my own, but there’s a limit to what a single programmer can do in their spare time. NoiseCraft could use testing, bug fixes and various improvements. Constructive feedback as well as contributions to the help page and documentation are also welcome. If you report bugs, please try to provide details on how to reproduce the issue and please be kind. The project is available on GitHub :)
Pointers Gone Wild 
I tried doing something like this recently, I had formed roughly 6 or 7 pages of plans, as well as mockups for styles and sythesizers I could make with it.
Lets just say that my project didn’t go to plan.
I love this, and I’m amazed to say it works really well on Mobile devices. I’d recommend you get in contact with some musical YouTubers – like Levi Niha – as they like to play around with these sorts of things, and it’d be good to get this out there!
All the best for the future!
Thanks Magnogen. It took me about a year of part-time work to get to this point, spread on and off over 3 years. Lots of prototyping, refactorings.
I think I will try to get more promotion going, but I want to go about it gradually because I feel like it’s really not a finished product. Needs some bug fixing and a number of UI improvements, but we’ll get there :)
Reminds me of https://www.gsn-lib.org/
Yes, NoiseCraft is part of a family of node-based visual programming languages.
Does not work on mobile devices it seems. On my mobile I can just draw a red marking rectangle but not create any nodes.
That’s right. I think it has to do with how the pointer API is handled. If you (or another reader) have time to help debug/investigate, it would be helpful. I don’t have a tablet to test this on. In the meantime if you have an USB-C mouse you might be able to get that working on mobile :D
I opened an issue here: https://github.com/maximecb/noisecraft/issues/44
This is great, can I have a few suggestions, maybe you’ve thought of this and just didn’t have time to implement, but it would be great if you could:
• have a [x] delete button on each node, just in the corner, so you don’t have to open the context menu
• have some context menus where you can find keyboard shortcuts, I accidentally deleted a bunch of nodes by pressing CTRL + Y, and then couldn’t figure out how to redo
Hi Stephen!
There’s a help page link at the top and some details about the keyboard shortcuts, https://noisecraft.app/help
For the x button, I thought about it, but I was worried this might not work well on touch devices (easy to accidentally click). At the moment, you can shift+click on a node to delete it, or drag to select and then hit delete.
I think it it’s great! I used to compose with this program “Jeskola Buzz” back in the day, used a similar node-based approach with the nodes being classified into two broad categories, “Generators” and “Effects”. NoiseCraft feels familiar coming from that, but offers this more granular approach to building the synth internals which makes for some fun tinkering capabilities. It would be a nice tool to teach synthesis concepts. I’m curious to poke around the GH repo, as someone who works on web tech for my day job.
Yeah, please check it out and let me know what you think. There’s also several open issues on GitHub if you feel like helping out :)
I’m extremely pleased to hear that you’ve not only resumed work but also made it open source! A while back I started something similar (modular synthesizer) in TypeScript to teach myself the Web Audio API and the goal was to make it open source. I got to a proof of concept level but lost interest 9 months ago. I had lots of fun doing it but there were certain things that I had issues with solving and I’ll admit I even ended up trying to deobfuscate the code of Zupiter to learn how it’s built.
I wrote this comment as soon as I read the first paragraph of this post and I’ll now read the rest and check out the repository. I’d be more than glad to contribute once I have some time. Congratulations on restarting the project and thank you for open sourcing it! :) Seriously this is some of the coolest stuff I’ve seen done with JS for a while.
Thanks Richard :)
Feel free to post on the issues on GitHub (or to open new ones).