Sprich mit deinem Browser (Audio)
Dein Browser hört zu — und versteht: Aus einer Sekunde Ton wird ein Spektrogramm, aus dem Spektrogramm ein Bild, aus dem Bild ein Wort. Steuere eine Spielfigur per Zuruf und trainiere dem Modell danach dein eigenes Wort an. Kein Ton verlässt dabei dein Gerät.
👋 HerrKI hier — heute redest du mit deinem Browser
„Alexa, mach das Licht an.“ „Hey Siri, stell einen Wecker.“ Millionen Menschen sprechen jeden Tag mit Maschinen, und die meisten haben sich nie gefragt, was in der Sekunde zwischen Zuruf und Reaktion eigentlich passiert. Wie hört ein Computer? Er hat keine Ohren, kein Gehirn und keine Ahnung von Sprache — er hat nur Zahlen.
Heute holst du dir die Antwort in deinen eigenen Browser. Kein Cloud-Dienst, kein Konto, kein Kabel nach Seattle: Ein 6 Megabyte kleines Modell landet auf deinem Gerät, hört dir zu und versteht 18 gesprochene Kommandos. Damit steuerst du gleich eine Spielfigur. Und danach machst du das, was sonst nur Forschungsteams machen: Du bringst dem Modell ein eigenes, neues Wort bei.
- Warum Spracherkennung in Wahrheit Bild-Erkennung ist — der wichtigste Aha-Moment des Kapitels
- Was ein Spektrogramm ist und wie aus 1 Sekunde Klang der Tensor
[43, 232, 1]wird - Dass am Ende auch hier nur eine nüchterne Zahlenreihe steht — 20 Werte, mehr sagt das Netz nicht
- Wie Transfer-Learning funktioniert: großes Modell einfrieren, winzigen Kopf antrainieren
- Und ganz praktisch: eine Spielfigur per Zuruf steuern und dem Modell dein eigenes Wort beibringen
💡 Roter Faden: Wir gehen von der Sprachassistentin, die jeder kennt, runter bis zum Tensor — und wieder hoch bis zu einem Modell, das dein Wort kennt. Am Ende weißt du genau, warum dein Handy „stop“ versteht und „Stopp“ nicht.
🔒 Dein Mikrofon-Ton bleibt auf deinem Gerät
Das ist der eigentliche Clou dieses Kapitels — und der Unterschied zu jeder Sprachassistentin, die du kennst. Bei Alexa, Siri und Google Assistant wird der aufgenommene Ton (oder eine daraus berechnete Darstellung) zu einem Rechenzentrum geschickt, dort erkannt und beantwortet. Deshalb gab es die Schlagzeilen über Mitarbeiter, die Sprachaufnahmen zur Qualitätskontrolle anhören.
Hier läuft es anders herum:
- Das Modell kommt zu dir — einmalig 6 MB, dann liegt es in deinem Browser.
- Dein Ton geht nur an die Web-Audio-Schnittstelle deines Browsers und von dort direkt in TensorFlow.js. Es gibt in diesem Kapitel keine einzige Zeile Code, die etwas an einen Server schickt.
- Nichts wird gespeichert. Seite neu laden = alles weg, auch dein selbst antrainiertes Wort.
Wenn du misstrauisch bist (sehr gesund!): Entwicklertools öffnen, Reiter „Netzwerk“, dann sprechen. Du siehst dort das einmalige Laden der Modelldatei — und danach nichts mehr. Kein Byte verlässt dein Gerät, solange du redest.
🎤 Bevor du loslegst: drei ehrliche Hinweise
- Du brauchst ein Mikrofon. Ein Handy ist dafür sogar ideal — halte es beim Sprechen etwa eine Handbreit vor den Mund. Der Browser fragt dich einmal um Erlaubnis; ohne dein „Ja“ passiert nichts. (Ohne Mikrofon kommst du trotzdem durch: Es gibt weiter unten einen Datei-Notnagel und Ersatzknöpfe fürs Spiel.)
- Das Modell versteht 18 englische Wörter — es wurde auf englischen Sprechern trainiert. „Stopp“ auf Deutsch wird es also eher nicht erkennen, „stop“ auf Englisch schon. Das ist keine Macke, sondern die ehrliche Konsequenz aus den Trainingsdaten (siehe „Daten vorbereiten“).
- Auf iPhone und iPad darf ein Browser erst nach einem echten Fingertipp aufs Mikrofon zugreifen — deshalb startet hier alles per Knopfdruck und nicht automatisch beim Seitenaufruf.
Das komplette Vokabular (blau = die Steuerwörter fürs Spiel)
Das Netz kennt noch zwei weitere Kategorien, die keine Wörter sind: _background_noise_
(Hintergrundgeräusch) und _unknown_ (irgendein Wort, das nicht dazugehört). Zusammen sind
das 20 Ausgänge — merk dir die Zahl, sie kommt gleich wieder.
🖼️ Der Kern-Trick: Hören ist hier Bild-Erkennung
Jetzt kommt der Gedanke, wegen dem sich dieses Kapitel lohnt. Man würde vermuten, dass Spracherkennung etwas völlig Eigenes ist — Phoneme, Grammatik, Wörterbücher. Ist sie hier nicht. Der Browser macht mit deinem Ton etwas verblüffend Simples: Er malt ihn.
Ein Mikrofon misst nur eine einzige Größe: den Luftdruck, sehr oft hintereinander — 44.100-mal pro Sekunde. Eine Sekunde Ton ist also erstmal ein langer Vektor mit 44.100 Zahlen. Damit kann ein Bilderkennungs-Netz nichts anfangen. Also wird der Ton in 43 kleine Zeitfenster von je 23 Millisekunden zerschnitten, und für jedes Fenster fragt eine Fourier-Transformation (FFT): Welche Tonhöhen stecken in diesem Moment drin, und wie laut? Die Antwort sind 232 Zahlen — eine pro Frequenzband, von tief bis hoch.
43 Zeitschritte × 232 Frequenzen: Das ist eine Tabelle aus Zahlen — und eine Tabelle aus Zahlen ist genau das, was du aus „Bilder als Tensoren“ kennst. Ein Spektrogramm ist ein Bild. Waagerecht die Zeit, senkrecht die Tonhöhe, die Helligkeit ist die Lautstärke. Und deshalb steckt hinter der Spracherkennung hier dasselbe CNN — dasselbe Faltungs-Prinzip mit Filtern, die Kanten und Muster suchen — wie bei den handgeschriebenen Ziffern in „Ziffern erkennen“. Nur ist das Bild diesmal ein Klang.
Hier siehst du dieses Bild gleich live. Sobald du unten das Mikrofon startest, malt der Browser das Spektrogramm des zuletzt erkannten Wortes in dieses Feld — links der Anfang der Sekunde, rechts das Ende, unten die tiefen Töne, oben die hohen. Hell = laut.
Noch leer — starte unten das Mikrofon und sag ein Wort. ↓
🎙️ Werkzeug 1: Kommandos erkennen
1Modell holen und zuhören
Das Modell wird erst jetzt geladen, nicht beim Seitenaufruf — 6 MB will niemand ungefragt aufs Mobilfunkvolumen bekommen. Danach fragt dein Browser nach dem Mikrofon.
Die Top 3 — wie sicher ist sich das Netz?
Und das ist die ganze Antwort des Netzes — 20 Kommazahlen, eine pro Kategorie. Kein Wort, kein Sinn, keine Bedeutung. Dass daraus „links“ wird, macht erst der Code drumherum, indem er den größten Wert sucht und in der Vokabelliste nachschlägt:
Kein Mikrofon? Der Datei-Notnagel
Zieh eine kurze Tonaufnahme (mindestens 1 Sekunde, z. B. WAV, MP3 oder M4A) hier hinein. Der Browser spielt sie stumm ab, berechnet dabei dasselbe Spektrogramm wie beim Mikrofon und lässt das Modell einmal raten. Auch diese Datei wird nicht hochgeladen — sie geht nur in den Arbeitsspeicher.
🕹️ Werkzeug 1 in Aktion: Steuer die Figur mit deiner Stimme
Jetzt hängen wir an die 20 Zahlen etwas Nützliches: left, right,
up und down bewegen die blaue Figur um ein Feld, go schickt sie in
den Dauerlauf in die zuletzt genannte Richtung, stop hält sie an. Bring sie auf das rote
Ziel — dann springt das Ziel weiter.
Ziele erreicht: 0 Schritte: 0 Status: bereit
Ersatz-Steuerung zum Ausprobieren (oder falls kein Mikrofon da ist):
Warum zappelt die Figur nicht? Weil zwei Stellschrauben das verhindern. Das Netz gibt
nur dann ein Kommando weiter, wenn es sich zu mindestens 85 % sicher ist
(probabilityThreshold 0.85) — sonst wäre jedes Husten ein Zug. Und es schaut sich das
1-Sekunden-Fenster nur alle halbe Sekunde neu an (overlapFactor 0.5), statt 43-mal pro
Sekunde. Beides zusammen ist die Drossel: lieber ein Kommando zu wenig als zehn zu viel.
🚀 Werkzeug 2: Bring dem Modell DEIN Wort bei
Bis hier hast du benutzt, was Google trainiert hat. Jetzt drehen wir den Spieß um. Du willst, dass der Browser auf „HerrKI“ hört? Oder auf deinen Namen, „Kaffee“ oder ein Pfeifen? Kein Problem — und du brauchst dafür nicht die 105.000 Aufnahmen, mit denen das Originalmodell trainiert wurde. Acht Aufnahmen reichen. Der Trick heißt Transfer-Learning.
Die Idee: Das große Netz hat in den vier Faltungsschichten bereits gelernt, wie menschliche Sprache in einem Spektrogramm aussieht — wo Vokale breite Bänder malen, wo ein „t“ einen scharfen senkrechten Strich setzt. Dieses Wissen ist wertvoll und völlig unabhängig davon, welche Wörter am Ende herauskommen sollen. Also lassen wir es in Ruhe: Das große Netz wird eingefroren und dient nur noch als Ohr, als Merkmals-Extraktor. Wir schneiden bloß die letzte Schicht ab — die mit den 20 Ausgängen — und setzen einen winzigen neuen Kopf darauf, der nur zwei Ausgänge hat: „dein Wort“ und „irgendwas anderes“.
Genau dieses Prinzip steckt hinter dem Finetuning großer Sprachmodelle aus „Finetuning oder Prompting?“: Auch dort bleibt das Milliarden-Parameter-Modell im Kern unangetastet, und nur ein hauchdünner Zusatz wird gelernt (bei Sprachmodellen heißt diese Technik LoRA). Der Unterschied zu dem, was du gleich machst, ist nur die Größe — das Prinzip ist buchstäblich dasselbe: Wissen wiederverwenden statt neu erfinden.
HerrKI
Hintergrund
Für „Hintergrund“ nimmst du Stille, Raumgeräusch oder ein völlig anderes Wort auf. Das ist keine Fleißarbeit, sondern nötig: Ein Netz kann nur unterscheiden, wenn es weiß, wovon. Ein Modell, das nur „HerrKI“ kennt, würde auf alles mit „HerrKI!“ antworten.
Jetzt hört es auf dich
⚠️ Ehrlich bleiben: was das hier nicht kann
- Englisch, und nur diese 18 Wörter. Das Modell hat nie ein deutsches Wort gehört. Es kann auch keine Sätze, keine Namen, keine Grammatik — es ordnet ein 1-Sekunden-Bild einer von 20 Schubladen zu. Mehr ist es nicht, und mehr behauptet es auch nicht.
- Akzent und Lärm hauen rein. Deutsche Sprecher betonen „go“ und „no“ anders als die Amerikaner in den Trainingsdaten — Verwechslungen sind normal. Nebengeräusche, Lüfter, Musik oder ein Zimmer mit Hall verschieben das Spektrogramm sichtbar, und das Netz sieht ja nur das Bild.
- Das 1-Sekunden-Fenster ist hart. Wer zu langsam spricht, wird abgeschnitten; wer zu früh anfängt, landet halb außerhalb. Deshalb: kurz, klar, mittig ins Fenster.
- Dein eigenes Wort ist empfindlich. Acht Beispiele sind acht Beispiele. Sprich beim Antrainieren und beim Testen gleich — gleiche Lautstärke, gleicher Abstand, gleiches Zimmer. Wenn du beim Aufnehmen flüsterst und danach rufst, ist das für das Netz ein anderes Bild. Genau deshalb funktionieren Sprachassistenten in der Küche schlechter als im Büro.
🧭 Und damit zurück nach oben: Wenn deine Sprachassistentin dich das nächste Mal falsch versteht, weißt du jetzt, was schiefging — irgendwo lag ein Bild auf dem Tisch, das dem falschen Muster ähnlicher sah. Kein Missverständnis, keine schlechte Laune, keine Magie. Nur eine Zahlenreihe mit 20 Einträgen, deren größter an der falschen Stelle stand.
