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)
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.
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!
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!
Moonlight Kirby: https://draw.audio/s/x8xihkzei
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.
Hello HN community!
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)
Please share your source code here. I love to play with my own sounds. Can we make it programmable?
It’s very nicely done, thanks for sharing it with the world.
Huge kudos for creating something like this from scratch!
The UI is really nice.
Nice. This made me think of Conway's Game of Life so I made a little mashup of a tone matrix with GoL. https://matthewbilyeu.com/tone-of-life.html
This is ACE, love it - thank you for your work.
The only thing I'd love to see is MIDI or audio export....
Love it! Related fun toy: http://roland50.studio/
Oh neat; I had been trying to get Rebirth RB-338 installed on a modern Windows machine without much luck...
Woah! This is really cool! A lot of effort has gone into building this.
It’s also a great example of how playful web audio can be!
Nice one. Thanks!
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.
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.
Feels very befitting for creating mobile ringtones
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!
I love this, really well executed.
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!
Thanks for the kind words!
This is really cool. I just showed my son (10 years old) and he loves it. He is going to try it out on his phone. Thanks for sharing!
He'll probably get a lot of fun out of tapping around
Nice! I hope the kiddo has fun!
Nice one! Can it support selecting area & moving it around?
That would be nice to have! For now, you can only move all notes together under the EDIT menu.
This is fantastic for kids to create on a screen with instead of consuming mindlessly.
Zero to Mass Effect in three seconds!
I had a very sad day. This thing helped me relax. Thanks for sharing!
A surprisingly simple pattern can give a pleasing melody:
https://draw.audio/s/9fr7reqry
A simple, repeated structure can create something that sounds so pleasing and musical
Very fun to play with, Nice UI as well. Well done!
Nice work. What's the underlying stack?
It's really just Javascript and the Web Audio API. For the share links, I'm using Postgres on the backend to store the jsons. Pretty simple!
How many bits of information are there? Might be able to put it straight in the url with base122.
It is excellent, I love it!
Well done! I didn't realize some of this was possible with web tech so thanks for opening my eyes
cutee
Love. Love. Love this. Thank you.