If you're curious about trying this out, that's the 3 lines of code below 👇
var msg = new SpeechSynthesisUtterance();
msg.text = "Hello World";
window.speechSynthesis.speak(msg);
But if you're not in a hurry, this article explains everything you need to know about converting text to speech (spoken words) on the web with JavaScript.
Introduction
In a previous article, we'd explored the Web Speech API and also how to convert Speech To Text
Another amazing feature of the Web Speech API is to convert Text to Speech.
Note: Text To Speech != Speech To Text 🧐
- Text To Speech is when we give the computer some words and the computer will say this words out loud in some robotic/human voice. While
- Speech To Text is when we say some words to the computer, and what we'd just said will be converted to text (I guess this is explanatory enough)
Getting Started
The first thing we'll need to do is check if our browser supports the speech synthesis API. And the code below does that:
if ('speechSynthesis' in window) {
// Speech Synthesis supported 🎉
}else{
// Speech Synthesis Not Supported 😣
alert("Sorry, your browser doesn't support text to speech!");
}
Next step is to create a new speechSynthesis object, add required property and make our app talk 👇
var msg = new SpeechSynthesisUtterance();
msg.text = "Good Morning";
window.speechSynthesis.speak(msg);
Code Explanation
- Line 1: We created a variable
msg
, and the value assigned to it is a new instance of thespeechSynthesis
class. - Line 2: The
.text
property is used to specify the text we want to convert to speech - And finally, the code on the 3rd(last) line is what actually make our browser talks.
Altering Default Output
The speechSynthesis API gives room to also change alter the default output like changing the voice, volume, speech rate, language, pitch and more:
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10];
msg.volume = 1; // From 0 to 1
msg.rate = 1; // From 0.1 to 10
msg.pitch = 2; // From 0 to 2
msg.text = "Como estas Joel";
msg.lang = 'es';
speechSynthesis.speak(msg);
Getting Supported Voices
The code below helps you retrieve the list of all supported voices:
speechSynthesis.getVoices().forEach(function(voice) {
console.log(voice.name, voice.default ? voice.default :'');
});
Conclusion
Well, there's nothing to conclude here I guess 🙃
But you could follow me on Twitter, I tweet and retweet interesting technical stuffs; you sure want to see em.
Thanks for reading 👏
Top comments (31)
Unfortunately it didn't work for me
Hi Josias,
Please note that the speechSynthesis API is not yet supported on all browsers.
The code below help you check for browser support:
I use Chrome and it's says my browser supports it
Check out MDN's speak easy synthesis demo which works on Chrome. There's two things you need to do to set it up properly:
1) As is the case with the Web Audio API generally, Chromium Browsers will not allow audio to be played without the user interacting with the page first. You need to put the speech synthesis code behind an event listener for some page event like a button click.
2) It seems that Chrome, unlike FireFox, does not have access to system voices when
speechSynthesis
is initialised for the first time. You need to add an event listener which refers to a function when the voices are found, something like -speechSynthesis.onvoiceschanged = getVoices
. The technology is still experimental so I expect this will change in the future.codepen.io/richardengle/pen/KKNzKXg is my version of this, combined with some hacks. try it :]
Link down! No archive available
This is old but see my comment. You need to wait for voices to load.
I am not getting make the code to work.
I am using firefox in linux OS
The browser can detect the SpeechSynthesisUtterance() but there is no voice or
any sound. I noticed that window.speechSynthesis.getVoices() don't return any voice.
You will need to have a text-to-speech dispatcher installed first, otherwise there's no TTS to use. See wiki.archlinux.org/title/List_of_a... for reference.
Beware, the default voice locale is not the locale of the browser but the locale of the system. Be sure to always define the
msg.lang
(and the OS will switch to the right voice by itself).Wow, I'd never noticed that.
Thanks for the great insight Boris.
I can do it one in one line of code:
window.speechSynthesis.speak(new SpeechSynthesisUtterance("Hello World"));
🙊
NOTE:
getVoices
doesn't work on page load in Chrome. See StackOverflow: Getting the list of voices in speechSynthesis (Web Speech API)Thanks you make this so simple.
Nice 👏
I didn't know it is built in. Awesome
Amazing
Toppppp.
How I'd export audio?