10 ms·

Show HN: TR-101 – A drum synth/sequencer made with Vue and the web audio API

105 points by ohadron 9y ago

waibelp 9y ago
Great work! Your clean code is really enjoyable to read and learn from!
- kitotik 9y ago
  Agreed! In addition to the authors skills, Vue just seems to win the readability battle hands down when compared to other js frameworks. The single file components are really quite magical in practice.
- ohadron 9y ago
  Thank you very much :) I honestly think Vue, it's docs, style guide and examples make it really easy to build relatively complex stuff while keeping it very readable.
rajeevcbhatia 9y ago
404 please let me know if you fix the broken reference. pretty excited about this
leephillips 9y ago
Very nice! The "env" control didn't have any audible effect for me. What's it supposed to do?
- ohadron 9y ago
  It should control the terminal pitch of the note. E.g. initial pitch = 440hz. Env = 1 -> terminal pitch 440hz Env = 0.5 -> terminal pitch 220hz See here: https://gitlab.com/inverted3/drum-machine/blob/master/src/components/Machine.vue#L151 https://gitlab.com/inverted3/drum-machine/blob/master/src/co...
  - leephillips 9y ago
    It has no effect on either Chrome or Firefox, Ubuntu laptop.
- jasonjayr 9y ago
  Set the length longer to hear what it does
Mizza 9y ago
Cool! Nice design! The kick drum is way too hard to tune, I can only tune to 60, 147 and 234. Either make the steps smaller or let me type in my own values maybe?
- ohadron 9y ago
  True! Good point. Your two suggestions are good - either that or a non-linear curve. Thanks!
carlbarrdahl 9y ago
Very cool! Would it be possible to store beats and use some kind of autocomplete in a list below to compare popular user patterns? Or why not try to import famous drum patterns using midi import or sound analysis? Would love to browse through Led Zeppeleins, for example, drum tracks visually! Next you could add piano roll and do the same for instruments. This might make it possible to search tracks by scales, chord progressions, melodies, motifs etc...
- ohadron 9y ago
  Thanks for the suggestions! Definitely possible I'll try some of these.
- vdnkh 9y ago
  I've tried recording WebAudio output and it's actually really hard. I think you'd have to store a representative data structure rather than the data coming from the nodes.
- midgetjones 9y ago
  Check out http://funklet.com/ http://funklet.com/ Also, you can create 'groove templates' in Logic Pro, which lets you analyze the groove of one track, and then apply it to another.
nfriedly 9y ago
Seems to sound better in Chrome than Firefox, especially deep sounds like, e.g. the bottom line on the chicken preset. (I'm on a macbook pro if it makes a difference)
- fenomas 9y ago
  Not sure why, but for me in current Firefox it sounds like an absolute mess - just hiss and clicks. It sounds like there's no gain envelope being applied, both the oscillator and the noise sample play their full duration at full gain. This is on both windows and mac. Weird.
  - ohadron 9y ago
    I'm ashamed to admit I didn't even test this on anything other than the devices and browsers I had open at the moment (Chrome on Mac and on Android). I'll check what's the deal with FF - should probably be easy to fix. Thanks for the heads up!
    - fenomas 9y ago
      It's extra surprising to me, because I've been doing some nontrivial procedural Web Audio stuff, and I've also never checked my project in FF, but now that I do I find it sounds identical to Chrome. If you wouldn't mind, please post what the problem was if you figure it out! Edit to add: my best guess is that you need to add a "setValueAtTime" call between these two lines, so that the exponential ramp has a scheduled value to start from. https://gitlab.com/inverted3/drum-machine/blob/master/src/components/Machine.vue#L161-162 https://gitlab.com/inverted3/drum-machine/blob/master/src/co...
      - ohadron 9y ago
        I figured it out - I hope. Your suggestion was a major part of the solution - Chrome works great with just setting osc.gain.value = 1 But for this to work on Safari & FF it needs to be set like this: oscVol.gain.setValueAtTime(1, startTime)
nugator 9y ago
Really cool! Not able to turn the knobs on a touchscreen, that would make it perfect.
- ohadron 9y ago
  Yes, I'll be fixing that. Thanks! :)
mellinoe 9y ago
Very nice! I've always been fascinated by synth and sequencer programming. Small nit: I'm used to being able to drag "upwards" to make a knob's value higher, but here it seems to do cause the value to decrease. Perhaps I'm just too used to how FL Studio behaves and others prefer this way.
- ohadron 9y ago
  You're right, this is the standard way to manipulate knobs. I'll be fixing this. Thanks!
rjromero 9y ago
Quick fix for Safari: var AudioContext = window.AudioContext || window.webkitAudioContext;
- ohadron 9y ago
  Will try that. Thanks!
- ohadron 9y ago
  Was a bit more difficult but that was a step in the right direction. Thanks! https://gitlab.com/inverted3/drum-machine/commit/79c0eba42ec9d58a2be9594bac5cdbec0ab96b90 https://gitlab.com/inverted3/drum-machine/commit/79c0eba42ec...
joshontheweb 9y ago
Very cool! I love seeing all the stuff people are building with web audio. It would be great to have a way at some point to use web-based VST's in popular DAWs. In a similar vein, I made a simple collaborative beat sequencer with some friends for the Node Knockout awhile back. http://ebb.somethingcoded.com/ http://ebb.somethingcoded.com/ It just uses samples for playback since web audio wasn't a thing back then but I'm working on porting it over to doing full synthesis in the browser. FYI- You need to invite friends to join in with you as each person can only control a single track. Or just join in multiple tabs and play by yourself ;)
- ohadron 9y ago
  This is amazing!
- mmjaa 9y ago
  Hey now, I'm as dizzy as anyone at all the free music-making tools from the Interwebs, but lets be honest .. "web audio" isn't much more than "browser audio" in the context of the DAW landscape, though, isn't it? i.e. giving the DOM access to OS-provided audio services is one thing, doing real audio processing locally .. still kinda relevant, no? I mean, yeah .. some DAW's are better than other, but give me native for this, or gtfo, kthxbai ..
dahart 9y ago
Totally awesome, nice project! Makes me want to do some web audio right now. What was the hardest part of this demo, were there any tricky pieces?
- ohadron 9y ago
  Thanks for the kind words :) The hardest part by far was making the timing rock solid - it involves syncing between the browser rendering engine and the audio context timer. My solution was based on pointers from this comprehensive post: https://www.html5rocks.com/en/tutorials/audio/scheduling/ https://www.html5rocks.com/en/tutorials/audio/scheduling/
