[HN Gopher] Show HN: Draw.Audio - A musical sketchpad using the ...
___________________________________________________________________
Show HN: Draw.Audio - A musical sketchpad using the Web Audio API
Author : StreamGobbler
Score : 220 points
Date : 2024-11-07 20:06 UTC (1 days ago)
(HTM) web link (draw.audio)
(TXT) w3m dump (draw.audio)
| StreamGobbler wrote:
| 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)
| jonahx wrote:
| The UI is really nice.
| grugagag wrote:
| It's very nicely done, thanks for sharing it with the world.
| interludead wrote:
| Huge kudos for creating something like this from scratch!
| fanfanfly wrote:
| Please share your source code here. I love to play with my own
| sounds. Can we make it programmable?
| matteason wrote:
| 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
| StreamGobbler wrote:
| 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.
| bambax wrote:
| 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.
| matthewhefferon wrote:
| 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!
| StreamGobbler wrote:
| Nice! I hope the kiddo has fun!
| interludead wrote:
| He'll probably get a lot of fun out of tapping around
| nick__m wrote:
| It is excellent, I love it!
| popalchemist wrote:
| Nice work. What's the underlying stack?
| StreamGobbler wrote:
| 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!
| xnx wrote:
| How many bits of information are there? Might be able to put
| it straight in the url with base122.
| tholm wrote:
| Very fun to play with, Nice UI as well. Well done!
| fassssst wrote:
| Love it! Related fun toy: http://roland50.studio/
| grugagag wrote:
| Nice one. Thanks!
| your_challenger wrote:
| Woah! This is really cool! A lot of effort has gone into
| building this.
| askvictor wrote:
| Oh neat; I had been trying to get Rebirth RB-338 installed on a
| modern Windows machine without much luck...
| interludead wrote:
| It's also a great example of how playful web audio can be!
| ustad wrote:
| How do you trigger the audio output for ios (iphone)?
| matteason wrote:
| 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
| IggleSniggle wrote:
| 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!
| StreamGobbler wrote:
| Thanks for the kind words!
| grahamj wrote:
| Well done! I didn't realize some of this was possible with web
| tech so thanks for opening my eyes
| Cypher wrote:
| cutee
| saint_yossarian wrote:
| 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?
| StreamGobbler wrote:
| 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.
| etrautmann wrote:
| Tempo too seems to be hard to control at the low end of the
| range. Great work here
| msla wrote:
| A surprisingly simple pattern can give a pleasing melody:
|
| https://draw.audio/s/9fr7reqry
| interludead wrote:
| A simple, repeated structure can create something that sounds
| so pleasing and musical
| ukuina wrote:
| Zero to Mass Effect in three seconds!
| mbil wrote:
| 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
| etrautmann wrote:
| This is fun, but would be even better if you could randomly
| seed it or have some starting default. Cool quick demo!
| mbil wrote:
| Good idea, I made some improvements like that.
|
| https://matthewbilyeu.com/tone-of-
| life.html?saved=AAAAAAAACB...
| fuzzythinker wrote:
| I see Random button, but maybe that it was just added after
| your comment. Thanks to you both if so.
| yashness wrote:
| Nice one! Can it support selecting area & moving it around?
| StreamGobbler wrote:
| That would be nice to have! For now, you can only move all
| notes together under the EDIT menu.
| ryoshu wrote:
| Love. Love. Love this. Thank you.
| wayoverthecloud wrote:
| 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.
| StreamGobbler wrote:
| 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!
| Kiro wrote:
| 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.
| tertle950 wrote:
| 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.
| interludead wrote:
| I had a very sad day. This thing helped me relax. Thanks for
| sharing!
| j45 wrote:
| This is fantastic for kids to create on a screen with instead of
| consuming mindlessly.
| Reviving1514 wrote:
| I love this, really well executed.
| jdthedisciple wrote:
| Feels very befitting for creating mobile ringtones
| dmje wrote:
| This is ACE, love it - thank you for your work.
|
| The only thing I'd love to see is MIDI or audio export....
| StreamGobbler wrote:
| MIDI export seems to be the #1 request. I'll add it! Cheers.
| dmje wrote:
| Amazing :-)
| woolion wrote:
| 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.
| StreamGobbler wrote:
| Thanks for sharing the cute Kirby! I'm curious about the bug.
| Would you mind sharing what OS and browser you're on?
| ustad wrote:
| How do you trigger the audio output for ios (iphone)?
| StreamGobbler wrote:
| 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?
| creativenolo wrote:
| 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
| StreamGobbler wrote:
| 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.
| boomskats wrote:
| 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!
| StreamGobbler wrote:
| 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!
| boomskats wrote:
| I had a think about it as I was writing that comment, and
| honestly, all I think you're missing is tap tempo. That's it.
| I thought that maybe the ability to set a different scale for
| each of the four different instruments would be cool, but I'm
| not sure that it wouldn't complicate the UX too much. Tap
| tempo, though, would be useful and I imagine fairly easy to
| implement.
| StreamGobbler wrote:
| Great idea! Thanks I'm adding a tap-tempo to my list.
| usmanmehmood55 wrote:
| LOVE IT
| tiborsaas wrote:
| Fun little tool, I wish it could export a midi file with the
| pattern.
|
| Here's some techno :) https://draw.audio/s/lifgm2yl3
| StreamGobbler wrote:
| I plan to add midi export soon and I enjoyed your slow filter
| sweep. Cheers!
| delgaudm wrote:
| 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
| StreamGobbler wrote:
| You're right! It's a bug and I'll fix it :)
| deathmonger5000 wrote:
| Really nice work! Thanks for sharing this. Odd time signatures
| would be a nice addition. Thanks again!
| StreamGobbler wrote:
| Time signatures is an idea that didn't occur to me. I'm adding
| it to the list. Thanks for that!
| lintbrush wrote:
| 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.
| StreamGobbler wrote:
| A midi export is on the to-do list. Thanks for the input!
| Martinify wrote:
| Really really thanks for your creation, I love it!
| p2detar wrote:
| 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.
| StreamGobbler wrote:
| I hope to add a MIDI export soon. If you want audio, I think
| you could record the playback directly into a DAW.
| devenson wrote:
| 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
| StreamGobbler wrote:
| Wow that's fascinating. Maybe I could add similar
| visualizations at some point. Thanks for sharing that!
| tpoindex wrote:
| Very fun! In celebration of where are the cool toys are found:
| https://draw.audio/s/2beyqcyw9
| StreamGobbler wrote:
| Oh man, should have made this the default before posting! Lol
___________________________________________________________________
(page generated 2024-11-08 23:01 UTC)