Editorial review: Document new web speech api features

files/en-us/_redirects.txt

@@ -10322,6 +10322,8 @@
 /en-US/docs/Web/API/SpeechRecognitionError/message	/en-US/docs/Web/API/SpeechRecognitionErrorEvent/message
 /en-US/docs/Web/API/SpeechRecognitionEvent/SpeechRecognitionEvent.resultIndex	/en-US/docs/Web/API/SpeechRecognitionEvent/resultIndex
 /en-US/docs/Web/API/SpeechRecognitionEvent/SpeechRecognitionEvent.results	/en-US/docs/Web/API/SpeechRecognitionEvent/results
+/en-US/docs/Web/API/SpeechRecognitionEvent/emma	/en-US/docs/Web/API/SpeechRecognitionEvent
+/en-US/docs/Web/API/SpeechRecognitionEvent/interpretation	/en-US/docs/Web/API/SpeechRecognitionEvent
 /en-US/docs/Web/API/SpeechSynthesis/SpeechSynthesis.cancel	/en-US/docs/Web/API/SpeechSynthesis/cancel
 /en-US/docs/Web/API/SpeechSynthesis/onvoiceschanged	/en-US/docs/Web/API/SpeechSynthesis/voiceschanged_event
 /en-US/docs/Web/API/SpeechSynthesisUtterance/onboundary	/en-US/docs/Web/API/SpeechSynthesisUtterance/boundary_event

files/en-us/_wikihistory.json

@@ -58699,14 +58699,6 @@
     "modified": "2020-10-15T21:40:31.633Z",
     "contributors": ["Sheppy", "lucian95", "sgiles", "chrisdavidmills"]
   },
