SyncWave
Social listening rooms for Audius, with synchronized playback, shared queues, persisted chat and browser-side audio visualizations.
Live listening rooms on Cloudflare
Problem
Shared listening requires playback coordination, persistent room data and server-verified ownership across browsers and reconnects.
Approach
The Cloudflare edition combines Workers APIs, room-scoped Durable Objects and WebSockets with D1 persistence. Live hosts broadcast playback state; permanent rooms use shared timestamps when no host is present.
Architecture
| Layer | Responsibility |
|---|---|
| JavaScript, Three.js, Web Audio | Player, room UI, waveform and visualizers |
| Cloudflare Workers | Verified identity, APIs and upstream service proxies |
| Durable Objects / WebSockets | Presence, live room events and host commands |
| Cloudflare D1 | Queues, playlists, room state and chat history |
| Pages service binding | Public demo address forwarding to the same Worker |
Room-scoped realtime state
SQLite-backed Durable Objects and WebSockets coordinate presence, chat delivery, host commands and room isolation. D1 stores queues, playlists, room state and signed-in chat history.
Verified account actions
Visitors can listen without signing in. Audius identity is verified on the server for room ownership and host-only actions. Workers proxy authorized Audius and KLIPY requests.
Music discovery and audio analysis
Audius search covers tracks, artists and playlists. Three.js and 2D visualizers, a stereo waveform and browser-side BPM, key, loudness and dynamic-range estimates make the listening interface audio-aware.
Persistence and failure handling
The documented tests cover real D1 SQL and separate WebSocket clients in the local Cloudflare runtime, including reconnects, room isolation, ownership, escaping and secret-free builds. The UI distinguishes login, database and connection failures.
Engineering decision
Use one maintained Cloudflare application for both API operations and live rooms. A Pages gateway forwards to the same Worker and database, so normal updates do not require a second frontend deployment or another copy of the data.
Interface tour
Current scope
Audio-analysis readouts are browser-side estimates. Listening starts with a click because of browser autoplay rules. Audius account actions require authorization; live GIF search needs an activated KLIPY key. The legacy Netlify/Supabase edition is archived.
Playback synchronization
Interactive modelStall a listener, then watch a broadcast correct the drift. Remove the host to try the shared-timestamp fallback.
Illustrative model of drift correction and shared-timestamp fallback. This demonstration uses 3-second broadcasts, a 500 ms threshold and a deliberately 3% fast listener.
Ready to start.