Performance recording and playback

[LoggeL]

Problem

Users can sing along but there's no way to capture, review, or share their performance. Recording is what makes karaoke sticky and shareable.

Proposal

Record the user's microphone mixed with the instrumental track, producing a shareable audio file of their karaoke performance.

Recording Flow

1. User clicks a Record button (appears alongside play controls when a song is loaded)
2. Browser requests microphone permission (getUserMedia)
3. Playback starts from the beginning (or current position)
4. Mic input is captured alongside the instrumental audio
5. On stop/song end, mix mic + instrumental into a single audio file
6. Preview the recording with a mini player
7. Options: Download (MP3/WebM), Re-record, Discard

Technical Approach

• MediaRecorder API to capture mic input
• Route mic through Web Audio API: getUserMedia → MediaStreamSource → GainNode (mic volume) → MediaStreamDestination
• Merge instrumental GainNode output into the same destination
• Record the combined stream with MediaRecorder
• Output as WebM/Opus (native) or transcode to MP3 client-side via a library

Audio Mixing

• Mic volume slider (separate from vocal/instrumental sliders)
• Optional: basic reverb effect on mic input (Web Audio ConvolverNode) for that karaoke hall feel
• Monitor toggle: hear yourself in headphones while recording

UI

• Record button (red dot) on the controls bar, next to play/pause
• Recording indicator (pulsing red dot + elapsed time) while active
• Post-recording modal with waveform preview and download/discard options

Future Extensions

• Save recordings to server (per-user gallery)
• Share link to recording
• Side-by-side comparison with original vocals

Complexity

Medium. MediaRecorder + Web Audio routing is well-documented. Main challenge is clean audio mixing and a polished UX.