Signatur
Beschreibung
Der Konstruktor SpeechGrammarList() gehört zur Web Speech API und erzeugt eine leere Liste von SpeechGrammar-Objekten. Diese Liste weist man anschließend der Eigenschaft SpeechRecognition.grammars zu. So teilt man der Spracherkennung mit, welche Wörter oder Sätze erwartet werden, zum Beispiel eine feste Auswahl an Befehlen oder Farbnamen.
Grammatiken werden meist im JSpeech Grammar Format (JSGF) beschrieben. Man fügt sie mit addFromString(string, weight) direkt als Zeichenkette hinzu oder mit addFromURI(src, weight) aus einer externen Datei. Das optionale Gewicht (0.0 bis 1.0) legt fest, wie wichtig eine Grammatik im Vergleich zu den anderen ist. Über length und item(index) (oder die Schreibweise mit eckigen Klammern) greift man auf die gespeicherten Einträge zu.
In der Praxis dient die Liste vor allem als Hinweis an die Erkennung. Aktuelle Browser werten Grammatiken kaum oder gar nicht aus. Die Erkennung kann also trotzdem Wörter liefern, die nicht in der Grammatik stehen. Deshalb sollte die Anwendung das Ergebnis immer selbst prüfen.
Rückgabewert
SpeechGrammarList mit length === 0.Beispiele
Instanz mit Präfix-Rückfall erzeugen
// Chrome/Edge nutzen das Präfix webkit
const GrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList;
if (!GrammarList) {
console.log('SpeechGrammarList wird nicht unterstützt');
} else {
const grammars = new GrammarList();
console.log(grammars.length);
}JSGF-Grammatik für Farbbefehle an die Erkennung übergeben
const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const GrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList;
const colors = ['rot', 'grün', 'blau', 'gelb', 'schwarz'];
const jsgf = `#JSGF V1.0; grammar colors; public <color> = ${colors.join(' | ')} ;`;
const grammars = new GrammarList();
grammars.addFromString(jsgf, 1); // Gewicht 1 = höchste Priorität
const recognition = new Recognition();
recognition.grammars = grammars;
recognition.lang = 'de-DE';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
recognition.addEventListener('result', (event) => {
const word = event.results[0][0].transcript.trim().toLowerCase();
// Ergebnis immer selbst prüfen, Grammatiken sind nur ein Hinweis
if (colors.includes(word)) {
document.body.style.backgroundColor = { rot: 'red', grün: 'green', blau: 'blue', gelb: 'yellow', schwarz: 'black' }[word];
} else {
console.log(`Unbekannte Farbe: ${word}`);
}
});
document.querySelector('#start').addEventListener('click', () => recognition.start());Mehrere Grammatiken hinzufügen und auslesen
const GrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList;
const list = new GrammarList();
list.addFromString('#JSGF V1.0; grammar yesno; public <answer> = ja | nein ;', 1);
list.addFromString('#JSGF V1.0; grammar nav; public <cmd> = weiter | zurück ;', 0.5);
console.log(list.length);
for (let i = 0; i < list.length; i++) {
const g = list.item(i);
console.log(i, g.weight);
}// Wichtig · Fallstricke
- Browserunterstützung: Chrome und Edge bieten die Schnittstelle nur als
webkitSpeechGrammarListan. Firefox unterstützt die Spracherkennung standardmäßig nicht, Safari nur teilweise. Prüfe deshalb immer, ob die Schnittstelle vorhanden ist, bevor du sie benutzt. - Grammatiken werden oft ignoriert: Chrome wertet übergebene Grammatiken praktisch nicht aus. Die Spezifikation entwickelt sich weg von
SpeechGrammar/SpeechGrammarListhin zu anderen Wegen, der Erkennung Wörter vorzuschlagen. Verlasse dich nicht darauf, dass die Erkennung nur die angegebenen Wörter liefert. - Der Konstruktor nimmt keine Argumente an. Grammatiken fügst du nachträglich mit
addFromString()oderaddFromURI()hinzu. - Gewichte außerhalb von
0.0bis1.0können einen Fehler auslösen. BeiaddFromURI()gelten die üblichen Regeln für Cross-Origin-Zugriffe (CORS). - In Chrome schickt die Spracherkennung die Audiodaten an einen Server. Das ist für den Datenschutz wichtig. Außerdem braucht die Seite einen sicheren Kontext (HTTPS) und die Erlaubnis, das Mikrofon zu nutzen.