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

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

inverted3.gitlab.io

105 pointsohadron38 comments

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?

True! Good point. Your two suggestions are good - either that or a non-linear curve.

Thanks!

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/

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

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

This is amazing!

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

Check out 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.

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.

Thanks for the suggestions! Definitely possible I'll try some of these.

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

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.

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.

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)

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.

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!

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

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)

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.

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.

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

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

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

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

Set the length longer to hear what it does

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

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

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

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?

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/

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

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

https://gitlab.com/inverted3/drum-machine/commit/79c0eba42ec...

Will try that. Thanks!

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

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

I like it

No mobile support?

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

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

Reply on news.ycombinator.com