Search code examples
javascriptecmascript-6speech-recognitionwebspeech-api

Web speech API grammar


Can somebody please tell me what this

 const grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghost | white | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'

line means from the follwoing?

const grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghost | white | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
const recognition = new SpeechRecognition()
const speechRecognitionList = new SpeechGrammarList()
speechRecognitionList.addFromString(grammar, 1)
recognition.grammars = speechRecognitionList

If i want to incorporate my own grammar what changes to this line do I need to make?


Solution

  • The line is a string following a set of rules of the JSGF specification. There is a more "user-friendly" explanation at MDN on this topic as well.

    Basically in this case we can break this down to:

    • #JSGF V1.0; a header from the specification, always necessary to know which version it should use. Shouldn't change for you.
    • grammar colors; is a (custom) name of your grammar.
    • public <color> = creates a publicly accessible rule called color. "Publicly accessible" means your grammar can be imported by someone else and this rule is accessible to them. color is the rule name. This is necessary when referring from another rule (example later)
    • aqua | azure | ... are the options that match this. | means "or". So when it recognises one of aqua, azure, ..., it matches that <color> rule.

    A bit more sophisticated example with referencing would be: #JSGF V1.0; grammar greeting; <greet> = hello | welcome; <name> = Alice | Bob; public <statement> = <greet> <name>;

    But now to the practicality of this: I've played around with the MDN Speech Recognition Demo a bit and I don't think that browsers are really using the grammar (yet). If you have a look into its source code, it will never call the recognition.onnomatch function, making the grammar feel a bit useless to me. It also doesn't show up in the results and in the end you only retrieve a transcript of the spoken text - at least in Chrome.

    My conclusion to this (mid 2020) is that you do not really need it right now. Maybe it could help in the future but as the Can I use... table (still) looks quite red, I doubt this will be the final way of doing things with speech.