For an index to all my stories click this text
Speech synthesises is having your computer speak out words and sentences to you. You can do that with Javascript like I wrote in this story:
https://lucstechblog.blogspot.com/2025/09/javascript-speech-synthesises.html
But even microcontrollers like the ESP32 can (although in a very low quality) speak out words and sentences like you can read in these stories:
- talkie 1
https://lucstechblog.blogspot.com/2022/11/talkie-part-1-esp32-speech-synthesiser.html
- Audio on the Raspberry Pi Pico part 4
http://lucstechblog.blogspot.com/2024/11/pico-audio-part-4-talking-thermometer.html
But next to that there is speech recognition. That's the other way round. You speak into a microphone and your computer recognizes the words and acts on them. The most famous examples are of course Google Home and Alexa.
A few years ago I wrote a story on how to build a speech recognition App for Android:
https://lucstechblog.blogspot.com/2016/01/voice-command.html
This time I am going to show you how it is done in Javascript.
There is a limitation and that is that this is Windows only and it does not work in Firefox. Firefox does not support speech recognition. So you will have to use Google Chrome or Microsoft Edge.
Javascript.
Javascript runs in a browser. So to use it you need to build a minimal web-page.
On this web-page we put a text that tells what this page is about and an empty paragraph into which the spoken and recognized words and sentences are put.
<!DOCTYPE html> <html> <body> <h1 style="color:red;">Luc's speech recognition</h1> <h2>Below comes the text that you speak.</h2> <br> <p id="texthere"></p> </html>
This is the complete web-page. However it does nothing exept setting some text on your screen. To have speech recognition to work we need a Javascript program. and here is that program line by line.
window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
This line selects the speech recognition that is needed for your browser.
const recognition = new window.SpeechRecognition();
We make an instance of the Speech.Recognition and call it recognition
recognition.continuous = true;
This line is important as it sets the speech recognition to continuous.
Continuous means that you do not need a button to click on each time you want a new sentence to get analysed.
recognition.lang = "en-US"
And with this line you can change the language you want to get recognised.
recognition.onresult = (event) => { var textheard = (event.results[event.results.length -1][0].transcript); document.getElementById("texthere").innerHTML = textheard; }
If the speech recognition has heard a sentence an event is raised.
The variable textheard gets the interpreted text from the speech recognition and that variable is put into the paragraph on the screen with the ID texthere.
recognition.start();
And this is the actual command that starts the speech recognition.
And that is all that is to it.
So here is the complete page with the Javascript code.
<!DOCTYPE html> <html> <body> <h1 style="color:red;">Luc's speech recognition</h1> <h2>Below comes the text that you speak.</h2> <br> <p id="texthere"></p> <script> window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition; const recognition = new window.SpeechRecognition(); recognition.continuous = true; recognition.lang = "en-US" recognition.onresult = (event) => { var textheard = (event.results[event.results.length -1][0].transcript); document.getElementById("texthere").innerHTML = textheard; } recognition.start(); </script> </html>
Play with it.
To play with this, copy the above code and paste it into your favorite texteditor. I mostly use notepad for these small programs.
Save the file as recognition.html or any name you like in any folder of your choice. Just make sure it is plain ASCII and the file has the extension HTML.
Open the folder and you will see an HTML file. Left click on that and open it with Google Chrome or microsofts Edge.
The webpage asks now whether it is ok to use your computers microphone.
Then just speak any text to your liking.
And this is how the webpage looks after I said "put lamp number one on"
You can see where this is going.
Language selection.
The above program uses recognition.lang = "en-US" yo set the speech.recognition to recognise the English language. So here is a list of the other languages that are available.
Javascript uses the BCP 47 Language Codes and here is the complete list of languages that are available:
ar-SA Arabic Saudi Arabia
cs-CZ Czech Czech Republic
da-DK Danish Denmark
de-DE German Germany
el-GR Modern Greek Greece
en-AU English Australia
en-GB English United Kingdom
en-IE English Ireland
en-US English United States
en-ZA English South Africa
es-ES Spanish Spain
es-MX Spanish Mexico
fi-FI Finnish Finland
fr-CA French Canada
fr-FR French France
he-IL Hebrew Israel
hi-IN Hindi India
hu-HU Hungarian Hungary
id-ID Indonesian Indonesia
it-IT Italian Italy
ja-JP Japanese Japan
ko-KR Korean Republic of Korea
nl-BE Dutch Belgium
nl-NL Dutch Netherlands
no-NO Norwegian Norway
pl-PL Polish Poland
pt-BR Portuguese Brazil
pt-PT Portuguese Portugal
ro-RO Romanian Romania
ru-RU Russian Russian Federation
sk-SK Slovak Slovakia
sv-SE Swedish Sweden
th-TH Thai Thailand
tr-TR Turkish Turkey
zh-CN Chinese China
zh-HK Chinese Hong Kong
zh-TW Chinese Taiwan
So just change recognition.lang = "en-US" into recognition.lang = "nl-NL" to change from English to Dutch for example.
Some considerations.
First:
The speech recognition is continuous. However when there is a silence for more then 10 seconds the speech recognition is turned off and you will have to restart it manually.
Second:
Do not use this if you hate Google. Actually every sentence you speak is send over the internet to Google's speech recognition server in the cloud. So if you thought you could use this to get rid of your Google Home or Nest you are wrong. This is still using Google's services.
What's next
The next step is to combine the speech synthezises and the ESP webserver with the speech recognition. Then we will be able to have the ESP8266 react on commands like "put the lamp on" and "tell me the room temperature" !!!
Till then.
Have fun
Luc Volders
