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.
This is probably the use case you least expected to hear, but the first thing i thought of when playing with this is how useful it could be in helping make progress when learning jazz improvisation.
Typically when you're learning improv, you're figuring out what scales work with which chords in which parts of the harmony. Normally you'd start with something like 'xxx liked to use the half-whole diminished scale when leading into the I chord from the dominant', so you'd read that/listen to that bit of a solo, try to remember or look up the scale, practice it a bunch of times until you think you know the notes/fingerings, then try to use those notes in that part of your improvisation for that bar or two (while trying to not just play up and down the scale you just practiced playing up and down), until you eventually internalise the 'feel' of each of those notes in that scale in the context of that part of the harmony.
Of course nothing replaces practice, but that process can be quite offputting as you end up second-guessing a lot of your mistakes before your brain actually goes 'ahh that's what that's supposed to sound/feel like'. Conversely, the UX on this is so effortless that I just thought screw it, I'll try it for a couple of mins. I just drew some patterns, picked a transpose/tempo and hit play while I played the harmony part to something I was working through (spacebar mapping to play/stop/restart ftw, nice), and I ended up wrapping my head around it way quicker than I normally would, with a lot more energy left over. It made remembering/playing that scale by ear afterwards way easier too, was nice and quick to redraw the pattern to only include certain notes to focus on, etc.. Yeah, I probably didn't internalise as much of the muscle memory, but that's not always a terrible thing (stops you just playing up and down the scale), and the app also makes it super easy to save that context as a link in my obsidian notes so i can just come back to it whenever i want to pick up where I left off.
Honestly I was genuinely surprised by how well what you've made mapped to the use case. It kinda makes sense given how trad/bebop jazz improv is mostly just runs of notes of the same duration. Yeah ok it's probably not the only app for this, yeah it's probably not the best one, but it's the one that got me to do the thing I'd been putting off doing for ages, so I thought I'd share. Thank you for making it, really nicely done!
That's so cool! I'm glad it inspired you to accomplish what you have been putting off for ages. I do think an alternative and more visual/tactile experience can help some people approach music from a different prospective they might be accustomed to. There's definitely room for improvement. If you have any specific suggestions for your use case please let me know. Thanks for checking it out!
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
Is the "bounce back and forth mode" supposed to be inconsistent when bouncing off each edge? Bouncing one way appears to add an extra note, when the pattern is resetting.
This is great work and a really nice take on the concept. As someone else said, midi output would be really cool as this is a great just doodley scratchpad but once you have something great it'd be awesome to build on 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 hope it was as fun to build as it is to play with.
Nit: I keep fat fingering the controls. Every 2 out of 3 times I touch a control, it collapsed the controls section instead.
Also - I thought the lines beneath the color controls were titles (> etc) and not buttons. I couldn’t figure out how someone shared a link where it played notes from left to right
Thanks for the input. I'm hoping a simple tutorial will help with finding the playback direction buttons. I'm not sure what to do about the fat-fingering problem. Maybe the controls could be bigger.
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.
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.
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!
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?
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)
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.
Extremely well done, congratulations!
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.
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.
The UI is really nice.
Huge kudos for creating something like this from scratch!
This is probably the use case you least expected to hear, but the first thing i thought of when playing with this is how useful it could be in helping make progress when learning jazz improvisation.
Typically when you're learning improv, you're figuring out what scales work with which chords in which parts of the harmony. Normally you'd start with something like 'xxx liked to use the half-whole diminished scale when leading into the I chord from the dominant', so you'd read that/listen to that bit of a solo, try to remember or look up the scale, practice it a bunch of times until you think you know the notes/fingerings, then try to use those notes in that part of your improvisation for that bar or two (while trying to not just play up and down the scale you just practiced playing up and down), until you eventually internalise the 'feel' of each of those notes in that scale in the context of that part of the harmony.
Of course nothing replaces practice, but that process can be quite offputting as you end up second-guessing a lot of your mistakes before your brain actually goes 'ahh that's what that's supposed to sound/feel like'. Conversely, the UX on this is so effortless that I just thought screw it, I'll try it for a couple of mins. I just drew some patterns, picked a transpose/tempo and hit play while I played the harmony part to something I was working through (spacebar mapping to play/stop/restart ftw, nice), and I ended up wrapping my head around it way quicker than I normally would, with a lot more energy left over. It made remembering/playing that scale by ear afterwards way easier too, was nice and quick to redraw the pattern to only include certain notes to focus on, etc.. Yeah, I probably didn't internalise as much of the muscle memory, but that's not always a terrible thing (stops you just playing up and down the scale), and the app also makes it super easy to save that context as a link in my obsidian notes so i can just come back to it whenever i want to pick up where I left off.
Honestly I was genuinely surprised by how well what you've made mapped to the use case. It kinda makes sense given how trad/bebop jazz improv is mostly just runs of notes of the same duration. Yeah ok it's probably not the only app for this, yeah it's probably not the best one, but it's the one that got me to do the thing I'd been putting off doing for ages, so I thought I'd share. Thank you for making it, really nicely done!
That's so cool! I'm glad it inspired you to accomplish what you have been putting off for ages. I do think an alternative and more visual/tactile experience can help some people approach music from a different prospective they might be accustomed to. There's definitely room for improvement. If you have any specific suggestions for your use case please let me know. Thanks for checking it out!
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 fun, but would be even better if you could randomly seed it or have some starting default. Cool quick demo!
I see Random button, but maybe that it was just added after your comment. Thanks to you both if so.
Good idea, I made some improvements like that.
https://matthewbilyeu.com/tone-of-life.html?saved=AAAAAAAACB...
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...
How do you trigger the audio output for ios (iphone)?
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
Woah! This is really cool! A lot of effort has gone into building this.
Nice one. Thanks!
It’s also a great example of how playful web audio can be!
Cool! -- using the Spectroid Android app, you can see the same image of your music in the waterfall of the spectrogram!
https://schematix.com/~devenson/spectroid.png
Wow that's fascinating. Maybe I could add similar visualizations at some point. Thanks for sharing that!
Fun little tool, I wish it could export a midi file with the pattern.
Here's some techno :) https://draw.audio/s/lifgm2yl3
I plan to add midi export soon and I enjoyed your slow filter sweep. Cheers!
Wow! Amazing job, I could really use this to create some tunes, I miss music making. I wish it had an "export to file" function.
I hope to add a MIDI export soon. If you want audio, I think you could record the playback directly into a DAW.
Is the "bounce back and forth mode" supposed to be inconsistent when bouncing off each edge? Bouncing one way appears to add an extra note, when the pattern is resetting.
Example: https://draw.audio/s/z2gcctra8
You're right! It's a bug and I'll fix it :)
This is great work and a really nice take on the concept. As someone else said, midi output would be really cool as this is a great just doodley scratchpad but once you have something great it'd be awesome to build on it.
A midi export is on the to-do list. Thanks for the input!
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.
I hope it was as fun to build as it is to play with. Nit: I keep fat fingering the controls. Every 2 out of 3 times I touch a control, it collapsed the controls section instead.
Also - I thought the lines beneath the color controls were titles (> etc) and not buttons. I couldn’t figure out how someone shared a link where it played notes from left to right
Thanks for the input. I'm hoping a simple tutorial will help with finding the playback direction buttons. I'm not sure what to do about the fat-fingering problem. Maybe the controls could be bigger.
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.
Thanks for sharing the cute Kirby! I'm curious about the bug. Would you mind sharing what OS and browser you're on?
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.
Tempo too seems to be hard to control at the low end of the range. Great work here
Really nice work! Thanks for sharing this. Odd time signatures would be a nice addition. Thanks again!
Time signatures is an idea that didn't occur to me. I'm adding it to the list. Thanks for that!
This is ACE, love it - thank you for your work.
The only thing I'd love to see is MIDI or audio export....
MIDI export seems to be the #1 request. I'll add it! Cheers.
Really really thanks for your creation, I love it!
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.
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.
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!
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!
Nice! I hope the kiddo has fun!
He'll probably get a lot of fun out of tapping around
How do you trigger the audio output for ios (iphone)?
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?
Feels very befitting for creating mobile ringtones
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.
I love this, really well executed.
Zero to Mass Effect in three seconds!
Very fun to play with, Nice UI as well. Well done!
I had a very sad day. This thing helped me relax. Thanks for sharing!
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.
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
LOVE IT
It is excellent, I love it!
This is fantastic for kids to create on a screen with instead of consuming mindlessly.
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.