LagSync — Bluetooth Audio Sync for Web Video

Context

Bluetooth headphones add 100–300ms of audio lag that desktop browsers don't compensate for. Movies look dubbed, livestreams feel off. LagSync is a cross-browser extension that cancels that offset on the fly — shipped on Chrome, Firefox, Edge, Brave, and Safari (macOS App Store), with 1,500+ active users across the stores — plus the Astro-based marketing site at lagsync.com that drives installs.

Two codebases, one product. The extension is the engineering problem; the website is the conversion problem.

Source: github.com/kimonsodu/lagsync-website (marketing site; extension repo private)

The extension

A delay you can apply in one click while video is already playing, without rebuffering or audio artifacts. That's deceptively hard because every browser exposes a different subset of the media pipeline and every streaming site fights you differently.

Pipelines

• MSE pipeline (Chrome, Edge) — intercept MediaSource.prototype.addSourceBuffer and patch appendBuffer to inject timestampOffset shifts. Frame-perfect, native performance, ~2–5% CPU.
• Canvas pipeline (Firefox, Safari, fallback) — capture audio through AudioContext, render to an offscreen canvas with the calculated offset. Required for DRM content and cross-origin streams (~15–25% CPU).
• Live-edge handler (YouTube Live, Twitch) — detect pinned live-edge containers, force canvas mode on incompatible codecs, hard-jump instead of ramping on no-DVR streams to avoid rebuffer.

Sync modes — Instant (hard-jump, best for Bluetooth), Gradual (~1s speed ramp), and Trim (strip leading buffer first, lowest buffer inflation). One-click presets for aptX, AAC, SBC, and High cover common Bluetooth codec delays. Per-site pipeline and mode are selected automatically based on codec and DRM constraints — full details at lagsync.com/documentation.

Architecture is the standard MV3 split: service worker for persistent state, content script for DOM + frame capture, a page-world script for the WebAudio/MSE hooks, and a React popup for controls, settings, stats, and onboarding. No telemetry — 100% on-device.

The website

Built in Astro 6 with Tailwind v4. Primary job: detect the visitor's browser and route them to the correct store listing without a wrong-store click. Beyond the landing page — documentation, per-platform fix guides, FAQ, changelog, and a Stripe donation flow. One src/config.ts holds all store links, version, and screenshot manifest so a release is a single file edit. Static deploy, no server runtime.

Stack

Extension: TypeScript, React (popup), Manifest V3, Web Audio API, Media Source Extensions, Canvas API, Service Workers.
Website: Astro 6, Tailwind CSS v4, TypeScript, static deployment.
Distribution: Chrome Web Store, Firefox Add-ons, Edge Add-ons, Safari App Store (id6766511020), Brave.

Takeaways

The interesting engineering wasn't the delay math — it was that every browser hides a different part of the media pipeline, so "apply 200ms of delay" has four different implementations under one user-facing slider. Capability detection at startup and per-site pipeline selection were what made the UX feel uniform.

Safari was the last and hardest browser to ship: page-script injection timing, DRM constraints on Prime Video (ultimately dropped), and Xcode conversion added enough friction that it warranted its own build pipeline (npm run release:safari:macos archives, signs, and validates in one command).

On the marketing side: a download page is a routing problem, not a design problem. Getting the right visitor to the right store on the first click mattered more than any visual polish.