[{"data":1,"prerenderedAt":292},["ShallowReactive",2],{"project-22729860":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":34,"aspects":35,"strip":43,"post_text":44,"what":45,"said":69,"maker_in_thread":167,"shape":173,"grid":177,"attempts":256,"same_week":257,"maker_shows":214,"maker_hidden":284,"reader_version":285,"card":286},"22729860","Use-sound","A React hook for sound effects on the web","title","Show HN: Use-sound, a React hook for sound effects on the web","https:\u002F\u002Fjoshwcomeau.com\u002Freact\u002Fannouncing-use-sound-react-hook\u002F","joshwcomeau.com","joshwcomeau",1585588141,2020,131,31,472,3028,16,"notable","dev_tools","react hook library","library",[24,25,26,27],"react hook","sound effects","web audio","howler","debated",-0.009,{"positive":31,"neutral":32,"mixed":33,"critical":31},5,9,0,19,{"design":36,"idea":38,"performance":41,"docs":42},{"positive":37,"critical":37},3,{"positive":39,"critical":40},2,1,{"positive":33,"critical":40},{"positive":33,"critical":33},[31,33,33,40,33,40,33,37,33,33,31,31,37,33,31,37,37,40,37,37,37,33,40,33,33,37,37,40,33,31,33],null,{"problem":46,"audience":53,"pricing":44,"motivation":44,"time_to_build":44,"stack":58,"openness":67,"stage":68,"team_size":68},{"value":47,"source":48,"evidence":49},"Playing sound effects in React components with playback state","maker",[50],{"id":51,"by":11,"text":52},"22737877","Right, so the reasons this needs to be a hook: - As someone else said, it manages playback state. This is technically managed by a third-party library, but we expose an…",{"value":54,"source":55,"evidence":56},"React developers","inferred",[57],{"id":51,"by":11,"text":52},[59,63],{"value":60,"source":48,"evidence":61},"React",[62],{"id":51,"by":11,"text":52},{"value":64,"source":48,"evidence":65},"Howler",[66],{"id":51,"by":11,"text":52},"open_source","unknown",{"praise":70,"objections":98,"requests":118,"questions":126,"alternatives":152},[71,87],{"value":72,"source":73,"evidence":74},"Nice showcase website and design","commenter",[75,79,83],{"id":76,"by":77,"text":78},"22733783","mtm7","I've been following your site for a few weeks, and I just love it. The design, the writing, the interactive examples, the little sounds... it's all so thoughtful! I'm thinking of…",{"id":80,"by":81,"text":82},"22733611","spidersandstuff","Really cool. Also, the showcase website is made really well, kudos.",{"id":84,"by":85,"text":86},"22734641","jacobsimon","This is really cool & you have a great website! The one thing I don’t quite understand is why this needs to be a React hook per se - couldn’t it just be a normal library function…",{"value":88,"source":73,"evidence":89},"Fun for building small games with sound",[90,94],{"id":91,"by":92,"text":93},"22736808","hazz99","God forbid I want to create a little game with sound effects using React. This is a great little tool!",{"id":95,"by":96,"text":97},"22734739","Waterluvian","Yeah! And I love that we can explore every nook and cranny without a lot of \"oh wow why would you ever want this?!\" Stuff like this is super useful for the countless non-standard…",[99,114],{"value":100,"source":73,"evidence":101},"Sound on the web is annoying and hostile to users",[102,106,110],{"id":103,"by":104,"text":105},"22734232","timharding","This is cool but, oh boy, a mute button that makes a sound when you click it is user hostile.",{"id":107,"by":108,"text":109},"22736551","d33","I wish I could think of a leveled way to speak my mind but gosh, there's something about all this that really makes me want to throw up. The idea of adding a tiny little button…",{"id":111,"by":112,"text":113},"22736507","xfitm3","I run all tabs muted by default - I find sound effects on the web to be rather frustrating. Especially combined with autoplay.",{"value":115,"source":73,"evidence":116},"Mute button that plays a sound is user hostile",[117],{"id":103,"by":104,"text":105},[119],{"value":120,"source":73,"evidence":121},"Source code is hard to find in the npm package",[122],{"id":123,"by":124,"text":125},"22733905","desert_boi","I was hoping to see the source for the lib, but I can't find it in the npm package listing. Anyone manage to track it down?",[127,131,138,145],{"value":128,"source":73,"evidence":129},"Why it must be a hook rather than a plain function",[130],{"id":84,"by":85,"text":86},{"value":132,"source":73,"evidence":133},"Concurrent mode behavior of volume updates in effects",[134],{"id":135,"by":136,"text":137},"22734284","bennyg","Not to nitpick, but I'm wondering about the tradeoffs of adjusting volume\u002Fplayback rate in an effect (https:\u002F\u002Fgithub.com\u002Fjoshwcomeau\u002Fuse-sound\u002Fblob\u002Fmaster\u002Fsrc\u002Findex.ts#L75). I'm…",{"value":139,"source":73,"evidence":140},"Why return values are in an array",[141],{"id":142,"by":143,"text":144},"22736762","vcoelho","Could some one clarify for me why the consts for the useSound() are declared inside an array? const [play] = useSound()",{"value":146,"source":73,"evidence":147},"Does not work on iOS Safari",[148],{"id":149,"by":150,"text":151},"22746585","quickthrower2","Ok not working on iOS safari for me, but that’s not your fault... I had a howler based app that seemed to work 6 months ago and after some update stopped working on iOS (no more…",[153,157],{"value":154,"source":73,"evidence":155},"Howler library",[156],{"id":149,"by":150,"text":151},{"value":158,"source":73,"evidence":159},"CSS-only or emoji approaches",[160,164],{"id":161,"by":162,"text":163},"22736564","bestouff","Is there a way to do all of this with CSS only ?",{"id":165,"by":150,"text":166},"22746580","Or emojis?",{"comments":39,"answered":39,"key":168},[169,170],{"id":51,"text":52},{"id":171,"text":172},"22737396","Other commenters beat me to it, but yeah, it's an ergonomics thing. If you have multiple sounds, you can do: const [playBell, bellOptions] = useSound(); const [playBoom,…",{"commenters":174,"max_depth":37,"maker_replies":39,"first_comment_mins":175,"lifespan_hours":176},25,422,39,[178,180,184,186,188,191,192,195,197,199,200,203,205,208,212,213,216,219,222,224,226,229,231,235,239,242,245,246,248,252,253],[76,33,31,179,77,33],"project\u002Fpositive\u002Fdesign",[181,33,33,182,183,33],"22733951","commenter\u002Fneutral\u002Fnone","wmichelin",[185,33,33,182,77,33],"22734134",[103,40,40,187,104,33],"project\u002Fcritical\u002Fdesign",[189,40,33,182,190,33],"22735614","martin-adams",[111,40,40,187,112,33],[193,40,33,182,194,33],"22743555","viklove",[84,39,37,196,85,33],"project\u002Fneutral\u002Fdesign",[198,39,33,182,96,33],"22734779",[51,39,33,196,11,40],[201,37,31,179,202,33],"22733792","Uhhrrr",[95,37,31,204,96,33],"project\u002Fpositive\u002Fidea",[135,206,37,207,136,33],4,"project\u002Fneutral\u002Fperformance",[209,206,33,210,211,33],"22735663","commenter\u002Fneutral\u002Fperformance","onion2k",[80,31,31,179,81,33],[123,214,37,215,124,33],6,"project\u002Fneutral\u002Fdocs",[217,214,37,215,218,33],"22733954","throwanem",[149,220,40,221,150,33],7,"project\u002Fcritical\u002Fperformance",[142,223,37,215,143,33],8,[225,223,37,215,92,33],"22736793",[227,223,37,215,228,33],"22736809","gherkinnn",[171,223,33,230,11,40],"maker\u002Fneutral\u002Fdocs",[232,32,40,233,234,33],"22736339","project\u002Fcritical\u002Fidea","kkdaemas",[236,32,33,237,238,33],"22744742","other\u002Fneutral\u002Fnone","intruder",[240,32,33,241,150,33],"22746575","other\u002Fcritical\u002Fidea",[161,243,37,244,162,33],10,"project\u002Fneutral\u002Fidea",[165,243,37,244,150,33],[107,247,40,187,108,33],11,[249,247,33,250,251,33],"22736644","commenter\u002Fneutral\u002Fdesign","savolai",[91,247,31,204,92,33],[254,247,33,182,255,33],"22744318","Kaze404",[],[258,263,267,272,276,279],{"id":259,"name":260,"points":261,"category":262},"22718854","Video Puppet",441,"creative",{"id":264,"name":265,"points":266,"category":262},"22719288","Colors.lol",388,{"id":268,"name":269,"points":270,"category":271},"22748242","Time Cop",334,"productivity",{"id":273,"name":274,"points":275,"category":20},"22693805","zeromaps",312,{"id":277,"name":278,"points":275,"category":262},"22703112","Introvert",{"id":280,"name":281,"points":282,"category":283},"22693634","MapFilterFold",273,"consumer_social",false,"v2",{"id":287,"name":5,"line":6,"ai":284,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":288,"top":18,"kw":289,"maker":11,"domain":10,"tier":19,"attempts":33,"strip":290,"url":9,"mix":291,"praise":72,"objection":100,"sub":21},22729860,-0.01,[24,25,26,27],"5001010300553053313330100331050",[31,32,33,31],1793991006088]