For an index to all my stories click this text.
I like Javascript. I really do. The language is easy to learn, versatile and extensive. You just make a simple (or complicated) webpage, put some Javascript code in it and it runs on your PC, Raspberry, phone or tablet. Interfacing with the ESP8266, ESP32, your home automation system or a myriad of other devices and services is generally not difficult to achieve.
And there is speech synthesises.......
Have your computer speak to you.
The Javascript commands for having your computer/phone/tablet speak to you are really easy.
var msg = new SpeechSynthesisUtterance();
This starts a new Speechsynthesis instance and we call it msg.
msg.text = "this is my text"
Obviously the text that the message will speak = "this is my text"
speechSynthesis.speak(msg);
And this speaks out the message.
That is really all there is to it.
Now let us look to the next html code with a Javascript example.
<!DOCTYPE html> <html lang="en-US"> <body> <h2>Javascript Speech</h2> <script> var msg = new SpeechSynthesisUtterance(); msg.text = 'I have put the lamp on'; speechSynthesis.speak(msg); </script> </body> </html>
Copy this code in your favorite text editor (I use notepad) and save it as speech01.html Make sure not to save it as a txt file. So use "Save as" for that. Save the file in a directory of your choice.
As you can see the file was saved as speech01 and seen as a Firefox HTML document. If your default browser is Chrome you should see the file as a Chrome HTML file.
Double-click the file and your browser will open and the words 'I have put the lamp on' will be spoken. Naturally you will have to make sure that your speakers are on and the volume is up. The text shows where this is going.......
Neat huh ???
For the next step I urge you to change your default browser to Chrome or Edge as these browsers have more posibillities for speech synthesises as Firefox has. You can always left-click on the html file and choose open with Chrome or Edge provided these are installed on your computer. You might try with other browsers (I haven't) to see if that works.
Changing the language and voice
Now we know how simple it is to have the computer speak to us we might want to change some parameters. Again: this works in Chrome and Edge but not in Firefox.
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[0];
msg.volume = 1; // From 0 to 1
msg.rate = 1; // From 0.1 to 1
msg.pitch = 1; // From 0 to 2
msg.lang = "en";
These are the parameters you can change.
msg.voice = voices[0];
You can most of the time choose between 0 and 1. This will change the voice sometimes from female to male or between different male/female voices. Choose what sounds best to you.
msg.volume = 1;
Set this to 0 and speechsynthesises is set off. Set this to any value between 0 and 1 (like 0.2) and you can have the voice whisper without having to change the volume settings on your computer.
msg.rate = 1;
This will set the speech rate. from 0.1 which is veeerrrrrryyyyyy ssssssslllllloooooowwwwwww to 1 which is the normal speech rate.
msg.pitch = 1;
This will set the pitch of the voice. 0 is very low and 2 is high. 1 Is the standard value.
msg.lang = "en";
And finally this allows us to choose the language in which the text will be spoken.
msg.text = 'I have put the lamp on';
This one we have seen behore in the first (small) program. And this is where to put the text that has to be spoken. So if you change msg.lang into another language you need to alter the text in msg.text in the text for that language.
If you want to change the text in Dutch (hey that's my native language) you would need to set the following parameters:
msg.lang = 'nl'
msg.text = 'Ik heb de lamp aangezet'
Another example
Here is another example that would speak out a fake temperature setting. In this example all parameters are available so you can change them to your liking.
<!DOCTYPE html> <html lang="en-US"> <body> <h2>Javascript Speech</h2> <script> var msg = new SpeechSynthesisUtterance(); var voices = window.speechSynthesis.getVoices(); msg.voice = voices[1]; msg.volume = 1; // From 0 to 1 msg.rate = 1; // From 0.1 to 1 msg.pitch = 1; // From 0 to 2 msg.lang = "en"; msg.text = 'The temperature is' + 18 + 'degrees'; speechSynthesis.speak(msg); </script> </body> </html>
Just copy this into your editor and save it as speech02.html Go to the directory where you saved it and double-click on it and the webpage will open and speak the text. Alter some settings in the editor, save it again and reload the page.
What languages 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 if you are Belgian or Dutch and like the soft touch of the Belgian voices set:
msg.lang = "nl-BE";
msg.text = 'Ik heb de lamp aangezet';
Fun to play with.
Remember the Javascript pages made to control an ESP8266 and get information from that ESP ??? Next time we are going to incorporate the speech synthesises into that page so you will have an audible feedback on the commands you have send to the ESP and sensor readings from that ESP.
For now you have something funny and usefull to play with.
Till next time
have fun
Luc Volders