tomcam 9y ago
Great piece of work! Play with this even if you think you don't know how to work a drum synth.
peternicky 9y ago
No mobile support?
- ohadron 9y ago
  Among many other shortcomings :) For starters, I'll be fixing the knob touch issue.
33degrees 9y ago
Nice! But the knobs turn the opposite way the vast majority of music apps do...
- ohadron 9y ago
  You're right! Been using audio software for the last 20 years yet somehow I missed this. Will be fixed. Thanks!
saoha 9y ago
I like it

105 points by ohadron 9y ago

waibelp 9y ago

Great work! Your clean code is really enjoyable to read and learn from!

kitotik 9y ago
Agreed! In addition to the authors skills, Vue just seems to win the readability battle hands down when compared to other js frameworks. The single file components are really quite magical in practice.
ohadron 9y ago
Thank you very much :) I honestly think Vue, it's docs, style guide and examples make it really easy to build relatively complex stuff while keeping it very readable.

rajeevcbhatia 9y ago

404 please let me know if you fix the broken reference. pretty excited about this

leephillips 9y ago

Very nice! The "env" control didn't have any audible effect for me. What's it supposed to do?

ohadron 9y ago
It should control the terminal pitch of the note. E.g. initial pitch = 440hz. Env = 1 -> terminal pitch 440hz Env = 0.5 -> terminal pitch 220hz See here: https://gitlab.com/inverted3/drum-machine/blob/master/src/components/Machine.vue#L151 https://gitlab.com/inverted3/drum-machine/blob/master/src/co...
- leephillips 9y ago
  It has no effect on either Chrome or Firefox, Ubuntu laptop.
jasonjayr 9y ago
Set the length longer to hear what it does

Mizza 9y ago

Cool! Nice design! The kick drum is way too hard to tune, I can only tune to 60, 147 and 234. Either make the steps smaller or let me type in my own values maybe?

ohadron 9y ago
True! Good point. Your two suggestions are good - either that or a non-linear curve. Thanks!

carlbarrdahl 9y ago

Very cool! Would it be possible to store beats and use some kind of autocomplete in a list below to compare popular user patterns? Or why not try to import famous drum patterns using midi import or sound analysis? Would love to browse through Led Zeppeleins, for example, drum tracks visually! Next you could add piano roll and do the same for instruments. This might make it possible to search tracks by scales, chord progressions, melodies, motifs etc...

ohadron 9y ago
Thanks for the suggestions! Definitely possible I'll try some of these.
vdnkh 9y ago
I've tried recording WebAudio output and it's actually really hard. I think you'd have to store a representative data structure rather than the data coming from the nodes.
midgetjones 9y ago
Check out http://funklet.com/ http://funklet.com/ Also, you can create 'groove templates' in Logic Pro, which lets you analyze the groove of one track, and then apply it to another.

