⚡Web APIs

Voice Input fuer Apps

Sprachsteuerung direkt im Browser ohne externe API

Die Web Speech API gibt dir Spracherkennung und Sprachausgabe direkt im Browser. Kein API-Key, keine Kosten, keine externe Abhaengigkeit. Perfekt fuer Suchfelder, Notizen oder Accessibility.

Pro-Tip — Der schnelle Weg
Kombiniere Spracherkennung mit einem visuellen Feedback. Ein pulsierender Kreis waehrend der Aufnahme zeigt dem Nutzer dass die App zuhoert.
Seite 1
1

SpeechRecognition initialisieren

Die Web Speech API ist nativ im Browser verfuegbar. Erstelle eine Instanz und konfiguriere Sprache und Continuous-Mode.

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = 'de-DE';
recognition.continuous = true;
recognition.interimResults = true;
2

Ergebnisse verarbeiten

Der onresult Handler liefert dir den erkannten Text. Mit interimResults bekommst du Zwischenergebnisse in Echtzeit waehrend der Nutzer noch spricht.

recognition.onresult = (event) => {
 let transcript = '';
 for (const result of event.results) {
 transcript += result[0].transcript;
 }
 setInput(transcript);
};


recognition.start();
3

React Hook erstellen

Kapsle die Speech API in einen wiederverwendbaren Hook mit Start, Stop und dem aktuellen Transkript als State.

function useSpeechRecognition() {
 const [text, setText] = useState('');
 const [isListening, setIsListening] = useState(false);
 const recRef = useRef<SpeechRecognition | null>(null);


 const start = () => { recRef.current?.start(); setIsListening(true); };
 const stop = () => { recRef.current?.stop(); setIsListening(false); };


 return { text, isListening, start, stop };
}
4

Sprachausgabe mit SpeechSynthesis

Die andere Richtung funktioniert genauso einfach. Lass den Browser Text vorlesen mit SpeechSynthesis.

function speak(text: string) {
 const utterance = new SpeechSynthesisUtterance(text);
 utterance.lang = 'de-DE';
 utterance.rate = 1;
 speechSynthesis.speak(utterance);
}
5

Fehlerbehandlung

Nicht alle Browser unterstuetzen die Speech API. Pruefe die Verfuegbarkeit und zeige einen Fallback. Chrome hat den besten Support, Firefox und Safari sind eingeschraenkt.

if (!('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)) {
 // Fallback: normales Textfeld anzeigen
 setShowFallback(true);
}
Seite 2
Warum das funktioniert
  • Native Browser-API ohne Kosten oder API-Keys
  • Spracherkennung verbessert die Accessibility erheblich
  • Schnellere Eingabe als Tippen besonders auf Mobilgeraeten
  • Kombinierbar mit KI fuer intelligente Sprachsteuerung
Tipps
  • Chrome hat den besten Support fuer die Web Speech API
  • Setze lang auf de-DE fuer deutsche Spracherkennung
  • interimResults zeigt Text waehrend der Nutzer noch spricht
  • Teste mit Hintergrundgeraeusch um die Zuverlaessigkeit zu pruefen
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen