Cover image credits: dribbble

Some time ago,speech recognition API was added to thespecs and we gotpartial 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 sohere'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 */constrecognitionSvc=window.SpeechRecognition||window.webkitSpeechRecognition;// Instantiate itconstrecognition=newrecognitionSvc();/* 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 recognitionrecognition.start();// Event triggered when it gets a matchrecognition.onresult=(event)=>{// iterate through speech recognition resultsfor(constresultofevent.results){// Print the transcription to the consoleconsole.log(`${result[0].transcript}`);}}// Stop the speech recognitionrecognition.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 toadd 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