JavaScript Speech Recognition – Eine Sprachgesteuerte ToDo Liste
Mit der JavaScript Speech Recoginition API lassen sich ziemlich simpel geniale Funktionen umsetzen, die native Apps schnell alt aussehen lassen können. Wie das geht, erfährst Du in diesem Beitrag!
Die JavaScript Speech Recoginition API (oder auch Voice API) bietet uns die Möglichkeit auf das Mikrofon des Besuchers zuzugreifen und die Spracheingaben abzufangen und auszuwerten. Und damit lassen sich einige coole Sachen umsetzen: Das kann bis hin zur eigenen KI gehen! Oder Du baust Dir erstmal Deinen eigenen Amazon Echo (Alexa)? Du hast alle Möglichkeiten. 🙂
Voraussetzungen
Damit man die Speech Recognition API nutzen kann, muss der Browser JavaScript unterstützen, was mittlerweile aber glücklicherweise Standard ist. Wobei es tatsächlich Leute geben soll, die „das böse JavaScript“ blockieren…und dazu auch noch extra Add-Ons installieren. ?
Außerdem muss der Besucher einmalig der Mikrofon-Verwendung zustimmen. Dazu erscheint ein entsprechendes Pop-Up, welches ja nach Betriebssystem und Browser unterschiedlich aussehen kann. Man kann aber auch in den Browsereinstellungen die generelle Verwendung des Mikrofons auf allen Websites erlauben.
So verwendest Du die Speech Recognition API
Zu Beginn legen wir die für uns nutzbare Schnittstelle fest. Das müssen wir machen, da nicht alle Browser diese Funktion untersützten. Den aktuellen Status zur Browserunterstützung findest Du bei Can I use.
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
Nun erzeugen wir eine Instanz der SpeechRecognition Klasse. Den Parameter interimResults setzen wir auf true, damit wir Texteingaben auch während der Eingabe abrufen können und nicht erst, wenn die API das Ende der Spracheingabe erkannt hat. Dadurch können wir schon Auswertung vornehmen, obwohl der Satz nicht mal fertig gesprochen wurde.
Außerdem legen wir über den Parameter lang die Sprache fest.
Alle Events und Parameter kannst Du auch direkt in der Web Speech API Dokumentation nachlesen.
// setup SpeechRecognation const recognition = new SpeechRecognition(); recognition.interimResults = true; recognition.lang = 'en-US';
Damit ist alles vorbereitet und wir können anfangen auf Spracheingaben zu warten und diese auszuwerten. Das result Event wird ausgelöst, wenn die API eine vollständige Eingabe erkannt hat, also wenn der Nutzer z.B. seinen Satz beendet hat und eine Pause macht.
In der transcript Variable finden wir dann das Ergebnis. In Zeile 6 wird durch den Boolean isFinal nochmals geprüft, ob die Eingabe beendet wurde.
Optional habe ich ab Zeile 10 eine Abfrage eingebaut, um zu prüfen, ob eine Eingabe mit einem bestimmten Wort beginnt. Die anschließende Demo habe ich nach dem gleichen Prinzip aufgebaut.
// waiting for speech results
recognition.addEventListener('result', event => {
const transcript = event.results[0][0].transcript;
// check if the voice input has ended
if(event.results[0].isFinal) {
console.log(transcript);
// check if the input starts with 'hello'
if(transcript.indexOf('hello') == 0) {
console.log('You said hello to somebody.');
}
}
});
Als letztes starten wir die Spracheingabe über die .start() Funktion und rufen diese ebenfalls auf, wenn eine Eingabe beendet ist. Damit erreichen wir, dass die Speech Recognition API „dauerhaft“ zuhört.
recognition.addEventListener('end', recognition.start);
recognition.start();
Das kannst Du beliebig umbauen, dass das Zuhören z.B. beim Klick auf einen Button gestartet wird – je nach dem was Du vorhast.
Beispiel: Sprachgesteuerte ToDo Liste
Ich habe auch ein wenig mit der Speech Recognition API rumprobiert und habe eine sprachgesteuerte ToDo Liste damit erstellt. Nach dem gleichen Prinzip kannst Du auch Deine eigene Sprachsteuerung aufbauen. Probier’s ruhig mal selber aus – Du benötigst gar nicht so viel Code wie Du im ersten Moment vielleicht denkst!
Fazit
Ich selber bin ein großer Fan von reinen Webanwendungen und benötige generell wenig native Apps. Die Speech Recognition API kann dazu einen großen Beitrag leisten. Dabei ist die Umsetzung – wie Du gesehen hast – sehr einfach. Welche coole Funktion willst Du mit damit umsetzen? Schreib’s gern in die Kommentare. 🙂
Wie fandest du diesen Beitrag?
