What I Built

El Relator Virtual — a penalty-kick simulator that turns every shot into a moment of pure football passion, narrated live by an AI commentator with the energy of a classic South American match announcer.

With the World Cup happening right now, I wanted to capture something every fan knows: the roar of the commentator's voice is half the magic of a goal. So instead of just building "another penalty game," I built one where every kick — save, post, or GOOOOL — gets narrated in real time with dynamically generated audio, so the emotional payoff feels as big as the moment itself.

The player picks a side, takes the shot, and the AI relator reacts instantly with a burst of commentary matching the outcome — different phrasing and intensity depending on whether it's a save, a miss, or a screamer into the top corner.

Code

Backend (Spring Boot + ElevenLabs):

rubengarcia0510 / relator-virtual

⚽ Relator Virtual

Simulador de penales donde cada jugada es narrada en tiempo real por un relator generado con IA (ElevenLabs), con la energía de un relato clásico sudamericano.

Proyecto para el DEV Weekend Challenge: Passion Edition.

Cómo funciona

El usuario patea un penal (gol, atajada o palo)
El backend arma un texto de narración con variación aleatoria
Se envía ese texto a la API de ElevenLabs para generar el audio
El audio se devuelve al frontend y se reproduce en el momento justo

Stack

Java 17 + Spring Boot 3.3
ElevenLabs API (Text-to-Speech)
WebFlux (WebClient) para las llamadas HTTP

Cómo correrlo localmente

export ELEVENLABS_API_KEY=tu-api-key
export ELEVENLABS_VOICE_ID=id-de-la-voz-que-elijas
./mvnw spring-boot:run

Endpoint

POST /api/jugada

{
  "resultado": "GOL",
  "direccion": "IZQUIERDA",
  "nombreJugador": "el 10"
}

Devuelve:

{
  "textoNarracion": "¡La reconquista, la tiene el 10, y... GOOOOOL!..."
  "audioBase64":

…

View on GitHub

Frontend (Angular):

rubengarcia0510 / relator-virtual-frontend

⚽ Relator Virtual — Frontend

Mini-juego de penales en Angular (standalone components) que consume el backend Spring Boot de relator-virtual para narrar cada jugada con voz generada por ElevenLabs.

Cómo correrlo

npm install
npm start

Se levanta en http://localhost:4200. Necesitás el backend corriendo en http://localhost:8080 (ver src/app/services/jugada.service.ts para cambiar la URL).

Para producción

Antes de deployar, actualizá API_URL en jugada.service.ts con la URL de tu backend en Render.

npm run build

View on GitHub

How I Built It

The project is split into two repos:

Backend (relator-virtual) — a Spring Boot service exposing a single endpoint, POST /api/jugada, that:

Receives the outcome of a kick (goal / save / post, direction, minute)
Builds a commentary script from a set of rotating templates so each play sounds a little different
Calls the ElevenLabs Text-to-Speech API to generate the narration on the fly, tuned with lower stability settings so it comes out sounding shouted and excited rather than flat
Returns the generated audio (base64) to the frontend, timed to play exactly as the ball crosses the line

Frontend (relator-virtual-frontend) — an Angular app (standalone components, signals for state) built around a stadium-at-night visual identity: a floodlit goal you tap to choose a corner, a scoreboard-style LED ticker that types out each commentary line as it arrives, and a net that ripples on goal / flashes on a post.

One deliberate design choice: the narrator reacts to the play itself (the goal, the save, the drama) rather than being scripted to reference any real player by name — so it captures the passion of a World Cup moment without putting invented lines in a real person's mouth.

Prize category tech used: ElevenLabs, for the real-time generated match commentary — the actual centerpiece of the whole project.

DEV Community

Relator Virtual