9 ms·
Show HN: Drum machine in 100 lines of HTML/JS
- sandebert 10y agoI can change color of the boxes. Something animates from left to right. But I can't hear anything. (Android 7, latest Chrome.)
- jonwot 10y agoThe 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.
- prashnts 10y agoVery cool! It'd be great if you could also serialize the notes to the url, so people can share these.
- bambax 10y agoAn implementation: http://www.bambax.com/beatboxer/index.html#x||||x||||x||||x||||||x||x||x||||||||||||||||||||x|x|||x||||||||||||||x|||| 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||x||||||||||||||||||||x||||x||||||||||||||||||150 http://www.bambax.com/beatboxer/#x||||x||||x||||x||||||x||x|...
- aquacat 10y agoSound is out of sync in Safari (9.1.3).
- GoToRO 10y agoCool! when tab is not active, the rhythm slows down in Chrome/win7.
- nprescott 10y agoThis 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 https://codereview.chromium.org/6577021
- cyberferret 10y agoNice 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-audio-api-for-precision-audio-in-ionic https://www.airpair.com/ionic-framework/posts/using-web-audi...
- paublyrne 10y agoVery nice. Could you add a hi-hat?
- sakri 10y agohehe.. I was just a few squares short of recreating drop it like it's hot :D
- deanclatworthy 10y agoHow peculiar you didn't use the webaudio API for this. I'm working on something similar right now for sun, but with a bank of generated sounds through the oscillator.
- sdrothrock 10y agoNice! A little feature suggestion -- it would be really cool if the current pattern were encoded in a URL so you could link it to friends. :)
- bambax 10y agoWith pattern encoding and history change: http://www.bambax.com/beatboxer/index.html#x||||x||||x||||x||||||x||x||x||||||||||||||||||||x|x|||x||||||||||||||x|||| http://www.bambax.com/beatboxer/index.html#x||||x||||x||||x|...
- bambax 10y agoWith a slider to change bpm: http://www.bambax.com/beatboxer/ http://www.bambax.com/beatboxer/
- kowdermeister 10y agoNever use setInterval for audio based applications. It's just totally unreliable. WebAudio has nice built in features for high precision timing.
- yAnonymous 10y agoWhen 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.
- iammyIP 10y agoFirst, it's an enourmous waste of computing resources. Second, it doesn't even work, since the 'setinterval' is unusable for audio timing. Third, what's there to show off? So Javascript got a 'PlayWav' function that you call in not so regular intervals depending on buttonstate. Simple beatbox is simple. Could aswell be 30 lines.
- aroman 10y agoNot sure why this is down voted — the demo literally does not work in my browser (Safari 10) because of the (mis)use of setInterval.
- yAnonymous 10y ago>Safari 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.
- kowdermeister 10y agoThe problmem is that it's shaking like it has Parkinson's. It can be be coded with webaudio with the same effort. 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.
- 10y ago
- scottydelta 10y agoit behaves weirdly when you change the tabs, must be because of setInterval?
- yAnonymous 10y agoJS intervals are limited to one per second for background tabs.
- alz 10y agohttp://imgur.com/a/O1dy8 http://imgur.com/a/O1dy8
- yAnonymous 10y agohttps://imgur.com/a/CN4vR https://imgur.com/a/CN4vR
- kaeluka 10y agohttp://imgur.com/a/zEj4w http://imgur.com/a/zEj4w
- bambax 10y agohttp://www.bambax.com/beatboxer/#||||||x||||||||||||||x||||||||x||||x||||||||x||x||||||||||||||||||||x||120 http://www.bambax.com/beatboxer/#||||||x||||||||||||||x|||||...
- space_ghost 10y agohttp://imgur.com/8Wl8U6p http://imgur.com/8Wl8U6p
- jnettome 10y agohttp://www.bambax.com/beatboxer/#x||||x||||x||||x|||||||x||||||||x|||||||x||||x||||x|||x|||||||x|||x|||||x||||120 http://www.bambax.com/beatboxer/#x||||x||||x||||x|||||||x|||...
- jnettome 10y agohttp://www.bambax.com/beatboxer/#x||||x|x|||||x|||||||||x||||x|||||x||x||||x|||||||||||x||||||x||||||x||||||x|60 http://www.bambax.com/beatboxer/#x||||x|x|||||x|||||||||x|||...
- the_other 10y agoFun! I like the interface and the URL pattern encoding. Here's mine: http://wa-101.net/ 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.
- BHSPitMonkey 10y agoReminds me of one I made years ago (back before Web Audio, when the HTML5 <audio> 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/ http://stepheneisenhauer.com/demos/drummachine/
- omgmog 10y agoI had a go at rewriting this to use requestAnimationFrame, and provide more instruments and some random/clear buttons: https://blog.omgmog.net/beatmaker/ https://blog.omgmog.net/beatmaker/ Including whitespace it's 102 lines: https://github.com/omgmog/beatmaker/blob/master/js/index.js 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.
- mixedCase 10y agoWell your version doesn't crash shortly after toying around in it unlike OP's so good job!.
- siggy 10y agoReally like your changes! I've incorporated your use of requestAnimationFrame and AudioContext back into mine: https://github.com/siggy/beatboxer/commit/dccff243474b17ca347583b3919fbf17b625a46b https://github.com/siggy/beatboxer/commit/dccff243474b17ca34...
- iammyIP 10y agoUnenjoyable, even as a gimmick, since the timing is all over the place. Either get timing right, or don't do a drum machine. Also this wastes resources like mad. What's the point of this?
- rsiqueira 10y agoI thought the drum sounds would be generated using JS, but they are just pre-recorded samples (bass_drum.wav, snare_drum.wav, low_tom.wav, mid_tom.wav, hi hat, cymbal, cowbell, hand clap, hi tom, conga, claves). I'm looking for drum-generated sounds using pure javascript, so I can make changes on them and create new kinds of sounds. I already created some pure JS sounds (e.g. laser sounds, bass effect, white noise, achords, bell sounds, water drop) but I'm still looking for equations to generate more realistic drum sounds: http://js.do/blog/sound-waves-with-javascript/ http://js.do/blog/sound-waves-with-javascript/
- leviathant 10y agoI can't give you 'realistic' drum sounds, but I was working on an approximate recreation of a Roland analog drum machine using only Javascript. I got the sound engine down more or less, but kind of fell off the rails when I moved away from my earlier, crappier sequencer and started using a framework. 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/synthesized-sounds https://github.com/leviathant/BossDR110/tree/feature/synthes... or just play around with it yourself at http://bitrotten.com/dr110/webaudio/ http://bitrotten.com/dr110/webaudio/
- louthy 10y agoLooking at the source, yours appears to be sample based too. I think the GP was interested in an oscillator based sound engine.
- leviathant 10y agoI started out with a sample-based version in 2011 or so, but the link I posted uses synthesized sounds, in updates I made last year. Have a closer look at the javascript as referenced in index.html and take a look at dr110_synth.js 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.
- nichochar 10y agoThis is really fun, FYI. Social features would be fun.
- jfornear 10y agoCool! It would be cool to have more instruments to create little loops to share with friends.
- scriptnull 10y agoSuper fun.