Speech Recognition with JavaScript

#javascript #webdev #tutorial #programming

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

Top comments (22)

İ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.

JoelBonetR 🥇 • Aug 31 '22

Added! 😁

İbrahim Yaşar • Aug 31 '22

Thanks :)

venkatgadicherla • Aug 25 '22

It's cool mate. Very good

JoelBonetR 🥇 • Aug 25 '22

Thank you! 🤖

venkatgadicherla • Oct 13 '22

Can u add Telugu a Indian language:)

JoelBonetR 🥇 • Oct 13 '22

I can try, do you know the IETF/ISO language code for it? 😁

Thomas Hansen • Aug 22 '22

Cool. I once created a speech based speech recognition thing based upon MySQL and SoundEx allowing me to create code by speaking through my headphones. It was based upon creating a hierarchical “menu” where I could say “Create button”. Then the machine would respond with “what button”, etc. The thing of course produced Hyperlambda though. I doubt it can be done without meta programming.

One thing that bothers me is that this was 5 years ago, and speech support has basically stood 100% perfectly still in all browsers since then … 😕

JoelBonetR 🥇 • Aug 22 '22

One thing that bothers me is that this was 5 years ago, and speech support has basically stood 100% perfectly still in all browsers since then … 😕

Not in all of them, (e.g. Opera mini, FireFox mobile), it's a nice to have in browsers, specially targeting accessibility, but screen readers for blind people do the job and, on the other hand, most implementations for any other purpose send data to a backend using streams so they can process the incoming speech plus use the user feedback to train an IA among others and without hurting the performance.

...allowing me to create code by speaking through my headphones... ... I doubt it can be done without meta programming.

I agree on this. The concept "metaprogramming" is extense and covers different ways in which it can work (or be implemented) and from its own definition it is a building block for this kind of applications.