History
Nine months.
One system.
Every prototype, rewrite, and shipped feature in the path from one AnalyserNode
to a real-time sync platform.
270
Days for shipping
12,706
Lines rewritten to TypeScript
983
Test cases
2
Infrastructure vendors
Nine months. One developer. A new way to listen together.
Every prototype, every rewrite, every shipped feature — from a single AnalyserNode
to a full real-time sync platform running on WebRTC, Cloudflare, and encrypted remote file transfer.
Prototype · Aug–Dec 2025
Phase 01
MUSIXQUARE starts as a solo-device audio visualizer in August 2025. No sync, no network — just
a single AnalyserNode, frequency bands, and a Canvas loop. But the audio-graph
plumbing laid down here — configurable cutoffs, per-band smoothing — survives into the final product.
October brings the first real P2P attempt: two phones, PeerJS over WebRTC, a dual-strategy sync
algorithm with hard-jump and playbackRate nudge. November strips it down to a
countdown-based start — simpler, more reliable. December shifts to channel routing:
ChannelSplitter, per-band GainNodes, a subwoofer LPF. The name,
the wordmark, the signature #3b82f6 blue — all settle into final form in late December.
-
Aug · Web Audio foundation
AnalyserNode pipeline, frequency-band smoothing, and a Canvas visualizer. The audio-graph pattern that ships in v1.3 traces directly back here.
-
Oct · First P2P sync
PeerJS over WebRTC. Hard-jump correction (drift > 0.5s) + playbackRate nudge (0.05s–0.5s). A 1-second heartbeat sends { time, paused, playbackRate, timestamp } — the ancestor of today's SharedClock.
-
Nov · Countdown-based start + file transfer
Replaced the rate-scaling algorithm with a 3-second countdown: both sides setTimeout to the same local deadline. Host MP3 transfers to guest as a Blob. Per-device offset nudge — the direct ancestor of today's Nudge Sync.
-
Dec · Channel routing + identity
v1.0 → v1.2: stereo oscillator lab, Canvas spectrum visualizer, subwoofer channel with 120 Hz LPF, L / Stereo / R tab controls. Then in late December: MUSIXQUARE the name, the wordmark, the five-tab nav, Light / Dark / System theme — all finalize into the form that ships.
Build · Jan–Apr 2026
Phase 02
Between December's channel lab and the first git commit on January 25,
everything converges: frequency analysis, P2P sync, and channel routing become one app.
That month of intense iteration was only ever saved as the final file. By the time
git history starts, MUSIXQUARE already ships Host / Guest + QR invite, a full audio-effect
chain (reverb, 5-band EQ, virtual surround), Nudge Sync, and a 7.1-channel role picker.
February unlocks remote connections via Metered TURN and starts the TypeScript rewrite —
12,018 lines of app.js broken into strict-mode ES modules under src/.
March and April pile on: chat with slash commands, beat detection with Phase Sync,
the SharedClock architecture that makes sync genuinely reliable across flaky networks,
and YouTube 2-stage sync with rendezvous handshake.
-
Jan 25 · First commit — product already exists
Five-tab nav, Host/Guest/QR, full audio-effect chain (Tone.js reverb, 5-band EQ, Virtual Surround, Virtual Bass), Nudge Sync, 8-channel 7.1 role picker. Everything merged from four months of file-based iteration.
-
Feb · Remote connections via TURN
Metered.ca TURN server; WebRTC reaches across networks for the first time. 3-sample RTT replaces naive timestamps for drift-aware sync.
-
Feb · TypeScript rewrite begins
12,018-line app.js → strict-mode TypeScript ES modules. 71 P2P protocol messages, EventBus handlers, and state paths get real types. Build fails before runtime fails. i18n key system introduced.
-
Mar · Chat, beat detection, Playwright suite
Chat with slash commands (/debug, /nick), profanity filter, grouped bubbles. High-precision BPM analyzer with Phase Sync. 174 Playwright E2E scenarios covering late-join, chaos, and multi-device cases.
-
Apr · SharedClock + YouTube 2-stage sync
Host clock becomes the single source of truth — every device plays at time X, not now. Drift becomes correctable instead of inevitable. YouTube sync gets a mandatory rendezvous handshake; unavailable videos auto-skip.
-
Apr · Multiple security audit rounds
Eight iterative audit passes across the full codebase — bus event mismatches, sink-level XSS validation, CSPRNG for room codes, TURN endpoint hardening. Zero critical or high findings at close.
Ship · May 2026
Phase 03
-
RAM-only audio architecture
Removed the File System Access API (OPFS) entirely in favor of a RAM-only slot pool. Faster preloads, zero disk-leak bugs, a dramatically simpler storage lifecycle. Six-pass sweep to remove every OPFS residue from the codebase.
-
Encrypted remote file sharing
Local audio now reaches guests outside the host's network through a temporary encrypted relay. Files are AES-encrypted in the browser before upload; the decryption key is never stored server-side. Guests receive and reconstruct the file locally as a browser Blob for synchronized playback. Short-lived upload authorization, R2 direct upload, origin checks, and expiry-on-session-end.
-
Cloudflare TURN as primary relay
TURN credentials moved from Metered.ca to Cloudflare, with Metered kept as a fallback. Remote joins connect faster; long-lived rooms keep a safety path.
-
Cloudflare Realtime SFU for remote system audio
System-audio sharing now splits by connection type. Local guests stay on the direct P2P audio path. Remote guests subscribe through Cloudflare Realtime SFU — the host publishes once, remote listeners receive synchronized audio without forcing the host to maintain every stream directly. Measured at roughly 100 MB/hr per remote listener.
-
Cloudflare WebRTC signaling transport
Replaced PeerJS's public signaling servers with a dedicated Cloudflare Durable Objects worker. Cleaner ICE candidate handling, predictable latency, no third-party signaling dependency in production. PeerJS retained as an offline-development fallback when the Cloudflare URL is not configured.
Milestone · May 1, 2026
Product Hunt — Featured · #13 of the day · 80 upvotes
First public launch. Listed on Product Hunt the same week remote file sharing and the Cloudflare SFU path shipped.
Featured within hours, finished 13th for the day with 80 upvotes — enough to validate
the core idea and surface the next set of real user needs.
Infrastructure · Today
Current
Cloudflare
Signaling · TURN · SFU · Remote storage
Durable Objects handle WebRTC signaling — ICE candidates, offers, and answers route through a persistent Worker per room.
TURN relays traffic when direct P2P fails (Metered fallback retained).
Realtime SFU carries remote system audio — host publishes once, remote guests subscribe.
R2 holds encrypted remote file transfers for the duration of the sharing session.
Netlify
Hosting · Edge functions
Static site hosting with edge-deployed functions for OG image generation (Satori + resvg-wasm, per-page) and
TURN credential issuance (short-lived signed credentials, not exposed client-side).
SPA fallback, security headers, and immutable asset caching configured via netlify.toml.
WebRTC · In-browser
P2P sync · Chat · Local system audio
Data channels carry playback control, playlist sync, chat, and nudge-sync payloads between all peers.
Local system audio travels direct P2P via a media call — no relay, lowest latency.
Remote system audio routes through the Cloudflare SFU path above.
ICE candidate handling is fully queued and flushed per peer — no candidate is lost during SDP negotiation.
Browser · Client
Audio engine · Storage · Build
Native Web Audio API — no Tone.js. AnalyserNode → BiquadFilter → ChannelSplitter → per-channel Gain → Merger → Convolver → destination.
RAM-only slot pool for audio tracks — no disk writes, no OPFS.
Vite + TypeScript ES2022 strict-mode build. Service Worker for offline shell caching.
Ahead
Upcoming
Pro tier — large rooms and license flow
Free rooms stay conservative. A license path unlocks larger participant counts for the host. The SFU removes the worst remote system-audio pressure, but host CPU and support burden still need clear caps.
Next
7.1-channel UI
The engine already supports FL / FR / Center / LFE / Side L·R / Rear L·R routing. The UI was parked for UX complexity. Will re-surface when demand is clear.
Gated
Native mobile app for system audio
iOS and Android don't implement getDisplayMedia({audio}). A native app would route system audio through screen-capture APIs, at the cost of install friction.
Later
Infrastructure consolidation
Netlify handles hosting and edge functions well. A future move to Cloudflare Pages / Workers would reduce vendor count, but only after Worker limits and billing alerts are fully understood.
Later
Platform Walls
Won't fix
YouTube effects and channel routing
The YouTube IFrame API does not expose raw audio to Web Audio. EQ, reverb, surround, and channel routing cannot apply to YouTube playback — this is a Google DRM / CORS wall, not a missing feature.
Google
System audio on iOS and Android
getDisplayMedia({audio: true}) is not implemented by mobile browsers. System audio sharing is a desktop-only feature until mobile OS APIs allow it.
OS Limit
Spotify · Apple Music · Tidal and DRM streaming
DRM-protected streams cannot be captured or routed through Web Audio. Integration would require per-platform licensing agreements — not viable for a free solo project.
DRM