Speech Recognition with JavaScript

#webdev #programming #javascript #tutorial

Cover image credits: dribbble

Some time ago, speech recognition API was added to the specs and we got partial support on Chrome, Safari, Baidu, android webview, iOS safari, samsung internet and Kaios browsers (see browser support in detail).

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

Edit: I realised that for any reason it won't work when embedded so here's the link to open it directly.

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:



/* 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

Latest comments (22)

Harshi Acchu • Sep 7 '24

Could you pls add tamil in it

Vũ Văn Thiêm • Jul 7 '24

Help me???
stackoverflow.com/questions/755279...

Aheed Tahir • Jan 15 '23

Can you please add urdu language

JoelBonetR 🥇 • Jan 16 '23

Hi @aheedkhan I'm not maintaining this anymore but feel free to fork the pen! 😄

İbrahim Yaşar • Aug 31 '22

This is really awesome. Could you please add the Turkish language? I would definitely like to try this in my native language and use it in my projects.