Show HN: Drum machine in 100 lines of HTML/JS • Hacker News Board

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.

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

#24

Post by scottydelta » Mon, Sep 12, 2016, 9:19 AM UTC

it behaves weirdly when you change the tabs, must be because of setInterval?

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

#25

Post by yAnonymous » Mon, Sep 12, 2016, 9:22 AM UTC

kowdermeister wrote: post #16

Never use setInterval for audio based applications. It's just totally unreliable. WebAudio has nice built in features for high precision timing.

When the goal is showing off what you can do with 100 lines of code, what's wrong with it?

I doubt high precision timing can be done with the same amount of code.

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

#26

Post by yAnonymous » Mon, Sep 12, 2016, 9:26 AM UTC

scottydelta wrote: post #24

it behaves weirdly when you change the tabs, must be because of setInterval?

JS intervals are limited to one per second for background tabs.

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

#27

Post by kaeluka » Mon, Sep 12, 2016, 9:40 AM UTC

alz wrote: post #21

http://imgur.com/a/O1dy8

http://imgur.com/a/zEj4w

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

#28

Post by BHSPitMonkey » Mon, Sep 12, 2016, 9:54 AM UTC

Reminds me of one I made years ago (back before Web Audio, when the HTML5 tag was actually pretty new)[0]. It's not under 100 lines, but it's self-contained and (mostly) readable like this one is. These days I'd definitely go with Web Audio as the playback mechanism, of course.

[0] http://stepheneisenhauer.com/demos/drummachine/

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

#29

Post by bambax » Mon, Sep 12, 2016, 10:43 AM UTC

kaeluka wrote: post #27

alz wrote: post #21

http://imgur.com/a/O1dy8

http://imgur.com/a/zEj4w

http://www.bambax.com/beatboxer/#||||||x||||||||||||||x|||||...

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

#30

Post by omgmog » Mon, Sep 12, 2016, 10:51 AM UTC

I had a go at rewriting this to use requestAnimationFrame, and provide more instruments and some random/clear buttons: https://blog.omgmog.net/beatmaker/

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.