Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: JavaScript Acid Techno Machine (errozero.co.uk)
161 points by errozero on Mar 10, 2015 | hide | past | web | favorite | 57 comments

Quick tutorial for anyone who isn't familiar with the music gear being emulated:

The top two items are two instances of an imitation of a Roland TB-303 bassline synth. The bottom item is an imitation of a Roland TR-909 drum machine (a drum synthesizer).

Press 'Play' in the top left to start all three instruments playing. Each is now running through 4 bars of 4 beats, or 16 steps in total. By default the first bass synth is playing a low 'C' on every step, the second bass synth is playing nothing, and the drum machine is playing a bass drum on the first step of each bar (steps 1, 5, 9, and 13).

Laying out a pattern on the drum machine is a little more intuitive, so start with that. The row of 16 buttons represents the steps on which a hit will be played for the currently selected drum type. Buttons for switching modes to edit the pattern for each drum type are listed horizontally (BD, SD etc). Switch to a different drum and add some hits to the pattern by clicking on those steps in the row of 16 buttons.

The bassline synths are programmed in basically the opposite way. The 16 steps become the modes you switch between (by clicking the UP and DN buttons under 'Current Step') and clicking on any of the the 13 musical note buttons (coloured like piano keys) will select the note which plays on that step. The highlighted note can also be deselected so that no note will be played for that step. Try stepping through and changing the notes which are played on each step or deselecting notes to create a more interesting rhythmic pattern.

Acid Machine is a web based tool for creating Acid Techno. It consists of 2x 303 style synths and a drum machine. I'm currently working on a song mode so you can string patterns together, record automation and save your finished track.

Hit the randomize button for some instant results.


Any other synths you could put in? I'm guessing a PPG/Waldorf or Prophet VS or DX7 would send the CPU to 140 deg. Celsius.

BTW /r/edm liked it: http://www.reddit.com/r/edmproduction/comments/2yphc8/a_303_... (pretty funny)


oh, and anybody want to tweak on a basic 2 oscillator analog, here's one in Flash: http://www.audiosauna.com/studio/

This is awesome!

Feature request: export the sample to wav/mp3 :)

Hey thanks, I'm working on that as well as the ability to create a full length track and save it with a unique url to share with with people.

Record to wav is now possible! :)

That's really impressive. Randomize even makes pretty compelling loops.

It gets bogged down for me and starts stuttering and losing the beat when I have all three tracks working (i7 system with 8GB RAM, running current Firefox developer release on a modern Linux system). I wouldn't know where to start on troubleshooting performance problems.

I get that too on Firefox, I'm hoping to try out the web-worker idea suggested by meandave to fix it. At the moment it works much better on Chrome for some reason.

(Firefox Web audio developer here)

It's because, we've not optimised our implementation _at all_ (I'm exaggerating a bit but you get the idea).

That said now that Firefox's implementation is in good shape in terms of spec compliance, we have started (very recently, one week or something) to work on performance.

That's good to hear. Just noticed your username and remembered you commented on a stack overflow thread of mine whilst I was developing this, about 24db filters: http://stackoverflow.com/questions/28502028/web-audio-api-24...

Pretty groovy! The 303 sound is good, and I say that with a real one sitting right here.

Thanks! This article helped quite a bit with the 303 sound: http://www.firstpr.com.au/rwi/dfish/303-unique.html Also played about with rebirth a lot whilst creating this.

Yeah, Robin Whittle probably knows more about the 303 than anyone outside of Roland Japan, and he's very generous with his knowledge too. You should be proud, you did an excellent job.

This is very bloody good, well done. One of the best Show HN's I've seen in a while.

Really interesting what happens to the sound when you switch tabs (in Chrome at least): The sounds still play, but slowed down about 10x.

it is because chrome slows main thread js execution for inactive tabs. The solution is to do your scheduling (setInterval etc) in a web worker.

Yeah, that's a common Web Audio hassle. On mobile it gets even crazier, although I haven't tried this site in mobile.

For me, in Firefox on Yosemite, the slowdowns seem to come at random, even when the tab is in focus.

A workaround is to detach the tab and keep it visible. Then it doesn't need to be focused.

It sound awesome! Wouldn't want to work around that effect... hehe nifty.

Quite nice live gadget!

I would recommend doing your scheduling in a web worker. In chrome the playback will slow to a crawl when switching tabs. This is because chrome slows down mainthread js execution for inactive tabs. I have a little module I use to get around this limitation. https://github.com/meandavejustice/audio-clock

I'll check that out, it may help to speed things up in Firefox too which seems to slow down even with the tab in focus sometimes.

Weirdly enough, I like the way it slows down after switching tabs.

This is super impressive. I have a tiny bit of (hopefully constructive) criticism though, and it's not really against this work and what has been accomplished.

The TB303 has one of the worst sequencing interfaces of any hardware sequencer, so even as much as it is loved, I'd love to see something more modern in terms of UI for sequencing melodic parts.

Even step select/activation with 16 steps and keeping the TB303 keyboard sort of interface for actually selecting notes would be a lot more usable and immediate. Having to select the step number and enter a note is painful though and not very mouse friendly.. with hardware at least you can mash the heck out of the button.

Hey, yes that is a very good point and something I was thinking about changing. I think I'm going to swap out the whole keyboard and step selection for a mini piano roll under each synth.

Really impressive. If someone had told me 18 yrs ago that I shouldn't be so excited about ReBirth because one day it will be available in the browser :)

A feature request: delay time and hi-pass controls :)

