🎤 Avatar Battles

🎯 Concept Overview

Avatar Battle Mode lets users rap battle anonymously using virtual avatars. Your voice is transformed and your face is hidden behind a customizable 3D character that lip-syncs in real-time.

⚡ Technical Pipeline

Latency Budget

🎭 Avatar Technology Options

🔊 Voice Transformation

Users can optionally transform their voice for additional anonymity and creative expression.

Voice Transform Code

// voice-transform.ts
class VoiceTransformer {
  private pitchShifter: Tone.PitchShift;
  private distortion: Tone.Distortion;
  private reverb: Tone.Reverb;

  constructor() {
    this.pitchShifter = new Tone.PitchShift();
    this.distortion = new Tone.Distortion(0);
    this.reverb = new Tone.Reverb(0.5);
  }

  applyPreset(preset: 'deep' | 'high' | 'robot' | 'alien') {
    switch (preset) {
      case 'deep':
        this.pitchShifter.pitch = -5;
        break;
      case 'high':
        this.pitchShifter.pitch = 7;
        break;
      case 'robot':
        this.pitchShifter.pitch = 0;
        this.distortion.distortion = 0.3;
        break;
      case 'alien':
        this.pitchShifter.pitch = 12;
        this.reverb.decay = 3;
        break;
    }
  }
}

🎮 Battle Flow

1. Matchmaking: Join queue, get matched by skill rating
2. Avatar Select: Choose/customize your avatar
3. Beat Selection: Both players vote on instrumental
4. Coin Flip: Random selection for who goes first
5. Round 1: Player A raps (60 seconds)
6. Round 2: Player B responds (60 seconds)
7. Round 3: Player A rebuttal (30 seconds)
8. Round 4: Player B rebuttal (30 seconds)
9. Voting: Audience votes for winner
10. Recording: Battle saved for replay/sharing

Battle State Machine

// battle-state.ts
type BattleState =
  | 'idle'
  | 'matchmaking'
  | 'avatar_select'
  | 'beat_select'
  | 'countdown'
  | 'round_active'
  | 'round_transition'
  | 'voting'
  | 'results'
  | 'complete';

interface Battle {
  id: string;
  state: BattleState;
  players: [Player, Player];
  currentRound: number;
  rounds: Round[];
  beat: Beat;
  votes: Vote[];
  recording: Recording | null;
}

interface Round {
  player: 'A' | 'B';
  duration: number;  // seconds
  audio: Blob | null;
  transcript: string | null;
}

📡 WebRTC Architecture

Cloudflare Calls handles the WebRTC infrastructure for real-time streaming.

Cloudflare Calls Integration

// webrtc.ts
class BattleRTC {
  private localStream: MediaStream | null = null;
  private peerConnection: RTCPeerConnection | null = null;

  async joinBattle(battleId: string, userId: string) {
    // Get Cloudflare Calls session token
    const response = await fetch('/api/battle/join', {
      method: 'POST',
      body: JSON.stringify({ battleId, userId })
    });
    const { iceServers, sessionId } = await response.json();

    // Setup peer connection with Cloudflare TURN
    this.peerConnection = new RTCPeerConnection({ iceServers });

    // Get user media (audio only for voice)
    this.localStream = await navigator.mediaDevices.getUserMedia({
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true
      },
      video: false  // Avatar renders locally
    });

    // Add tracks to connection
    this.localStream.getTracks().forEach(track => {
      this.peerConnection!.addTrack(track, this.localStream!);
    });
  }

  async startRecording(): Promise<MediaRecorder> {
    const combinedStream = new MediaStream([
      ...this.localStream!.getAudioTracks(),
      // Canvas capture for avatar
      this.avatarCanvas.captureStream(30).getVideoTracks()[0]
    ]);

    return new MediaRecorder(combinedStream, {
      mimeType: 'video/webm;codecs=vp9,opus'
    });
  }
}