OpenLight

A no-download karaoke duel in your browser: scan a QR code, use your phone as the mic, and battle with real-time pitch scoring!

Comment

OpenLight

The browser-based vocal battle arena

Inspiration

Our main inspiration and original thought process was "basically “omoggle” but instead of people getting rated for their attractiveness it rate them on their accuracy to the song they sung from a library we give them."

We wanted to build an arcade-grade vocal arena that runs 100% client-side with minimal latency, requires no accounts or user data collection, and lets players turn their own smartphones into wireless stage microphones using pure peer-to-peer WebRTC, all wrapped in an editorial, responsive design. And we wanted to do it using only traditional, copyright-free songs, so anyone can play and share it.

What It Does

OpenLight turns any laptop and phone into a live competitive vocal battle station with two multiplayer game modes and a set of tools built around them. Whoever get more accuracy rate from the original song, wins.

Game Modes

  1. 🍿 Popcorn Singing (2-Player Turn Split): Player 1 sings the first half of the song and Player 2 sings the second half. The game shows automated 3…2…1 transition countdowns, turn status pills, and automatic muting of the off-turn singer's mic to eliminate room crosstalk.
  2. ⚔️ Concurrent "Mog" Voice Duel: Both singers perform at the same time, with separate glowing cursors tracing their real-time pitch along a scrolling 60 FPS target timeline. The singer with the best pitch accuracy, streak multiplier, and vocal stability "mogs" their opponent.

Features

  • 📱 Instant QR Phone-as-a-Mic (Zero App Install): Players scan a QR code on the laptop screen with their phone. The phone connects over an encrypted WebRTC audio stream and works as a low-latency wireless microphone, with nothing to install.
  • 🎯 Real-Time Pitch Tuner & Feedback: Live cent deviation (Slightly Sharp, Slightly Flat, or PERFECT PITCH), mic volume VU meters, scrolling gold note pills, and a synchronized lyric teleprompter.
  • ⚡ On-the-Fly Latency Calibration: In-game hotkeys ([ and ]) let singers or judges adjust audio sync live by ±50 ms.

How We Built It

1. Client-Side YIN Pitch Estimation (60 FPS)

Rather than offloading pitch extraction to a Python server or a black-box API, we implemented the de Cheveigné & Kawahara YIN pitch estimation algorithm directly in the browser's Web Audio pipeline, processing Float32Array PCM buffers in three stages:

  1. Difference Function: Measures squared difference at period lag τ: $$d_t(\tau) = \sum_{j=1}^W (x_j - x_{j+\tau})^2$$
  2. Cumulative Mean Normalized Difference: Drops the zero-lag dip to prevent octave errors. At τ = 0 the value is fixed at 1. For every other lag, we divide the difference d(τ) by the running average of all earlier differences, (1/τ) × (d(1) + d(2) + … + d(τ)).
  3. Parabolic Interpolation: Fits a parabola around the local minimum for sub-sample precision, then maps frequency to MIDI numbers: $$m = 69 + 12 \log_2\left(\frac{f_0}{440}\right)$$

2. Pure Peer-to-Peer WebRTC Phone Streaming (Zero-FastAPI)

Early prototypes relied on a FastAPI middleware server that choked under audio streaming bandwidth and froze the browser. We replaced it with a PeerJS WebRTC architecture:

  • Raw mobile audio is captured with studio constraints (echoCancellation: false, noiseSuppression: false, autoGainControl: false).
  • Audio streams directly from phone to laptop as a WebRTC MediaStream.
  • The laptop routes the remote track into a Web Audio MediaStreamAudioSourceNode and feeds it to the client-side YIN engine.

3. Single-Command Server & Automated HTTPS Tunnel

Phone browsers require HTTPS to grant microphone access. A single-process Python controller (run_pitchbattle.py):

  • Spawns an internal HTTP server with socket address reuse (allow_reuse_address = True) to avoid Windows WinError 10048 port collisions.
  • Launches a background SSH reverse tunnel (localhost.run) to provide a public HTTPS URL and QR code in both the terminal and the UI.
  • Handles SIGINT/SIGTERM by cleanly terminating leftover tunnel processes.

4. High-Precision Note Calibration Pipeline

A custom offline Python pipeline uses librosa.pyin and harmonic-percussive separation (librosa.effects.hpss) to chart songs down to millisecond vocal onsets, producing full-length song charts with accurate keys, phrase breakdowns, and lyrics instead of truncated 30-second clips. Our song library is built entirely from traditional, copyright-free songs.

5. Dual UI Engines

  • OpenLight Editorial Theme: A warm acoustic parchment background (#fcf9f3), terracotta accents (#a33900), emerald pitch indicators, and Playfair Display serif typography.
  • Cyberpunk Dark Arena: A high-contrast neon arcade look with particle emitters and glowing hit-line shaders.

Challenges We Faced

  • Audio Freezing & Middleware Bottlenecks: Streaming raw PCM chunks through an intermediate FastAPI WebSocket backend caused severe buffer congestion and UI freezes. Bypassing the backend with direct browser-to-browser WebRTC eliminated the lag and cut CPU overhead dramatically.
  • Mobile Mic Filters & Octave Jumps: Mobile operating systems apply aggressive speech high-pass filters (below about 150 Hz) that cut fundamental frequencies for lower voices, causing the detector to lock onto the second harmonic. Disabling OS post-processing and tuning the YIN absolute threshold fixed the octave doubling.
  • Consonant vs. Vowel Timing: Aligning charts to the center of sustained vowels made notes feel like they lagged behind the singer. By analyzing mid-side audio power and shifting target notes about 250 ms earlier, onto initial consonant attacks, the scrolling timeline snapped into sync with human vocal rhythm.
  • Port Reuse on Windows: Rapid server restarts hung on [WinError 10048] because Windows held lingering socket handles. Proactive SSH process termination and socket address reuse gave us a one-click launch.

Accomplishments We're Proud Of

  • Zero Cloud Infrastructure: No databases, no auth tokens, and full privacy compliance.
  • Phone-as-a-Mic in 2 Seconds: Scan the QR code and your phone immediately streams live audio into the game engine.
  • Full-Length Song Charts: Complete songs with accurate keys, phrase breakdowns, and lyrics.
  • Free to Share: Our library uses only traditional, copyright-free songs, so the game can be demoed and distributed freely.
  • Bulletproof Presentation Mode: Virtual keyboard synthesis (A W S E D F T G Y H U J K) and live timing calibration hotkeys let the game be judged and demoed in any noisy environment.

What's Next for OpenLight

  • Adaptive Polyphony: Integrating Spotify Basic Pitch for automated real-time harmony and backing-vocal scoring.
  • Spatial 4-Player Battle Royale: Expanding WebRTC peer meshes to support 4-phone quartets with dynamic team battles.
  • Custom Song Drop Zone: Drag-and-drop your own MP3 and lyric file onto the browser to generate a chart on the fly with in-browser WebAssembly.

Team

Team BROCODE: Connor, Gyanesh, Melvin, Trang Dinh

Built With

Share this project:

Updates

Submission history