Show HN: Drum machine in 100 lines of HTML/JS

#1

Post by siggy » Mon, Sep 12, 2016, 5:01 AM UTC

Show HN: Drum machine in 100 lines of HTML/JS
sig.gy

Re: Show HN: Drum machine in 100 lines of HTML/JS

#2

Post by sandebert » Mon, Sep 12, 2016, 5:42 AM UTC

I can change color of the boxes. Something animates from left to right. But I can't hear anything. (Android 7, latest Chrome.)

Re: Show HN: Drum machine in 100 lines of HTML/JS

#3

Post by jonwot » Mon, Sep 12, 2016, 5:45 AM UTC

The last 2 sequence boxes for each type of hit wrap around to a new line (firefox). Pretty cool for 100 lines of HTML and JS.

Re: Show HN: Drum machine in 100 lines of HTML/JS

#4

Post by prashnts » Mon, Sep 12, 2016, 5:48 AM UTC

Very cool! It'd be great if you could also serialize the notes to the url, so people can share these.

Re: Show HN: Drum machine in 100 lines of HTML/JS

#5

Post by aquacat » Mon, Sep 12, 2016, 6:31 AM UTC

Sound is out of sync in Safari (9.1.3).

Re: Show HN: Drum machine in 100 lines of HTML/JS

#6

Post by djaychela » Mon, Sep 12, 2016, 6:35 AM UTC

sandebert wrote: post #2

I can change color of the boxes. Something animates from left to right. But I can't hear anything. (Android 7, latest Chrome.)

Me too - android 6,latest chrome. Works fine on Firefox on the same phone...

Re: Show HN: Drum machine in 100 lines of HTML/JS

#7

Post by GoToRO » Mon, Sep 12, 2016, 6:41 AM UTC

Cool! when tab is not active, the rhythm slows down in Chrome/win7.

Re: Show HN: Drum machine in 100 lines of HTML/JS

#8

Post by nprescott » Mon, Sep 12, 2016, 6:57 AM UTC

GoToRO wrote: post #7

Cool! when tab is not active, the rhythm slows down in Chrome/win7.

This is due to a step taken by the browser to improve performance, namely, timers in Chrome are limited to 'ticking' at most once a second when a tab is backgrounded. The drum loop is at its core:

    setInterval(function() {...}, 1 / (4*BPM/(60*1000)));

https://codereview.chromium.org/6577021

Re: Show HN: Drum machine in 100 lines of HTML/JS

#9

Post by cyberferret » Mon, Sep 12, 2016, 7:05 AM UTC

Nice work! Although from my experience with audio programming in the browser, setInterval() is always fraught with timing danger and inconsistencies.

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

Re: Show HN: Drum machine in 100 lines of HTML/JS

#10

Post by paublyrne » Mon, Sep 12, 2016, 7:05 AM UTC

Very nice. Could you add a hi-hat?