[{"data":1,"prerenderedAt":352},["ShallowReactive",2],{"project-12477296":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":45,"post_text":47,"what":48,"said":61,"maker_in_thread":195,"shape":200,"grid":205,"attempts":314,"same_week":315,"maker_shows":42,"maker_hidden":344,"reader_version":345,"card":346},"12477296","beatboxer","Drum machine in 100 lines of HTML\u002FJS","title","Show HN: Drum machine in 100 lines of HTML\u002FJS","http:\u002F\u002Fsig.gy\u002Fbeatboxer\u002F","sig.gy","siggy",1473656476,2016,134,48,268,2264,12,"notable","creative","drum machine","web_app",[21,24,25,26,27],"web audio","javascript","beat maker","browser music","debated",0.071,{"positive":31,"neutral":32,"mixed":33,"critical":34},16,8,0,11,35,{"performance":37,"idea":40,"execution":41,"design":44},{"positive":38,"critical":39},2,7,{"positive":18,"critical":33},{"positive":42,"critical":43},1,3,{"positive":33,"critical":42},[46,46,33,42,42,42,33,42,43,33,33,33,33,33,42,33,46,46,46,46,46,46,46,42,43,46,43,43,46,42,46,42,42,33,43,46,42,33,46,46],5,null,{"problem":47,"audience":47,"pricing":47,"motivation":47,"time_to_build":47,"stack":49,"openness":60,"stage":60,"team_size":60},[50,56],{"value":51,"source":52,"evidence":53},"JavaScript","inferred",[54],{"id":55},"post",{"value":57,"source":52,"evidence":58},"HTML",[59],{"id":55},"unknown",{"praise":62,"objections":90,"requests":138,"questions":171,"alternatives":183},[63,83],{"value":64,"source":65,"evidence":66},"Fun and cool for 100 lines of code","commenter",[67,71,75,79],{"id":68,"by":69,"text":70},"12477449","jonwot","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.",{"id":72,"by":73,"text":74},"12477807","sakri","hehe.. I was just a few squares short of recreating drop it like it's hot :D",{"id":76,"by":77,"text":78},"12483135","scriptnull","Super fun.",{"id":80,"by":81,"text":82},"12480856","nichochar","This is really fun, FYI. Social features would be fun.",{"value":84,"source":65,"evidence":85},"Works well on desktop; sound plays fine",[86],{"id":87,"by":88,"text":89},"12477827","sandebert","Tried it on my desktop computer now - works just fine, nicely done. Needs more cowbell, though.",[91,109,123],{"value":92,"source":65,"evidence":93},"Timing is unreliable because it uses setInterval",[94,98,102,105],{"id":95,"by":96,"text":97},"12477924","kowdermeister","Never use setInterval for audio based applications. It's just totally unreliable. WebAudio has nice built in features for high precision timing.",{"id":99,"by":100,"text":101},"12479494","iammyIP","First, 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…",{"id":103,"by":100,"text":104},"12479178","Unenjoyable, 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…",{"id":106,"by":107,"text":108},"12477753","cyberferret","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…",{"value":110,"source":65,"evidence":111},"Doesn't play or misbehaves in some browsers such as Safari and Android Chrome",[112,116,119],{"id":113,"by":114,"text":115},"12479646","aroman","Not sure why this is down voted — the demo literally does not work in my browser (Safari 10) because of the (mis)use of setInterval.",{"id":117,"by":88,"text":118},"12477433","I can change color of the boxes. Something animates from left to right. But I can't hear anything. (Android 7, latest Chrome.)",{"id":120,"by":121,"text":122},"12477657","djaychela","Me too - android 6,latest chrome. Works fine on Firefox on the same phone...",{"value":124,"source":65,"evidence":125},"Rhythm slows or misbehaves when the tab is backgrounded",[126,130,134],{"id":127,"by":128,"text":129},"12477671","GoToRO","Cool! when tab is not active, the rhythm slows down in Chrome\u002Fwin7.",{"id":131,"by":132,"text":133},"12478229","scottydelta","it behaves weirdly when you change the tabs, must be because of setInterval?",{"id":135,"by":136,"text":137},"12477726","nprescott","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…",[139,154,165],{"value":140,"source":65,"evidence":141},"Encode the pattern in the URL for sharing",[142,146,150],{"id":143,"by":144,"text":145},"12477462","prashnts","Very cool! It'd be great if you could also serialize the notes to the url, so people can share these.",{"id":147,"by":148,"text":149},"12477886","sdrothrock","Nice! 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. :)",{"id":151,"by":152,"text":153},"12478110","bambax","An implementation: http:\u002F\u002Fwww.bambax.com\u002Fbeatboxer\u002Findex.html#x||||x||||x||||x||||||x||x||x||||||||||||||||||||x|x|||x||||||||||||||x|||| Edit: now also saves bpm value:…",{"value":155,"source":65,"evidence":156},"More instruments such as hi-hat and cowbell",[157,161],{"id":158,"by":159,"text":160},"12477757","paublyrne","Very nice. Could you add a hi-hat?",{"id":162,"by":163,"text":164},"12482624","jfornear","Cool! It would be cool to have more instruments to create little loops to share with friends.",{"value":166,"source":65,"evidence":167},"Tempo (BPM) slider",[168],{"id":169,"by":152,"text":170},"12477917","With a slider to change bpm: http:\u002F\u002Fwww.bambax.com\u002Fbeatboxer\u002F",[172],{"value":173,"source":65,"evidence":174},"Why use setInterval instead of Web Audio timing",[175,179],{"id":176,"by":177,"text":178},"12478244","yAnonymous","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.",{"id":180,"by":181,"text":182},"12477885","deanclatworthy","How 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.",[184],{"value":185,"source":65,"evidence":186},"Web Audio API based drum machines such as the Boss DR-110 clone",[187,191],{"id":188,"by":189,"text":190},"12479976","leviathant","I 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…",{"id":192,"by":193,"text":194},"12487837","heuermh","These appear to be the synthesized versions: https:\u002F\u002Fgithub.com\u002Fleviathant\u002FBossDR110\u002Fblob\u002Ffeature\u002Fsynthesized-sounds\u002Fdr110_synth.js To the parent, what did you use as the…",{"comments":42,"answered":33,"key":196},[197],{"id":198,"text":199},"12486127","Really like your changes! I've incorporated your use of requestAnimationFrame and AudioContext back into mine:…",{"commenters":201,"max_depth":202,"maker_replies":42,"first_comment_mins":203,"lifespan_hours":204},33,6,41,235,[206,210,214,216,218,220,221,222,225,227,231,233,236,237,239,241,243,246,249,252,256,258,261,263,266,269,271,273,276,279,280,281,284,286,288,289,290,292,293,295,297,300,302,303,305,307,309,311],[207,33,46,208,209,33],"12478593","maker\u002Fpositive\u002Fperformance","omgmog",[211,33,46,212,213,33],"12480980","project\u002Fpositive\u002Fperformance","mixedCase",[198,33,33,215,11,42],"maker\u002Fpositive\u002Fexecution",[95,42,42,217,96,33],"project\u002Fcritical\u002Fperformance",[176,42,33,219,177,33],"commenter\u002Fneutral\u002Fexecution",[99,42,42,217,100,33],[113,42,42,217,114,33],[223,42,33,224,177,33],"12486161","commenter\u002Fneutral\u002Fnone",[226,42,42,217,96,33],"12479680",[228,38,43,229,230,33],"12479519","project\u002Fneutral\u002Fidea","rsiqueira",[188,38,33,232,189,33],"other\u002Fneutral\u002Fnone",[234,38,33,224,235,33],"12481059","louthy",[192,38,33,224,193,33],[238,38,33,224,189,33],"12501908",[240,38,33,224,193,33],"12553249",[242,38,33,224,189,33],"12501945",[244,43,33,232,245,33],"12478354","BHSPitMonkey",[68,247,42,248,69,33],4,"project\u002Fcritical\u002Fexecution",[250,46,33,232,251,33],"12478217","the_other",[253,202,46,254,255,33],"12478169","project\u002Fpositive\u002Fidea","alz",[257,202,46,254,177,33],"12478212",[259,202,46,254,260,33],"12478302","kaeluka",[262,202,46,254,152,33],"12478563",[264,202,46,254,265,33],"12480099","space_ghost",[267,202,46,254,268,33],"12480438","jnettome",[270,202,46,254,268,33],"12480486",[169,39,46,272,152,33],"maker\u002Fpositive\u002Fidea",[274,39,42,275,209,33],"12478074","project\u002Fcritical\u002Fdesign",[277,39,43,278,152,33],"12478108","maker\u002Fneutral\u002Fdesign",[143,32,43,229,144,33],[151,32,46,254,152,33],[106,282,43,283,107,33],9,"project\u002Fneutral\u002Fperformance",[147,285,43,229,148,33],10,[287,285,46,254,152,33],"12478103",[117,34,42,248,88,33],[120,34,42,248,121,33],[87,34,46,291,88,33],"project\u002Fpositive\u002Fexecution",[103,18,42,217,100,33],[127,294,42,217,128,33],13,[135,294,33,296,136,33],"commenter\u002Fneutral\u002Fperformance",[180,298,43,299,181,33],14,"project\u002Fneutral\u002Fexecution",[162,301,43,229,163,33],15,[72,31,46,254,73,33],[131,304,42,217,132,33],17,[306,304,33,296,177,33],"12478256",[80,308,46,254,81,33],18,[158,310,43,229,159,33],19,[76,312,46,313,77,33],20,"project\u002Fpositive\u002Fnone",[],[316,321,325,329,334,339],{"id":317,"name":318,"points":319,"category":320},"12466625","flask_jsondash",302,"data",{"id":322,"name":323,"points":324,"category":320},"12486631","DeuSu",229,{"id":326,"name":327,"points":328,"category":20},"12474406","Colors Used by Popular Sites",179,{"id":330,"name":331,"points":332,"category":333},"12468723","OverThrown",141,"games",{"id":335,"name":336,"points":337,"category":338},"12456335","Materia",127,"dev_tools",{"id":340,"name":341,"points":342,"category":343},"12450684","cookies.js",122,"languages",false,"v2",{"id":347,"name":5,"line":6,"ai":344,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":348,"top":18,"kw":349,"maker":11,"domain":10,"tier":19,"attempts":33,"strip":350,"url":9,"mix":351,"praise":64,"objection":92,"sub":21},12477296,0.07,[21,24,25,26,27],"5501110130000010555555513533515110351055",[31,32,33,34],1793990947451]