nfriedly 9y ago

Seems to sound better in Chrome than Firefox, especially deep sounds like, e.g. the bottom line on the chicken preset. (I'm on a macbook pro if it makes a difference)

fenomas 9y ago
Not sure why, but for me in current Firefox it sounds like an absolute mess - just hiss and clicks. It sounds like there's no gain envelope being applied, both the oscillator and the noise sample play their full duration at full gain. This is on both windows and mac. Weird.
- ohadron 9y ago
  I'm ashamed to admit I didn't even test this on anything other than the devices and browsers I had open at the moment (Chrome on Mac and on Android). I'll check what's the deal with FF - should probably be easy to fix. Thanks for the heads up!
  - fenomas 9y ago
    It's extra surprising to me, because I've been doing some nontrivial procedural Web Audio stuff, and I've also never checked my project in FF, but now that I do I find it sounds identical to Chrome. If you wouldn't mind, please post what the problem was if you figure it out! Edit to add: my best guess is that you need to add a "setValueAtTime" call between these two lines, so that the exponential ramp has a scheduled value to start from. https://gitlab.com/inverted3/drum-machine/blob/master/src/components/Machine.vue#L161-162 https://gitlab.com/inverted3/drum-machine/blob/master/src/co...
    - ohadron 9y ago
      I figured it out - I hope. Your suggestion was a major part of the solution - Chrome works great with just setting osc.gain.value = 1 But for this to work on Safari & FF it needs to be set like this: oscVol.gain.setValueAtTime(1, startTime)

nugator 9y ago

Really cool! Not able to turn the knobs on a touchscreen, that would make it perfect.

ohadron 9y ago
Yes, I'll be fixing that. Thanks! :)

mellinoe 9y ago

Very nice! I've always been fascinated by synth and sequencer programming. Small nit: I'm used to being able to drag "upwards" to make a knob's value higher, but here it seems to do cause the value to decrease. Perhaps I'm just too used to how FL Studio behaves and others prefer this way.

ohadron 9y ago
You're right, this is the standard way to manipulate knobs. I'll be fixing this. Thanks!

rjromero 9y ago

Quick fix for Safari: var AudioContext = window.AudioContext || window.webkitAudioContext;

ohadron 9y ago
Will try that. Thanks!
ohadron 9y ago
Was a bit more difficult but that was a step in the right direction. Thanks! https://gitlab.com/inverted3/drum-machine/commit/79c0eba42ec9d58a2be9594bac5cdbec0ab96b90 https://gitlab.com/inverted3/drum-machine/commit/79c0eba42ec...

joshontheweb 9y ago

Very cool! I love seeing all the stuff people are building with web audio. It would be great to have a way at some point to use web-based VST's in popular DAWs. In a similar vein, I made a simple collaborative beat sequencer with some friends for the Node Knockout awhile back. http://ebb.somethingcoded.com/ http://ebb.somethingcoded.com/ It just uses samples for playback since web audio wasn't a thing back then but I'm working on porting it over to doing full synthesis in the browser. FYI- You need to invite friends to join in with you as each person can only control a single track. Or just join in multiple tabs and play by yourself ;)

ohadron 9y ago
This is amazing!
mmjaa 9y ago
Hey now, I'm as dizzy as anyone at all the free music-making tools from the Interwebs, but lets be honest .. "web audio" isn't much more than "browser audio" in the context of the DAW landscape, though, isn't it? i.e. giving the DOM access to OS-provided audio services is one thing, doing real audio processing locally .. still kinda relevant, no? I mean, yeah .. some DAW's are better than other, but give me native for this, or gtfo, kthxbai ..

dahart 9y ago

Totally awesome, nice project! Makes me want to do some web audio right now. What was the hardest part of this demo, were there any tricky pieces?

ohadron 9y ago
Thanks for the kind words :) The hardest part by far was making the timing rock solid - it involves syncing between the browser rendering engine and the audio context timer. My solution was based on pointers from this comprehensive post: https://www.html5rocks.com/en/tutorials/audio/scheduling/ https://www.html5rocks.com/en/tutorials/audio/scheduling/

tomcam 9y ago

Great piece of work! Play with this even if you think you don't know how to work a drum synth.

peternicky 9y ago

No mobile support?

ohadron 9y ago
Among many other shortcomings :) For starters, I'll be fixing the knob touch issue.

33degrees 9y ago

Nice! But the knobs turn the opposite way the vast majority of music apps do...

ohadron 9y ago
You're right! Been using audio software for the last 20 years yet somehow I missed this. Will be fixed. Thanks!

saoha 9y ago

I like it