-  "Web/API/SpeechRecognitionEvent/emma": {
-    "modified": "2020-10-15T21:40:30.616Z",
-    "contributors": ["sideshowbarker", "ExE-Boss", "chrisdavidmills"]
-  },
-  "Web/API/SpeechRecognitionEvent/interpretation": {
-    "modified": "2020-10-15T21:40:31.763Z",
-    "contributors": ["sideshowbarker", "ExE-Boss", "chrisdavidmills"]
-  },
   "Web/API/SpeechRecognitionEvent/resultIndex": {
     "modified": "2020-10-15T21:40:31.951Z",
     "contributors": ["sideshowbarker", "ExE-Boss", "chrisdavidmills"]

files/en-us/web/api/speechgrammar/index.md

@@ -4,15 +4,17 @@ slug: Web/API/SpeechGrammar
 page-type: web-api-interface
 status:
   - deprecated
-  - non-standard
 browser-compat: api.SpeechGrammar
 ---
 
-{{APIRef("Web Speech API")}}{{deprecated_header}}{{non-standard_header}}
+{{APIRef("Web Speech API")}}{{deprecated_header}}
 
-The **`SpeechGrammar`** interface of the [Web Speech API](/en-US/docs/Web/API/Web_Speech_API) represents a set of words or patterns of words that we want the recognition service to recognize.
+The **`SpeechGrammar`** interface of the [Web Speech API](/en-US/docs/Web/API/Web_Speech_API) represents a set of words or patterns of words for the recognition service to recognize.
 
-Grammar is defined using [JSpeech Grammar Format](https://www.w3.org/TR/jsgf/) (**JSGF**.) Other formats may also be supported in the future.
+Grammar is defined using [JSpeech Grammar Format](https://www.w3.org/TR/jsgf/) (**JSGF**).
+
+> [!NOTE]
+> The whole concept of grammar has been removed from the Web Speech API. Related features have been kept in the specification and are still recognized by supporting browsers for backwards compatibility purposes, but they have no effect on speech recognition services.
 
 ## Constructor
 
@@ -21,9 +23,9 @@ Grammar is defined using [JSpeech Grammar Format](https://www.w3.org/TR/jsgf/) (
 
 ## Instance properties
 
-- {{domxref("SpeechGrammar.src")}} {{deprecated_inline}} {{non-standard_inline}}
+- {{domxref("SpeechGrammar.src")}} {{deprecated_inline}}
   - : Sets and returns a string containing the grammar from within in the `SpeechGrammar` object instance.
-- {{domxref("SpeechGrammar.weight")}} {{Optional_Inline}} {{deprecated_inline}} {{non-standard_inline}}
+- {{domxref("SpeechGrammar.weight")}} {{deprecated_inline}}
   - : Sets and returns the weight of the `SpeechGrammar` object.
 
 ## Examples

files/en-us/web/api/speechgrammar/speechgrammar/index.md

@@ -25,22 +25,6 @@ new SpeechGrammar()
 
 None.
 
-## Examples
-
-```js
-const grammar =
-  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | 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;
-
-const newGrammar = new SpeechGrammar();
-newGrammar.src =
-  "#JSGF V1.0; grammar names; public <name> = chris | kirsty | mike;";
-speechRecognitionList[1] = newGrammar; // should add the new SpeechGrammar object to the list
-```
-
 ## Specifications
 
 This API has no official W3C or WHATWG specification.

files/en-us/web/api/speechgrammar/src/index.md

@@ -5,11 +5,10 @@ slug: Web/API/SpeechGrammar/src
 page-type: web-api-instance-property
 status:
   - deprecated
-  - non-standard
 browser-compat: api.SpeechGrammar.src
 ---
 
-{{APIRef("Web Speech API")}}{{deprecated_header}}{{non-standard_header}}
+{{APIRef("Web Speech API")}}{{deprecated_header}}
 
 The **`src`** property of the {{domxref("SpeechGrammar")}} interface
 is used to get or set a string that contains the grammar within the `SpeechGrammar` object.
@@ -18,20 +17,6 @@ is used to get or set a string that contains the grammar within the `SpeechGramm
 
 A string representing the grammar.
 
-## Examples
-
-```js
-const grammar =
-  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | 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;
-
-console.log(speechRecognitionList[0].src); // should return the same as the contents of the grammar variable
-console.log(speechRecognitionList[0].weight); // should return 1 - the same as the weight set in addFromString.
-```
-
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/speechgrammar/weight/index.md

@@ -5,11 +5,10 @@ slug: Web/API/SpeechGrammar/weight
 page-type: web-api-instance-property
 status:
   - deprecated
-  - non-standard
 browser-compat: api.SpeechGrammar.weight
 ---
 
-{{APIRef("Web Speech API")}}{{deprecated_header}}{{non-standard_header}}
+{{APIRef("Web Speech API")}}{{deprecated_header}}
 
 The optional **`weight`** property of the
 {{domxref("SpeechGrammar")}} interface sets and returns the weight of the
@@ -19,20 +18,6 @@ The optional **`weight`** property of the
 
 A float representing the weight of the grammar, in the range 0.0–1.0.
 
-## Examples
-
-```js
-const grammar =
-  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | 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;
-
-console.log(speechRecognitionList[0].src); // should return the same as the contents of the grammar variable
-console.log(speechRecognitionList[0].weight); // should return 1 - the same as the weight set in addFromString.
-```
-
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/speechgrammarlist/addfromstring/index.md

@@ -4,11 +4,11 @@ short-title: addFromString()
 slug: Web/API/SpeechGrammarList/addFromString
 page-type: web-api-instance-method
 status:
-  - experimental
+  - deprecated
 browser-compat: api.SpeechGrammarList.addFromString
 ---
 
-{{APIRef("Web Speech API")}}{{ SeeCompatTable() }}
+{{APIRef("Web Speech API")}}{{deprecated_header}}
 
 The **`addFromString()`** method of the
 {{domxref("SpeechGrammarList")}} interface takes a grammar present in a specific
@@ -37,17 +37,6 @@ addFromString(string, weight)
 
 None ({{jsxref("undefined")}}).
 
-## Examples
-
-```js
-const grammar =
-  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | 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;
-```
-
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/speechgrammarlist/addfromuri/index.md

@@ -4,11 +4,11 @@ short-title: addFromURI()
 slug: Web/API/SpeechGrammarList/addFromURI
 page-type: web-api-instance-method
 status:
-  - experimental
+  - deprecated
 browser-compat: api.SpeechGrammarList.addFromURI
 ---
 
-{{APIRef("Web Speech API")}}{{ SeeCompatTable() }}
+{{APIRef("Web Speech API")}}{{deprecated_header}}
 
 The **`addFromURI()`** method of the
 {{domxref("SpeechGrammarList")}} interface takes a grammar present at a specific URI and
@@ -40,19 +40,6 @@ addFromURI(src, weight)
 
 None ({{jsxref("undefined")}}).
 
-## Examples
-
-```js
-const grammar =
-  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | 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;
-
-speechRecognitionList.addFromURI("http://www.example.com/grammar.txt"); // adds a second grammar to the list.
-```
-
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/speechgrammarlist/index.md

@@ -3,39 +3,40 @@ title: SpeechGrammarList
 slug: Web/API/SpeechGrammarList
 page-type: web-api-interface
 status:
-  - experimental
+  - deprecated
 browser-compat: api.SpeechGrammarList
 ---
 
-{{APIRef("Web Speech API")}}{{SeeCompatTable}}
+{{APIRef("Web Speech API")}}{{deprecated_header}}
 
 The **`SpeechGrammarList`** interface of the [Web Speech API](/en-US/docs/Web/API/Web_Speech_API) represents a list of {{domxref("SpeechGrammar")}} objects containing words or patterns of words that we want the recognition service to recognize.
 
-Grammar is defined using [JSpeech Grammar Format](https://www.w3.org/TR/jsgf/) (**JSGF**.) Other formats may also be supported in the future.
+Grammar is defined using [JSpeech Grammar Format](https://www.w3.org/TR/jsgf/) (**JSGF**).
+
+> [!NOTE]
+> The whole concept of grammar has been removed from the Web Speech API. Related features have been kept in the specification and are still recognized by supporting browsers for backwards compatibility purposes, but they have no effect on speech recognition services.
 
 ## Constructor
 
-- {{domxref("SpeechGrammarList.SpeechGrammarList", "SpeechGrammarList()")}} {{Experimental_Inline}}
+- {{domxref("SpeechGrammarList.SpeechGrammarList", "SpeechGrammarList()")}} {{deprecated_inline}}
   - : Creates a new `SpeechGrammarList` object.
 
 ## Instance properties
 
-- {{domxref("SpeechGrammarList.length")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+- {{domxref("SpeechGrammarList.length")}} {{ReadOnlyInline}} {{deprecated_inline}}
   - : Returns the number of {{domxref("SpeechGrammar")}} objects contained in the `SpeechGrammarList`.
 
 ## Instance methods
 
-- {{domxref("SpeechGrammarList.item()")}} {{Experimental_Inline}}
+- {{domxref("SpeechGrammarList.item()")}} {{deprecated_inline}}
   - : Standard getter — allows individual {{domxref("SpeechGrammar")}} objects to be retrieved from the `SpeechGrammarList` using array syntax.
-- {{domxref("SpeechGrammarList.addFromURI()")}} {{Experimental_Inline}}
+- {{domxref("SpeechGrammarList.addFromURI()")}} {{deprecated_inline}}
   - : Takes a grammar present at a specific URI and adds it to the `SpeechGrammarList` as a new {{domxref("SpeechGrammar")}} object.
-- {{domxref("SpeechGrammarList.addFromString()")}} {{Experimental_Inline}}
+- {{domxref("SpeechGrammarList.addFromString()")}} {{deprecated_inline}}
   - : Adds a grammar in a string to the `SpeechGrammarList` as a new {{domxref("SpeechGrammar")}} object.
 
 ## Examples
 
-In our simple [Speech color changer](https://github.com/mdn/dom-examples/tree/main/web-speech-api/speech-color-changer) example, we create a new `SpeechRecognition` object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new `SpeechGrammarList`, add our grammar string to it using the {{domxref("SpeechGrammarList.addFromString")}} method, and set it to be the grammar that will be recognized by the `SpeechRecognition` instance using the {{domxref("SpeechRecognition.grammars")}} property.
-
 ```js
 const grammar =
   "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | 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 ;";

files/en-us/web/api/speechgrammarlist/item/index.md

@@ -4,11 +4,11 @@ short-title: item()
 slug: Web/API/SpeechGrammarList/item
 page-type: web-api-instance-method
 status:
-  - experimental
+  - deprecated
 browser-compat: api.SpeechGrammarList.item
 ---
 
-{{APIRef("Web Speech API")}}{{ SeeCompatTable() }}
+{{APIRef("Web Speech API")}}{{deprecated_header}}
 
 The **`item`** getter of the {{domxref("SpeechGrammarList")}}
 interface is a standard getter — it allows individual {{domxref("SpeechGrammar")}}
@@ -29,19 +29,6 @@ item(index)
 
 A {{domxref("SpeechGrammar")}} object.
 
-## Examples
-
-```js
-const grammar =
-  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | 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;
-
-const myFirstGrammar = speechRecognitionList[0]; // variable contain the object created above
-```
-
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/speechgrammarlist/length/index.md

@@ -4,11 +4,11 @@ short-title: length
 slug: Web/API/SpeechGrammarList/length
 page-type: web-api-instance-property
 status:
-  - experimental
+  - deprecated
 browser-compat: api.SpeechGrammarList.length
 ---
 
-{{APIRef("Web Speech API")}}{{ SeeCompatTable() }}
+{{APIRef("Web Speech API")}}{{deprecated_header}}
 
 The **`length`** read-only property of the
 {{domxref("SpeechGrammarList")}} interface returns the number of
@@ -19,19 +19,6 @@ The **`length`** read-only property of the
 A number indicating the number of {{domxref("SpeechGrammar")}} objects contained in the
 {{domxref("SpeechGrammarList")}}.
 
-## Examples
-
-```js
-const grammar =
-  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | 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;
-
-speechRecognitionList.length; // should return 1.
-```
-
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/speechgrammarlist/speechgrammarlist/index.md

@@ -4,11 +4,11 @@ short-title: SpeechGrammarList()
 slug: Web/API/SpeechGrammarList/SpeechGrammarList
 page-type: web-api-constructor
 status:
-  - experimental
+  - deprecated
 browser-compat: api.SpeechGrammarList.SpeechGrammarList
 ---
 
-{{APIRef("Web Speech API")}}{{ SeeCompatTable() }}
+{{APIRef("Web Speech API")}}{{deprecated_header}}
 
 The **`SpeechGrammarList()`** constructor creates a new
 `SpeechGrammarList` object instance.
@@ -23,24 +23,6 @@ new SpeechGrammarList()
 
 None.
 
-## Examples
-
-In our simple [Speech color changer](https://github.com/mdn/dom-examples/tree/main/web-speech-api/speech-color-changer) example, we create a new `SpeechRecognition` object
-instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, add
-our grammar string to it using the {{domxref("SpeechGrammarList.addFromString")}}
-method, and set it to be the grammar that will be recognized by the
-`SpeechRecognition` instance using the
-{{domxref("SpeechRecognition.grammars")}} property.
-
-```js
-const grammar =
-  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | 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;
-```
-
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/speechrecognition/abort/index.md

@@ -29,17 +29,14 @@ None ({{jsxref("undefined")}}).
 ## Examples
 
 ```js
-const grammar =
-  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | 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;
 
 const diagnostic = document.querySelector(".output");
 const bg = document.querySelector("html");
+const startBtn = document.querySelector(".start");
+const abortBtn = document.querySelector(".abort");
 
-document.body.onclick = () => {
+startBtn.onclick = () => {
   recognition.start();
   console.log("Ready to receive a color command.");
 };