Out of my love for synthesizers and web development, I created a free audio sequencer called draw.audio, which includes selectable scales, waveforms, effects, LFOs, and more.
While there are other “tone matrix” style webapps out there, I couldn’t find one that quite scratched the itch for a large grid layout, modern design, and easily accessible modulation controls. So that was the inspiration, alongside my addiction to synths and hardware jam-boxes like the Synthstrom Deluge.
Draw.audio uses the Web Audio API without any other frameworks or libraries. I tried to keep it as lightweight as possible. The to-do list includes a tutorial, pattern preset browsing, more audio effects, light visual animations, and open-sourcing it.
In case you'd like tips:
• It’s more fun on touch screens, like an iPad.
• It's kid friendly! In my limited testing, kids enjoy drawing on it.
• The share button generates a direct link to anything you create.
A big thank you to Sheer Havoc for creating the logo and other graphics!
And thank you all for checking it out! I’d love to hear any feedback you have. <3
-Randy (long-time lurker, first time poster, and HN fan from SF)
This is really well done. I know from making https://ambiph.one that web audio can be really tricky. Lots of fiddly little inconsistencies and gotchas (mainly on iOS, in my experience). So building something that's this customisable, fun to use and runs solidly is a real achievement.
I've got vague plans to add generative music to Ambiphone and I've been using Ableton so far but I think this will be a really useful sketchpad for experimenting with sounds and patterns
Thanks! Yes getting Web Audio to play nice with iOS was tricky and it's still not perfect. I checked out Ambiph and it's fantastic! I love the clean UI and all of the customization options for soothing ambience. Well done.
Assuming you've pressed the yellow Start button (on the TR-808; it looks different on other sequencers), check if you're on silent mode. Some web audio is muted in silent mode on iOS
From this I learned that, contrary to what I believed, on iOS Safari, websites do boy in fact pause when you change tabs. I was really surprised!
Anyway, I used to do a lot of work in this kind of space, and you've encapsulated all the good parts down into a fantastic distilled pure essence. Wonderfully done!
Nice work! You should tune the control sensitivities though, like with the filter cutoffs the usable range is concentrated in a few pixels on the left.
I guess synths usually use some kind of logarithmic scales?
Good observation! You're absolutely right. I need to make a few of the sliders non-linear/logarithmic. I wouldn't want to simply decrease the range of the lowpass filter for example and lose the subtle higher frequencies. Thanks for the input.
Awesome work! I don't have knowledge on music but I like if something makes good sound without knowing the theory behind it, I like it.
It works seamlessly on an old beaten Android phone too. I tried recreating Minecraft music(like Taswell) but couldn't do it well. Wondering if it's at all possible on this.
I just listened to Taswell for the first time. Great track! About recreating the melody, I don't think it would be possible because draw.audio doesn't have variable note lengths currently. Maybe that would be a nice addition in the future. Thanks for checking it out!
The reason it sounds good is because you can't go outside the selected scale so all notes will automatically be in tune. It's like one of those handpans that sound amazing even if you just randomly hit it.
My favorite use of this toy is making something for one scale, and changing the scale. I end up getting these unique ... I'll call them "harmonic textures" each time, even though they're using the same "note pixel" layout. Very intuitive way to experiment with music, and I guess you can make art with it too.
I'm not a fantastic artist, admittedly. And it doesn't help when you're trying to balance that with music! But this is supposed to be a grassy flower garden.
I tested both on Firefox and Chrome (on Linux).
One key point is that I set the zoom to 150%; when it's the case, the vertical size of the left panel changes when (un)folding, which changes the aspect ratio of the right panel.
It should just work if you start tapping notes or press play. Make sure the phone's sound toggle is not muted. I'm not sure of any other reason it wouldn't work. Are you using Safari?
85 comments
[ 2.3 ms ] story [ 137 ms ] threadOut of my love for synthesizers and web development, I created a free audio sequencer called draw.audio, which includes selectable scales, waveforms, effects, LFOs, and more.
While there are other “tone matrix” style webapps out there, I couldn’t find one that quite scratched the itch for a large grid layout, modern design, and easily accessible modulation controls. So that was the inspiration, alongside my addiction to synths and hardware jam-boxes like the Synthstrom Deluge.
Draw.audio uses the Web Audio API without any other frameworks or libraries. I tried to keep it as lightweight as possible. The to-do list includes a tutorial, pattern preset browsing, more audio effects, light visual animations, and open-sourcing it.
In case you'd like tips: • It’s more fun on touch screens, like an iPad. • It's kid friendly! In my limited testing, kids enjoy drawing on it. • The share button generates a direct link to anything you create.
A big thank you to Sheer Havoc for creating the logo and other graphics!
And thank you all for checking it out! I’d love to hear any feedback you have. <3
-Randy (long-time lurker, first time poster, and HN fan from SF)
I've got vague plans to add generative music to Ambiphone and I've been using Ableton so far but I think this will be a really useful sketchpad for experimenting with sounds and patterns
If you're able to tackle Web Audio API directly, maybe you could build an alternative lightweight framework to Tone.js? That would be cool.
Love the app!
Anyway, I used to do a lot of work in this kind of space, and you've encapsulated all the good parts down into a fantastic distilled pure essence. Wonderfully done!
I guess synths usually use some kind of logarithmic scales?
https://draw.audio/s/9fr7reqry
https://matthewbilyeu.com/tone-of-life.html?saved=AAAAAAAACB...
> Neat. Can it zoom out instead of wrapping around
Is it a 2d convolution?
> scipy.ndimage.convolve / scipy.fftpack.dct
This would be a cool instrument in BespokeSynth
It works seamlessly on an old beaten Android phone too. I tried recreating Minecraft music(like Taswell) but couldn't do it well. Wondering if it's at all possible on this.
Flower Garden: https://draw.audio/s/hngnldoov
I'm not a fantastic artist, admittedly. And it doesn't help when you're trying to balance that with music! But this is supposed to be a grassy flower garden.
The only thing I'd love to see is MIDI or audio export....
Very fun!
A small 'bug', folding and unfolding the left panels change the aspect ratio of rectangle pads.
I think it would cool to have a tutorial. I know nothing about music but it could be fun to learn some of it while trying how some patterns sound.