
Show HN: TB-303 Synth, Drum Machine and Sequencer in Web Audio - errozero
http://www.errozero.co.uk/acid-machine/
======
djaychela
That is very cool! Just spent a bit of time playing with it, and while I
wouldn't say I was a 303/808 connoisseur (unlike a friend who is pretty famous
for his use of them), sounds pretty good to me; it's not perfect (it sounds
like the filters aren't quite there in terms of extreme settings of resonance
and envelope), but it's good. I've not used RB338 for years, so it could be
mis-remembering, but it's almost like the sounds need controls that 'go to 11'
to get to where you'd want them to be?

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!

~~~
louthy
> I wouldn't say I was a 303/808 connoisseur

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.

[1] [https://youtu.be/4lhXeTGMo2c?t=796](https://youtu.be/4lhXeTGMo2c?t=796)

~~~
dharma1
I agree. It's the instabilities and nonlinearities in analog audio that give
it character.

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

~~~
louthy
> or even noticeable by most people,

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.

[https://www.youtube.com/watch?v=JZzZ1jdvIyM](https://www.youtube.com/watch?v=JZzZ1jdvIyM)

~~~
tomduncalf
Ooh, where did you play? Love that track, will have to try and catch you play
sometime if you play that sort of thing :)

~~~
tomduncalf
Won't let me reply to you directly, but cool! I shall keep an eye out as I
live round that neck of the woods - hadn't even heard of that venue. I'll give
your mixes a listen tomorrow, cheers – recognised your name from the 4Four
site I used to go on occasionally :)

~~~
louthy
Heh, yeah I still run 4four - although you'll be lucky to log into it now, it
was killed by the march of various sites (Facebook, Soundcloud, RA), to the
point that it went from 10,000 unique visitors per day to 100s. I'd like to
resurrect it at some point, but it'd need a better value-proposition.

------
errozero
Hey HN, this is something I have been working on for most of this year. It
started out as a more fully featured web-based daw that would have lots of
different instruments with its own plugin format. I got quite far into the
project and built a very modular system so it is easy to create more
instruments by just dropping in a js file and a view file for the visuals.

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.

------
racl101
Awesome! Brings back memories of playing with Rebirth. Love the different
design.

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.

~~~
kowdermeister
I'm still affected, I got completely hooked on and transitioned to Reason. I'm
a fan ever since.

I remember fighting for the "server" Mac in the class room because that was
only machine powerful enough capable of running ReBirth.

------
vdnkh
Wow this is awesome! I'm building something similar with WebMIDI and WebAudio
and I've been blocked trying to get recording to work. My current solution is
sampling my OscillatorNodes with a MediaRecorder and turning the resulting
blob into an .ogg file but it only works in Firefox (Chrome has a bug with
decoding ogg with WebAudio). Do you mind elaborating on how you do your wav
recording?

