Web Speech Demo
Eine kleine Demo für die Web Speech API im Browser: Sprache erkennen und Text vorlesen – ohne Bibliotheken, nur mit dem, was der Browser mitbringt.
▶ Live-Demo: https://philwahle.github.io/web-speech-demo/
Ausprobieren
- Demo öffnen und den Zugriff aufs Mikrofon erlauben.
- Zuhören starten und sprechen – Zwischenergebnisse erscheinen sofort, fertige Sätze landen im Textfeld.
- Vorlesen liest das Transkript vor (oder nur den markierten Teil).
- Text markieren – irgendwo auf der Seite, z. B. im Beispieltext – liest ihn direkt vor.
- Unter Einstellungen Sprache, Stimme, Geschwindigkeit, Tonhöhe und Lautstärke ändern. Die Einstellungen bleiben im Browser gespeichert.
Browser-Unterstützung
| Vorlesen (speechSynthesis) | Erkennung (SpeechRecognition) |
|---|
| Chrome / Edge | ✓ | ✓ (online) |
| Safari | ✓ | ✓ |
| Firefox | ✓ | ✗ |
Welche Stimmen zur Auswahl stehen, hängt von Browser und Betriebssystem ab. Stimmen mit dem Zusatz „· online“ werden über einen Server erzeugt.
Datenschutz: Chrome und Edge schicken das Mikrofon-Audio zur Erkennung an Server von Google bzw. Microsoft. Safari erkennt je nach System auf dem Gerät oder über Apple-Server. Für Demos mit sensiblen Inhalten ist das wichtig zu wissen.
Der Mikrofonzugriff funktioniert nur in einem sicheren Kontext – also über https:// oder http://localhost.
Lokal starten
Voraussetzung: Node.js ab Version 22.
npm install
npm run dev
Danach die angezeigte Adresse (meist http://localhost:5173) in Chrome, Edge oder Safari öffnen.
| Befehl | Zweck |
|---|
npm run dev | Entwicklungsserver mit Live-Reload |
npm run build | Typprüfung und Build nach dist/ |
npm run preview | Build lokal ansehen |
Wie es funktioniert
Der Code steckt in vier kleinen Dateien unter src/:
| Datei | Inhalt |
|---|
recognition.ts | Spracherkennung starten, stoppen, Ergebnisse auswerten |
speak.ts | Text vorlesen und markierten Text finden |
settings.ts | Sprachen und Stimmen auflisten, Einstellungen speichern |
main.ts | Verbindet alles mit der Oberfläche |
Ein paar Stellen, an denen die API Überraschungen bereithält:
- Der Browser beendet die Erkennung von selbst – nach einer Pause, bei Netzwerkproblemen oder nach einer Zeitgrenze.
recognition.ts merkt sich deshalb, ob weiter zugehört werden soll, und startet nach dem end-Event neu. Nur bei Fehlern wie not-allowed (Mikrofon verweigert) wird endgültig gestoppt.
- Zwischen- und Endergebnisse: Mit
interimResults = true liefert das result-Event laufend vorläufigen Text. Erst Ergebnisse mit isFinal kommen ins Textfeld.
- Stimmen laden asynchron:
speechSynthesis.getVoices() ist beim Seitenstart oft noch leer. Die Auswahl wird deshalb beim Event voiceschanged neu aufgebaut.
- Sprachcodes sind nicht einheitlich: Manche Plattformen (z. B. Android) melden
de_DE statt de-DE. settings.ts vereinheitlicht das.
- Markierungen in Textfeldern erfasst
window.getSelection() nicht. speak.ts liest sie deshalb über selectionStart und selectionEnd aus.
- Typen: TypeScript kennt die Event-Typen der Erkennung, aber nicht
SpeechRecognition selbst. Die fehlenden Deklarationen stehen in speech-recognition.d.ts.
Ideen zum Weiterbauen
- Sprachbefehle wie „Stopp“ oder „Leeren“ erkennen
- Wörter beim Vorlesen hervorheben (
boundary-Event von SpeechSynthesisUtterance)
- Mehrere Erkennungsalternativen anzeigen (
maxAlternatives)
- Transkript als Textdatei herunterladen
Beispieltext
„Der Nordwind und die Sonne“ ist eine Fabel nach Äsop und gemeinfrei. Sie wird in der Phonetik traditionell als Referenztext verwendet.
Lizenz
MIT – frei verwendbar, auch kommerziell, solange der Lizenzhinweis erhalten bleibt.
