
Show HN: TR-101 – A drum synth/sequencer made with Vue and the web audio API - ohadron
https://inverted3.gitlab.io/drum-machine/
======
Mizza
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
True! Good point. Your two suggestions are good - either that or a non-linear
curve.

Thanks!

------
joshontheweb
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 ;)

~~~
mmjaa
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 ..

------
carlbarrdahl
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...

~~~
midgetjones
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.

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

~~~
kitotik
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.

------
nfriedly
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
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
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
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/co...](https://gitlab.com/inverted3/drum-
machine/blob/master/src/components/Machine.vue#L161-162)

~~~
ohadron
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)

~~~
fenomas
That's what I meant, yeah. Ramps in web audio params don't go from the current
value to the target value, they're treated as starting from whatever the
previously scheduled value was. In this case there wasn't a previously
scheduled value, so I guess behavior was undefined and the browsers differed
in how they handled it.

------
mellinoe
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
You're right, this is the standard way to manipulate knobs. I'll be fixing
this. Thanks!

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

~~~
ohadron
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/co...](https://gitlab.com/inverted3/drum-
machine/blob/master/src/components/Machine.vue#L151)

~~~
leephillips
It has no effect on either Chrome or Firefox, Ubuntu laptop.

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

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

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

------
dahart
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
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/)

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

~~~
ohadron
Was a bit more difficult but that was a step in the right direction. Thanks!

[https://gitlab.com/inverted3/drum-
machine/commit/79c0eba42ec...](https://gitlab.com/inverted3/drum-
machine/commit/79c0eba42ec9d58a2be9594bac5cdbec0ab96b90)

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

~~~
ohadron
Yes, I'll be fixing that. Thanks! :)

------
saoha
I like it

------
peternicky
No mobile support?

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

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