~~~
errozero
I experimented with the MediaRecorder too but couldn't get anything to work.
In the end, I used this:
[https://github.com/mattdiamond/Recorderjs](https://github.com/mattdiamond/Recorderjs)
\- It has been abandoned by the author and the forceDownload function does not
work anymore so I had to replace that. I'll send you a copy of my version if
you like?

~~~
catshirt
slightly inefficient, but you can use a ScriptProcessorNode [1]. just copy the
buffer right before it reaches your destination and encode it as WAV when
you're done recording. (Audio Worker would be the ideal solution but i don't
think they're implemented yet).

something like this:
[http://pastebin.com/UP3F09Wn](http://pastebin.com/UP3F09Wn)

[1] [https://developer.mozilla.org/en-
US/docs/Web/API/ScriptProce...](https://developer.mozilla.org/en-
US/docs/Web/API/ScriptProcessorNode)

~~~
vdnkh
I tried this but using ScriptProcessorNodes is a pain in practice because of
how the events work:

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

~~~
catshirt
i mean, of course events are going to fire like mad. welcome to the world of
audio processing. :)

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...](https://github.com/mattdiamond/Recorderjs/blob/master/src/recorder.js#L21-L30)

reassembling the chunks:
[https://github.com/mattdiamond/Recorderjs/blob/master/src/re...](https://github.com/mattdiamond/Recorderjs/blob/master/src/recorder.js#L97-L101)

~~~
vdnkh
> if (!this.recording) return;

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.

~~~
errozero
In Acid Machine, I have created a kind of virtual 4 channel mixer, that is the
only thing that connects directly to the main destination output. All osc
nodes that are generated by an instrument get connected to the instruments
master gain node, then that connects to one of the mixer channels. All mixer
channels then connect to a master mixer gain, then the output.

If you do it that way, you just need to attach the recorder to the master
output of the mixer.

~~~
vdnkh
Thanks for the advice! What node would be a mixer in WebAudio?

~~~
catshirt
if all you're trying to do is combine nodes in the graph a gain node is
standard. (that is, you can connect any number of oscillators to a single
gain).

~~~
vdnkh
Great thanks. But throughout this project I've been wondering: why can't I
buffer a damn oscillator (or gain) node?

------
dharma1
Nice work! Web Audio has come on a lot.

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.

[https://www.thomann.de/gb/mam_mb33_retro.htm](https://www.thomann.de/gb/mam_mb33_retro.htm)

[https://www.youtube.com/watch?v=Bb9C7NRCmZ4](https://www.youtube.com/watch?v=Bb9C7NRCmZ4)

~~~
tuzemec
Wow... that little box sounds really nice. Probably I'll get one.

------
jkrippy
This took me a minute to figure out so writing it down in case it helps
someone else. The sequencer button allows you to string your patterns together
into a song. To actually play them in that sequence though, you need to click
the "Pattern Mode" grey button at the top of the screen and toggle it to "Song
Mode". Then, the play button (or spacebar) will play your song in that
pattern.

~~~
errozero
Thanks for that, I really need to write a little getting started guide or a
tutorial video.

~~~
yaigi
I think that would be really helpful, there are bound to be some features in
there that aren't immediately obvious.

------
exDM69
Very nice. Sounds quite good and works very well. I tested it with Firefox 50
on Linux. No audio issues of any kind.

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.

~~~
errozero
You can use your keyboard number keys to play the drum machine.

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.

~~~
exDM69
I don't have a midi controller so it would be nice to have a way to play the
notes "live" with the keyboard. And perhaps turn the knobs using number keys
or function keys.

------
pistle
This is very good work in this space. Rebirth 338 was the bees knees tipping
point for virtual analog on a PC. We have been seeing numerous things that
hint at the direction of where things can end up and this is a good way to
establish cred for browser-based audio generation.

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?

------
vincentriemer
This is awesome! Now if only there was a web-protocol for syncing the audio
clocks of two webapps I could really jam out with this and (shameless plug)
[http://io808.com](http://io808.com) together.

~~~
errozero
Now I'm really trying to think of ways that could be done in a fast way. Any
ideas?

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.

------
hoorayimhelping
Love it so much. Going to go home and play with this for a few hours. Thank
you for making this and sharing it.

------
CamperBob2
Can't say I'm a fan of the skeuomorphic rotary knobs that don't even work like
rotary knobs, but like vertical sliders.

------
wazoox
Works perfectly well for me in Firefox 50/Linux, on a 5 years old machine :)

------
rcbuse
Having flashbacks to using Rebirth-338

------
senorjazz
it "looks" a lot better than it did, but I have no idea what is going on. Used
to play around with the old version quite a lot when bored at work :)

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.

~~~
senorjazz
also couldn't get it to work in FF, just sits at loading, even though had
turned off ublock / noscript / privacybadger and had to load up chrome.

~~~
errozero
It should show a full screen message on FF to say that it will not work as
well as Chrome. It has a continue button to hide the message. Did you see that
or did it just show the loading bar straight away?

