The latest articles on DEV Community by Phantas (@phantas_ea0b1015fd6ebeb52). https://dev.to/phantas_ea0b1015fd6ebeb52 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3683208%2F092c796e-8e79-4377-83da-b376fb4f9c0d.png https://dev.to/phantas_ea0b1015fd6ebeb52 en Phantas Sun, 28 Dec 2025 21:21:09 +0000 https://dev.to/phantas_ea0b1015fd6ebeb52/how-i-built-a-browser-based-binaural-strobe-using-the-web-audio-api-react-nextjs-8kg https://dev.to/phantas_ea0b1015fd6ebeb52/how-i-built-a-browser-based-binaural-strobe-using-the-web-audio-api-react-nextjs-8kg <p>The Problem: I have Aphantasia (no mental imagery). I struggle to get into "Deep Work." I tried binaural beats on Spotify, but audio compression (MP3/AAC) ruins the phase difference needed for the science to work.</p> <p>The Solution I decided to build a raw audio/visual synth in the browser to mechanically force focus.</p> <p>The Tech Stack</p> <p>Framework: Next.js (React)</p> <p>Audio: Native AudioContext API (for real-time oscillators).</p> <p>Visuals: requestAnimationFrame to sync a 490nm Cyan strobe.</p> <p>The Tricky Part (Code Snippet) The hardest part was handling the "Drift." Javascript timers are imprecise. I had to use the audio context's internal clock currentTime to schedule the oscillator frequency ramps so they wouldn't desync from the strobe.</p> <p>The Result It's called <a href="https://dev.tourl">Phantas.io</a>.</p> <p>It generates everything locally on your CPU. No login required to use the generator.</p> <p>Question for Devs: I'm currently using a simple setInterval for the React state updates on the visual timer, but I'm thinking of moving the whole timing engine to a Web Worker to prevent UI blocking. Has anyone tried this for high-precision metronomes?</p> <h1> react #javascript #webdev #showdev </h1> javascript showdev nextjs api