Echtzeit-Spracherkennung (STT) Pipelines mit Cloudflare Workers AI und Whisper aufbauen

Echtzeit-Spracherkennung (STT) Pipelines mit Cloudflare Workers AI und Whisper aufbauen

Spracherkennung (STT, Speech-to-Text) ist eine zentrale Funktion für automatische Untertitel, Sprachnotizen und Live-Transkriptionen. Der Betrieb eigener GPU-Server für OpenAIs Whisper-Modell oder die Nutzung teurer externer APIs führt jedoch zu hohen Infrastruktur- und Datenübertragungskosten.

Cloudflare Workers AI löst dieses Problem, indem es das Whisper-Modell (@cf/openai/whisper) direkt auf der globalen Edge-Infrastruktur von Cloudflare mit serverlosen GPUs und extrem geringer Latenz ausführt.

In diesem Artikel zeigen wir, wie Sie eine vollständige Echtzeit-STT-Streaming-Pipeline aufbauen, indem Sie die Web Audio APIs des Browsers mit Cloudflare Workers AI verbinden.

1. Vorteile: Traditionelle GPU-Server vs. Cloudflare Workers AI Whisper

2. Workers AI Whisper Integration (wrangler.jsonc & Worker Code)

Über Cloudflare Workers Bindings kann das Whisper-Modell ohne externen API-Schlüssel direkt im Worker aufgerufen werden.

1) wrangler.jsonc Konfiguration

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

2) Worker STT Logik (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 {
      // Audio-Binärdaten vom Browser-Client
      const audioBuffer = await request.arrayBuffer();

      // Ausführen des Whisper-Modells über Workers AI Binding
      const response = await env.AI.run('@cf/openai/whisper', {
        audio: [...new Uint8Array(audioBuffer)],
      });

      // Transkriptionsergebnis zurückgeben
      return Response.json({
        text: response.text,
        word_count: response.words?.length || 0,
        vtt: response.vtt, // WebVTT Untertitel-Format
      });
    } catch (error: any) {
      return Response.json({ error: error.message }, { status: 500 });
    }
  },
};

3. Client Web Audio Recorder und Chunked-Streaming

Diese Frontend-Implementierung nutzt die MediaRecorder-API des Browsers, um Mikrofondaten in 2-Sekunden-Audio-Chunks zu schneiden und kontinuierlich an den Worker zu senden.

<!-- index.html -->
<button id="startBtn">Aufnahme starten</button>
<button id="stopBtn" disabled>Stopp</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();

        // Audio-Chunk an den Worker senden
        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;
        }
      }
    };

    // Alle 2000ms Audio-Chunks erzeugen
    mediaRecorder.start(2000);
    document.getElementById('startBtn').disabled = true;
    document.getElementById('stopBtn').disabled = false;
  };
</script>

4. Tipps für die Produktions-Optimierung

1. Client-seitiges VAD (Voice Activity Detection): Stumme Abschnitte vor dem Senden filtern, um KI-Ausführungskosten zu reduzieren.
2. Sprach- und Übersetzungs-Parameter: Das in diesem Artikel verwendete Modell @cf/openai/whisper (base) unterstützt die Parameter language und task nicht. Wenn Sie mehrsprachige Erkennung oder automatische Übersetzung benötigen, wechseln Sie zum Modell @cf/openai/whisper-large-v3-turbo und geben Sie dann language: "de" an oder nutzen Sie task: "translate", um Audiodaten direkt in englischen Text zu übersetzen.
3. WebSocket-Integration: Kombinieren Sie Workers AI mit Cloudflare WebSockets für verzögerungsfreie bidirektionale Rückmeldungen.

Zusammenfassung und Fazit

Cloudflare Workers AI in Verbindung mit Whisper verändert die Bereitstellung von Spracherkennungs-Pipelines grundlegend.

[!NOTE]

1. Führen Sie Whisper mit env.AI.run('@cf/openai/whisper', ...) aus, ohne GPU-Server verwalten zu müssen.
2. Nutzen Sie die MediaRecorder-API für 1–2 Sekunden Chunks für schnelle Echtzeit-Transkription.
3. Nutzen Sie die Edge-Infrastruktur von Cloudflare für minimale Latenzzeiten und geringe Betriebskosten.

Serverlose Spracherkennung im großen Maßstab lässt sich so extrem einfach und kosteneffizient umsetzen.