SpeechRecognition: start() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Thestart() method of theWeb Speech API starts the speech recognition service to listen for incoming audio (from a microphone or an audio track) and returns the results of that recognition.
Syntax
start()start(audioTrack)Parameters
audioTrackOptionalExperimentalA
MediaStreamTrackinstance to perform speech recognition on. If not specified, the service attempts to recognize audio from the user's microphone instead.
Return value
None (undefined).
Exceptions
InvalidStateErrorDOMExceptionThrown if an
audioTrackis specified and one or both of the following are true:- The track's
kindproperty is notaudio. - The track's
readyStateproperty is notlive.
- The track's
Examples
Recognizing speech from a microphone
In ourSpeech color changer example, we create a newSpeechRecognition object instance using theSpeechRecognition() constructor. Later on, we create aclick event handler on a<button> so that when it's clicked, we start the speech recognition service and await audio input from the user's microphone:
const recognition = new SpeechRecognition();const diagnostic = document.querySelector(".output");const bg = document.querySelector("html");const startBtn = document.querySelector("button");startBtn.onclick = () => { recognition.start(); console.log("Ready to receive a color command.");};When a result has been successfully recognized, theresult event fires. We extract the color that was spoken from the event object by grabbing thetranscript of the firstSpeechRecognitionAlternative of the firstSpeechRecognitionResult in the returnedresults list. We then set the background color of the<html> element to that color.
recognition.onresult = (event) => { const color = event.results[0][0].transcript; diagnostic.textContent = `Result received: ${color}`; bg.style.backgroundColor = color;};Recognizing speech from an audio track
This code (excerpted from ouraudio track recognition demo) shows how to recognize speech from an audio track. To begin with, we create a newSpeechRecognition instance and set itslang toen-US. We then grab a reference to a<button> element and a<p> element to output results and diagnostic information.
const recognition = new SpeechRecognition();recognition.lang = "en-US";const startBtn = document.querySelector("button");const diagnostic = document.querySelector(".output");Next, we add aclick event handler to the<button>. When it is clicked, we create a new<audio> element using theAudio() constructor and load an MP3 file into it. Once the MP3 is ready to play (determined by thecanplay event), we capture it as aMediaStream using thecaptureStream() method, then extract its audioMediaStreamTrack usinggetAudioTracks().
We then play the audio (required for the recognition to take place), and pass theMediaStreamTrack into thestart() method to start the recognition.
startBtn.addEventListener("click", () => { diagnostic.textContent = ""; console.log("Loading audio track"); const audioElement = new Audio("cheese-on-toast.mp3"); audioElement.addEventListener("canplay", () => { const stream = audioElement.captureStream(); const audioTrack = stream.getAudioTracks()[0]; audioElement.play(); recognition.start(audioTrack); console.log("Recognition started"); });});To output the recognized audio, we listen for theresult event. When that fires, we grab thetranscript of the firstSpeechRecognitionAlternative of the firstSpeechRecognitionResult in the returnedresults list. We output the transcript itself to the output<p> and log its confidence rating to the console.
recognition.addEventListener("result", (event) => { const speech = event.results[0][0].transcript; diagnostic.textContent = `Speech recognized: ${speech}.`; console.log(`Confidence: ${event.results[0][0].confidence}`);});Specifications
| Specification |
|---|
| Web Speech API # dom-speechrecognition-start |