Construyendo Pipelines de Reconocimiento de Voz (STT) en Tiempo Real con Cloudflare Workers AI y Whisper

Construyendo Pipelines de Reconocimiento de Voz (STT) en Tiempo Real con Cloudflare Workers AI y Whisper

El reconocimiento de voz a texto (STT, Speech-to-Text) es una funcionalidad clave para la generación de subtítulos automáticos, notas de voz y transcripción de reuniones. Sin embargo, mantener servidores GPU dedicados o pagar elevadas tarifas de APIs externas genera costes considerables.

Cloudflare Workers AI resuelve este problema al ejecutar el modelo Whisper de OpenAI (@cf/openai/whisper) directamente en la red Edge global de Cloudflare mediante GPUs serverless con latencias mínimas.

En este artículo, mostramos cómo construir un pipeline de transcripción STT en tiempo real conectando las APIs de Web Audio del navegador con Cloudflare Workers AI.

1. Comparación: Servidores GPU Tradicionales vs. Cloudflare Workers AI Whisper

2. Integración de Whisper en Workers AI (wrangler.jsonc y Código Worker)

A través de las vinculaciones (bindings) de Cloudflare Workers, es posible invocar el modelo Whisper directamente sin necesidad de clave API externa.

1) Configuración de wrangler.jsonc

{
  "name": "whisper-stt-worker",
  "main": "src/index.ts",
  "compatibility_date": "2026-07-01",
  "ai": {
    "binding": "AI"
  }
}

2) Lógica del Worker (src/index.ts)

export interface Env {
  AI: any;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    if (request.method !== 'POST') {
      return new Response('Method Not Allowed', { status: 405 });
    }

    try {
      // Búfer binario del audio enviado desde el cliente
      const audioBuffer = await request.arrayBuffer();

      // Ejecución del modelo Whisper en Cloudflare Workers AI
      const response = await env.AI.run('@cf/openai/whisper', {
        audio: [...new Uint8Array(audioBuffer)],
      });

      // Retornar resultado de la transcripción
      return Response.json({
        text: response.text,
        word_count: response.words?.length || 0,
        vtt: response.vtt, // Formato WebVTT para subtítulos
      });
    } catch (error: any) {
      return Response.json({ error: error.message }, { status: 500 });
    }
  },
};

3. Grabador de Audio en el Cliente y Transmisión por Fragmentos

Implementación en el navegador utilizando la API MediaRecorder para dividir el audio del micrófono en fragmentos de 2 segundos y enviarlos al Worker.

<!-- index.html -->
<button id="startBtn">Iniciar Grabación</button>
<button id="stopBtn" disabled>Detener</button>
<div id="transcript"></div>

<script>
  let mediaRecorder;
  const transcriptDiv = document.getElementById('transcript');

  document.getElementById('startBtn').onclick = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });

    mediaRecorder.ondataavailable = async (event) => {
      if (event.data.size > 0) {
        const audioBlob = event.data;
        const arrayBuffer = await audioBlob.arrayBuffer();

        // Enviar fragmento de audio al endpoint del Worker
        const res = await fetch('/api/stt', {
          method: 'POST',
          headers: { 'Content-Type': 'application/octet-stream' },
          body: arrayBuffer
        });

        const result = await res.json();
        if (result.text) {
          transcriptDiv.innerText += " " + result.text;
        }
      }
    };

    // Generar fragmentos cada 2000ms
    mediaRecorder.start(2000);
    document.getElementById('startBtn').disabled = true;
    document.getElementById('stopBtn').disabled = false;
  };
</script>

4. Consejos de Optimización

1. Detección de Actividad de Voz (VAD) en Cliente: Descarte fragmentos silenciosos antes de enviarlos para reducir peticiones a la IA.
2. Parámetros de Idioma y Traducción: El modelo @cf/openai/whisper (base) utilizado en este artículo no admite los parámetros language ni task. Si necesita reconocimiento multilingüe o traducción automática, cambie al modelo @cf/openai/whisper-large-v3-turbo y luego especifique language: "es" o envíe task: "translate" para traducir automáticamente el audio a texto en inglés.
3. Uso de WebSockets: Para respuestas bidireccionales inmediatas, combine Workers AI con WebSockets de Cloudflare.

Resumen y Conclusión

La unión de Cloudflare Workers AI y Whisper revoluciona la forma de desarrollar pipelines de reconocimiento de voz.

[!NOTE]

1. Ejecute Whisper con la línea de código env.AI.run('@cf/openai/whisper', ...) sin administrar servidores GPU.
2. Fraccione el audio en fragmentos de 1-2 segundos con MediaRecorder para una respuesta percibida instantánea.
3. Aproveche la infraestructura Edge de Cloudflare para eliminar costes operativos y maximizar la velocidad.

Desplegar STT a gran escala en arquitectura serverless es ahora accesible y altamente eficiente.