Show HN: TB-303 Synth, Drum Machine and Sequencer in Web Audio
errozero.co.uk
errozero.co.uk
I like the simplicity of it and the ease of producing a WAV from a session, and the UI seems to be simple and straightforward to use. I'll test it out on some students this week, see what they come up with.
I have a couple of minor criticisms - I don't think the ballistics of the rotary controls is right, but I can't quite put my finger on -why-, just seems a bit too sensitive or there's something about the linearity of it? Would it be possible to add the Cubase-style "shift reduces the sensitivity while dragging" to them?
The other thing was editing the grid - I'd prefer left click to toggle an event on and off rather than right-click to clear; while this is personal preference, it's one that I've got used to using Cubase for 20 years or so in the drum editor, so it's a little counter-intuitive to have to do it another way, and I think many other editors are similar?
Finally, any chance of an undo in the editor?
But overall, love it. An amazing demonstration of what's possible in a browser, and of your skills!
People modded the real hardware to do just that (eg. Real World Interfaces' Devil Fish mod: http://www.firstpr.com.au/rwi/dfish/ ). I'm not enough of a 303 connoisseur either to say if this softsynth is realistic or not, but maybe you're remembering the sound of modded hardware.
TB-303 was one of the synths I always drooled over as a kid, though I do think that it's legend is perhaps bigger than the synth itself was.
Going back to this Show HN: this is an awesome project. Sounds good (albeit I too can't comment on accuracy) and performs well too (ie it doesn't appear to grind my browser to a halt like many technical demos do). The UX could use a little work but frankly few DAWs have good UX in my opinion so this is at least as good as the professional products in that department.
I'm kinda the same with the 303; I have enjoyed playing with them, but never got what some others can do out of them, but I think a lot is the music you're into - I was far more into prog stuff so never really got on that well with pattern-based sequencers.
I also tried to minimize any visual events that cause a repaint on the main instrument screen.
samples_to_tick=Math.floor( (125.0/bpm) * (1.0/50.0)*sampleRate );
Upon the counter reaching zero, the render loop actually jumps to do sequencing and effects/modulation and then resets to counter.
In my case, the tick occurs at 50Hz because that's the PAL frame clock used in Amiga and MS-DOS module trackers like Scream Tracker and FastTracker 2. Typically trackers use a "speed" setting to additionally specify the number of ticks per pattern step - usually 6.
Although you do get sample-accurate timing, you also get latency up to the size of a single audio buffer (I use 4096 samples). While this isn't really an issue when doing purely playback, it obviously is when the audio is controlled real-time (eg. MIDI).
Anyway - the module player is at http://mod.haxor.fi/ and the source code at https://github.com/jhalme/webaudio-mod-player
Regarding the rotary controls: These work by measuring the distance in pixels from the point you first clicked to the point the mouse have moved to. I only managed to test this on a 3 different computers so I think if you have a really high resolution, the knobs will move too fast. I'll change this at some point to be percentage based instead of pixel based.
I added the right-click to delete as that is how FL-Studio works, which is my favorite daw. Its handy to keep the left click as you can use it to select a note in the drum editor and then set velocity.
Thanks for checking it out!
The current solution is just bad bad bad. :(
Awesome project otherwise. :)
I would have suggested making them respond linearly, but to both x and y motion. That is, the effective position change is the maximum of the mouse x and y axis displacements from the click position.
My view is that rotary motion is not useful in an on-screen GUI (unless you have a MS Surface Dial perhaps?); rotary-looking controls only exist to save space and provide a friendly appearance. The way they actually behave should be whatever is most efficient to drive, regardless of their shape.
This doesn't mean that you end up with having to carefully dial the knob, but it does let you click and drag the mouse in such a way that the rotary dial at least rotates in the direction you'd expect. The current behavior sometimes turns CW, sometimes CCW, seemingly at random--if we decide to skeuomorph, we might as well skeumorph correctly.
The envmod knob also affects both the max and min cutoff values from the main envelope generator.. that part is tricky - the envmod and cutoff knobs are exponentially tapered, but the filter control circuit also contains an exponentiator so the sweep is sort of doubly exponential but its hard to tell the difference.
Actually, now I've used them for a bit, I find them fine to use. The initial learning curve is steep, but maybe it's worth it. What I'd ask for next is keyboard compatibility :)
I would, I own a real TB-303 (as well as a TR-808 and a TR-909), and this suffers from the same problems that all emulations suffer (even Roland's own TR-3 and TR-03): the sound is really 'static'; real 303s have an instability in the sound that gives them a nice natural vibrato, which at the extremes (resonance full, and sweeping the cut-off), causes mini-ripples of sound that give the 303 that sound.
Have a listen to this to see what I mean (try to avoid the Roland shills with their "it's just as good" opinion) [1]
It's pretty much the same with all emulations of analogue gear. I am yet to hear any plugin or emulation come close to the sound of analogue. The closest I've experienced to-date Uhe Diva, but even that doesn't have the liveliness of the real deal.
The 909 and 808 are a lot easier to clone.
Now whether that's worth emulating, or even noticeable by most people, I'm not sure. But I'm buying all analog, and mostly VCO synths
Andy Cytomic is also doing good work on analogue filter modeling
It's literally the first thing I would do if I wanted to come up with something that sounded the least bit like the real thing.
I was using my own FIR derivation of a third-order low-pass Butterworth filter to do software synthesis in 2008 while I was in high school. This is truly basic stuff.
Real analogue modelling has things like noise, hysteresis, and a dependence on such broad factors as temperature and even EM fields.
https://pdfs.semanticscholar.org/f03a/310c40a48be62206ce5ff1...
I think it is, but on quite a subliminal level. As well as producing music I also DJ, and I notice a marked increase in energy levels of people on a dancefloor when I play tracks that I know are made with analogue synths and drum machines.
Two weeks ago I was playing at a club in London and played Donnato Dozzy - Gol [1], it's so simple as a track, almost nothing to it, but it's a real 303 and 808 that drives the track. I had tons of people asking me what it was, and I could see the room had got more energetic. I even had this conversation about it after the night.
So even for those that don't know exactly why, I think they do feel. I've seen it happen lots of times.
> But I'm buying all analog, and mostly VCO synths
It's still there with DCOs in my opinion. They're cleaner for sure, but they still have that sound. My Juno 106 is one hell of a synth, and that's DCOs, as is my Waldorf Pulse 2 (which for almost no money is a great sounding machine), but then I have the VCOs: Moog Sub 37, Roland TB-303, Roland SH-101, and the incredible DSI OB-6. They're all amazing sound. Especially compared to my digital synths (Nord Lead A1, Roland Super JV 1080). I've stopped using plugins completely now.
DCO - I like them too, I just have enough of them already (MKS-70, MKS-50, JX-3P, Cheetah MS6). Might pick up the new Behringer 12 poly DCO if it's good, but that'll be enough DCO for me. Still plenty of room for VCO synths though, I've got 6-7 VCO mono synths but they are all small or racked and sound very different :)
It'll probably sound too clean and will end up buying vintage VCO synths instead though :)
Maybe just get a Jupiter 8, it'll save the hassle ;)
For now I've been using this nifty app to join together multiple monophonic VCO synths to make a polyphonic VCO synth - http://polymer-app.com/
It's a new venue in Dalston called Club Makossa for the Dr Blacks night; near Dalston Superstore and the now defunct Dance Tunnel.
> will have to try and catch you play sometime if you play that sort of thing
I play a range of stuff, but yeah that's fairly typical for when I play out. I don't know when I'll be playing in London again, but will probs be back playing for Dr Blacks again in february.
I have some stuff on my Soundcloud page that might be of interest:
The last time I played at Fabric they asked me to do a mix for their blog to promo it. This starts off quite housey, but ends up in a similar area to the Donatto Dozzy sound: https://soundcloud.com/paullouth/paul-louth-fabric-mix-march...
A bit tougher, this is a live one from a festival in Austria : https://soundcloud.com/paullouth/paul-louth-live-at-sonnenpa...
On a more techno level, check out me and my friend DJing back-to-back for 4 hours as 'Waterwalk' in Berlin. There's a number of Donnato Dozzy tracks on there, and Peter Van Hoesen - who I consider to be quite similar as a producer (if a bit tougher): https://soundcloud.com/water-walk/waterwalk-live-from-staub-...
This is quite deep dubby techno, a personal favourite: https://soundcloud.com/paullouth/paul-louth-lux
This is a live show on Ministry of Sound radio. A bit more melodic: https://soundcloud.com/paullouth/paul-louth-live-on-ministry...
There's lots of other mixes on there, but those should be roughly in the right area if you like the Gol track.
I'm sorry, but I cannot just let you get away with that. There are so, so many other factors that would "energise" people on a dance-floor than simply whether the source of one or two elements in the track playing are voltage or digital based.
While analogue stuff does sound better (in my opinion), this, along with the inherent confirmation bias of such an observation, is utter make-believe.
I've been DJing in nightclubs for 20 years. Please take my word for it that I know what I'm talking about here. This isn't a one-off.
In terms of signal-to-noise, well yeah they're all noisy, but not terribly if you do your gain staging properly, and gate anything that's excessively noisy.
Actually the noise is part of the character of the imperfection. Look at emulations of classic gear, and they're all digitally putting the noise back in.
To me, it's a demo of what's capable with the Web Audio API. It's _amazing_, because with a URL you can share a drum machine equal to any of the other emulators you'd need to buy (or, at least, download).
Check this, it's a Moog Minimoog Model D recration.
https://www.youtube.com/watch?v=ZIPu2Su-V9Q
insanely close to the original, I've played with the demo.
I bought a Moog Mother 32 instead :) Can't beat the real analog deal. Everything on it sounds amazing!
It was taking longer than I thought so I decided to create a V2 of my old Acid Machine app using this code as a base.
It's great to see people talking about it after being hidden away on my laptop for so long. If anyone has any technical questions, I would love to answer them. Also.. I am on the lookout for some freelance work at the moment.
Boy I still remember playing with Propellerhead Rebirth in the late '90s and that was pretty great at the time. It made me a bit of money in high school to simply create some basslines and burn them onto a CD for friends.
By the time Reason 3.0 came out I stopped playing with this kind of software and only really used tools like Audacity for editing sound files. But also, my taste for Electronic music had died down. It had become very generic for me for the most part.
Still though, it's cool to a web version of this software and the amazing things you can do with HTML5.
I remember fighting for the "server" Mac in the class room because that was only machine powerful enough capable of running ReBirth.
I wonder if instead of encoding as ogg/opus I could switch the string to WAV instead?
something like this: http://pastebin.com/UP3F09Wn
[1] https://developer.mozilla.org/en-US/docs/Web/API/ScriptProce...
>An event, implementing the AudioProcessingEvent interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.
Events just fire like mad until you put stuff in the output buffer. Couldn't get it to work like I needed it to.
MediaRecorder works the same way (but for MediaStreamSources, not BufferSources).
the idea is that audio buffers are processed in chunks- an event fires for each chunk that is processed. the act of "recording" is just reassembling these chunks into a single ArrayBuffer.
edit: seems like Recorderjs works exactly this way (but implements features more than just recording, like exporting as WAV).
capturing the chunks: https://github.com/mattdiamond/Recorderjs/blob/master/src/re...
reassembling the chunks: https://github.com/mattdiamond/Recorderjs/blob/master/src/re...
This is the key I was missing in my implementation. Another challenge is wiring this up to multiple OscillatorNodes - the docs say a ScriptProcessorNode can only have one input. In my implementation I create a new OscillatorNode whenever you press a key.
If you do it that way, you just need to attach the recorder to the master output of the mixer.
it's also decent practice to send your oscillators into a mixer anyway so that they can be rerouted at large.
for instance, say you have 4 oscillators, 2 fx buses and an output. you route (4 oscillators) -> mixer -> fx bus 1 -> output. then if you want to switch the fx bus for your oscillators, you can just reroute the mixer instead of each oscillator individually.
in the case of a recorder, you'd want the end of your entire graph to look like this: mixer -> recorder -> output. this way your recorder is capturing all audio (oscillators, effects, etc). (and, as noted above, you have the option to reroute the mixer directly to the output when it's not recording).
You could have it as simple as 1 gain node for each channel which you use for input and output to the mixer master gain. This would make it difficult to add fx later though.
ABL3 still sounds better to me, but it's no surprise, Mike (the guy who wrote it) has made analog emulation his obsession for years.
Also, if you're in the market for actual analog hardware, I picked one of these up earlier this year, great juicy sounding little box, cheap as chips.
Is there a way to use the keyboard to control the synth and the knobs? I grew up with trackers (and later Jeskola Buzz) and I always enjoyed playing with synths using a "keyboard piano" input.
I could probably add in keyboard control for the synth knobs, I might add that in a future update. If you have a midi controller, you can control almost everything with the midi learn functionality.
Generally good piano roll implementation, controls. It'd be nice to have a master fader and possibly a compressor amongst the effects implmemented.
I'd also love a swing parameter.
Something I've noticed is that knobs with a touch screen can be rough since your digit is covering the visual feedback. Maybe a single vertical line indicator next to the knob could mean you would know where you are and how far you can go when tweaking one?
The instruments in Acid Machine 2 are built in a modular way, kind of like a basic vst plugin. This is because I started out trying to make a more fully featured web daw. It would be possible to add in more instruments in the future.
I guess I was just used to how it worked before, this re-design of multiple full screen views is confusing, couldn't figure out how to get things to play, quick live edits don't seem possible now either.