Btw, the delay timing seems to be off a little bit.

Thanks, i'm hoping it will be as fully featured as rebirth by the time i'm finished. I would like to add in the ability to import a rebirth song file but i'm having trouble deciphering the hex code that's in the saved files.

Really? Wow! Maybe you could try contacting Christian Schaub http://www.webstube.com/pages/software/patterneditor/index.h... who has created a RB pattern editor for Mac. I guess he may know a bit about the format :) There was also a guy called Matthias Schill who made the pattern editor for Windows but unfortunately his webpage is down. Good luck!

Thanks for the suggestion, I emailed Christian Schaub and he's going to send me over what he knows! :) Hopefully I can add a Rebirth importer at some point in the next few weeks.

I've just added in some keyboard shortcuts to mute/unmute and randomize the instruments. Working on the save and share function today, it would be great to be able to hear what people have made.

If @errozero can recreate the ReBirth [1] app in javascript, then imagine what can be made in a few years time.

1: http://www.rebirthmuseum.com/

I think there is a lot more possible right now, creating this has given me a lot of new ideas for a more fully featured sequencer.

Utterly brilliant - where did my time go!

Feature request please - mute and randomize (at least) would sound great if you could pre-sync them with the repeat. I found myself trying to judge how much lag there is before they kick in. It would be great if you could just line up one or more before the repeat - which is where you will want them 99%. Maybe a check box option.

You have a fantastic performance application right now, please don't get drawn into making a sequencer and losing all the fun.

I added a sequencer - but also added a record to wave feature so the performance part of it should now be a lot more fun :)

Awesome work, just lost an hour! Might be worth adding a hover hint to the abbreviations on the drum machine. Took me a while to notice there was more to play with there.

Good idea, it's still very much a work in progress, i'll have to add some tips and basic instructions in there.

The 909 needs shuffle.

Really cool toy! I wonder how the randomizer works, does it use some predefined scale or some other heuristics to always end up with something nice?

The notes are selected from a D minor pentatonic scale. It selects 4 notes at a time, then randomly decides if it should use the previous 4 notes again or generate a fresh 4.

Really nice. Doesn't on Safari latest

Just added a save feature to this - it generates a unique url so you can share what you have created.

Thx, is really fun to use. A recording feature or an export as an WAV/MP3 file would be great.

Hey, I'm working on a save feature right now, hoping to get something up later today.

I like that the default is the opening to "call your girlfriend"

Haha, I've never even heard that song, just had a listen and it's almost identical!

I get no sound whatsoever. Chromium and Firefox on Ubuntu 14.04 LTS

This is awesome, somehow it reminds me of the Commodore 64

This is great! Do you have the source anywhere hosted?

That's a little bit out of date, the main repo is on BitBucket - I copied it over to Github a few days ago. I'll try to keep it in sync with the main one every few days.

Basic sequencer now added. Automation next!

Very nice project ! Is it open source ?

I anwser to my own question because I haven't read enough: https://github.com/errozero/acidmachine

Incredible, great work!

This is awesome.

Brings back so many memories.

Applications are open for YC Winter 2020

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact