Speech Recognition with JavaScript
Tags: javascript, webdev, tutorial, programming
Published: 2022-08-22 09:23:00

<small>Cover image credits: dribbble</small>

Some time ago, [speech recognition API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) was added to the [specs](https://wicg.github.io/speech-api/#speechreco-section) and we got [partial support](https://caniuse.com/speech-recognition) on Chrome, Safari, Baidu, android webview, iOS safari, samsung internet and Kaios browsers ([see browser support in detail](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#browser_compatibility)).

<img src="https://i.pinimg.com/originals/0c/cc/f9/0cccf95b25a676546aaf6a3592a92476.gif" />

**Disclaimer:** This implementation won't work in Opera (as it doesn't support the constructor) and also won't work in FireFox (because it doesn't support a single thing of it) so if you're using one of those, I suggest you to use Chrome -or any other compatible browser- if you want to take a try.

## Speech recognition code and PoC

{% codepen https://codepen.io/joelbonetr/pen/poLGNde %}

**Edit:** I realised that for any reason it won't work when embedded so **[here's the link to open it directly](https://codepen.io/joelbonetr/pen/poLGNde?editors=0000)**.

The implementation I made currently supports English and Spanish just to showcase.

**Quick instructions and feature overview:**
- Choose one of the languages from the drop down.
- Hit the mic icon and it will start recording (you'll notice a weird animation).
- Once you finish a sentence it will write it down in the box.
- When you want it to stop recording, simply press the mic again (animation stops).
- You can also hit the box to copy the text in your clipboard.

## Speech Recognition in the Browser with JavaScript - key code blocks:

```js
/* Check whether the SpeechRecognition or the webkitSpeechRecognition API is available on window and reference it */
const recognitionSvc = window.SpeechRecognition || window.webkitSpeechRecognition;

// Instantiate it
const recognition = new recognitionSvc();

/* Set the speech recognition to continuous so it keeps listening to whatever you say. This way you can record long texts, conversations and so on. */
recognition.continuous = true;


/* Sets the language for speech recognition. It uses IETF tags, ISO 639-1 like en-GB, en-US, es-ES and so on */
recognition.lang = 'en-GB';

// Start the speech recognition
recognition.start();

// Event triggered when it gets a match
recognition.onresult = (event) => { 
  // iterate through speech recognition results
  for (const result of event.results) {
    // Print the transcription to the console
    console.log(`${result[0].transcript}`);
  }
}

// Stop the speech recognition
recognition.stop();
```

This implementation currently supports the following languages for speech recognition:
- en-GB
- en-US
- es-ES
- de-DE
- de-CH
- fr-FR

If you want me to **add support for more languages** tell me in the comment sections and I'm updating it in a blink so you can test it on your own language 😁


That's all for today, hope you enjoyed I sure did doing that

<img src="https://c.tenor.com/Arsu0w_nD2EAAAAM/bob-anakshie.gif" />