DEV Community

Text To Speech In 3 Lines Of JavaScript

Asaolu Elijah 🧙‍♂️ on May 19, 2020

If you're curious about trying this out, that's the 3 lines of code below 👇 var msg = new SpeechSynthesisUtterance(); msg.text = "Hello World"; ...
Collapse
 
josiasaurel profile image
Josias Aurel

Unfortunately it didn't work for me

Collapse
 
asaoluelijah profile image
Asaolu Elijah 🧙‍♂️

Hi Josias,

Please note that the speechSynthesis API is not yet supported on all browsers.
The code below help you check for browser support:

if ('speechSynthesis' in window) {
 alert("Broswer supports speech synthesis 🎉");
}else{
  alert("Sorry, your browser doesn't support the speech synthesis API !");
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
josiasaurel profile image
Josias Aurel

I use Chrome and it's says my browser supports it

Thread Thread
 
lazaruswist profile image
lazarusWist • Edited

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.

Collapse
 
richardengle profile image
Richardengle

codepen.io/richardengle/pen/KKNzKXg is my version of this, combined with some hacks. try it :]

Collapse
 
tr11 profile image
Tiago Rangel

Link down! No archive available

Collapse
 
jcubic profile image
Jakub T. Jankiewicz

This is old but see my comment. You need to wait for voices to load.

Collapse
 
phyrosalpha profile image
Felipe Matheus Ribeiro

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.

Collapse
 
vukky profile image
Vukky

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.

Collapse
 
borisschapira profile image
Boris Schapira

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

Collapse
 
asaoluelijah profile image
Asaolu Elijah 🧙‍♂️

Wow, I'd never noticed that.
Thanks for the great insight Boris.

Collapse
 
simplifycomplexity profile image
Kiran Randhawa

I can do it one in one line of code:

window.speechSynthesis.speak(new SpeechSynthesisUtterance("Hello World"));
🙊

Collapse
 
jcubic profile image
Jakub T. Jankiewicz • Edited

NOTE: getVoices doesn't work on page load in Chrome. See StackOverflow: Getting the list of voices in speechSynthesis (Web Speech API)

Collapse
 
stardrop9 profile image
Kurt Starck

Thanks you make this so simple.

Collapse
 
ronaldohoch profile image
Ronaldo Hoch

Nice 👏

Collapse
 
kristijanlazarev profile image
Kristijan Lazarev

I didn't know it is built in. Awesome

Collapse
 
karenefereyan profile image
Efereyan Karen Simisola

Amazing

Collapse
 
alexalannunes profile image
Alex Alan Nunes

Toppppp.
How I'd export audio?

Collapse
 
maadah profile image
maadah

Great, how can download the voice

Collapse
 
mktcode profile image
mkt

Mind blown. Thanks! That's what Stephen Hawking used, right? :D

Collapse
 
asaoluelijah profile image
Asaolu Elijah 🧙‍♂️

Might be! :D

Collapse
 
mattmundell profile image
Matt Mundell

Nice. Any idea how to make it sound more human?

Collapse
 
wperablog profile image
WPEra

nothing to work!

Collapse
 
richardengle profile image
Richardengle
Collapse
 
palrintu50 profile image
palrintu50 • Edited

can u help me to add speechsynthesis in tensorflowjs for react webapp or react native app

Collapse
 
abduallahnoorsayket profile image
abdullahnoorsayket • Edited
Collapse
 
sachin123np profile image
sachin123np • Edited

How to read the web page content? suppose in html page we have

hii gud morning

how do we take reference for the p tag in order to speak the content inside the p tag?
Collapse
 
nayyhah profile image
Neha Jha • Edited

You can add an id in p tag
say, id="content" is added in p tag

now access the content inside the p tag using this id and replace in above code like this:
msg.text = document.getElementById("content").textContent;

Collapse
 
tanishdahiya profile image
TanishDahiya

Can you please send me the whole code so that I easily understand

Collapse
 
asaoluelijah profile image
Asaolu Elijah 🧙‍♂️
var msg = new SpeechSynthesisUtterance();
msg.text = "My browser will say this sentence.";
window.speechSynthesis.speak(msg);
Collapse
 
isagive profile image
Imri Sagive

Wow, what a find - thank you very much