Including whitespace it's 102 lines: https://github.com/omgmog/beatmaker/blob/master/js/index.js
An interesting thing, after a short while the browser unloads the page (Chrome on Mac OS) -- probably due to memory usage, which I think this is down to creating a new Audio element each time, rather than initialising them once and then triggering .play() when needed.
update:
Alright I'm using AudioContext now rather than `new Audio`, seems to be performing a lot better. This puts us at about 144 lines.
I doubt high precision timing can be done with the same amount of code.
I've researched this in the past and it's nowehere near significant more complexity. In fact, a primitive solution is about the same as a setInterval call.
The sounds should work across browsers when you're manually playing (use the bottom row of your keyboard) but when sequenced playback happens, things get weird. Chrome more accurately reproduces the sounds as I'm imagining them.
Grab the whole thing at https://github.com/leviathant/BossDR110/tree/feature/synthes... or just play around with it yourself at http://bitrotten.com/dr110/webaudio/
Here's mine: http://wa-101.net/. I used setInterval too, because I found the web audio api docs for the timing functions rather confusing, and I'd set myself a time-limit on getting something "attractive" working.
(height problem since the slider is rotated to make it vertical).
http://www.bambax.com/beatboxer/index.html#x||||x||||x||||x|...
Edit: now also saves bpm value: http://www.bambax.com/beatboxer/#x||||x||||x||||x||||||x||x|...
Have you considered using WebAudio's streaming functionality to tighten up the timing to something more rock solid? Probably a bit more setup in the first part, but for a drum machine especially, you get much better control over timing and playback note length.
I wrote an Ionic specific example of using the browser's WebAudio functionality to write a metronome app here: https://www.airpair.com/ionic-framework/posts/using-web-audi...
http://www.bambax.com/beatboxer/index.html#x||||x||||x||||x|...
setInterval(function() {...}, 1 / (4*BPM/(60*1000)));
Try a better browser first. You might as well be using IE 8. I could write a book about the things that don't work in Safari.
https://github.com/leviathant/BossDR110/blob/feature/synthes...
To the parent, what did you use as the reference for the synthesis patches and parameters? I wouldn't mind trying something similar in ChucK.
There's a great breakdown of how the circuitry works at http://www.sdiy.org/richardc64/new_drums/dr110/dr110a1.html - but some of the frequency values there (related to the cymbals) didn't sound right to me - though it's possible I misinterpreted what's going on at that page.
I added a sample-based ChucK class with examples here https://github.com/heuermh/lick/commit/be60769ae32ca955b35b9....
I'll dig into the docs you linked to and see if I can come up with a synthesized version as well!
This is probably most evident if you play a roll on the snare or the handclap. A free-running LFO on the noise sources for these instruments prevents "machine-gunning" like you get when you roll a sample.