Welcome to a tutorial and examples on how to work with text to speech in Javascript. Yes, the Stone Age of the Internet is long over. Javascript has a native text-to-speech API, and it will work so long as the browser and operating system support it.
The easiest way to do text-to-speech in Javascript is to use the speechSynthesis
API:
var msg = new SpeechSynthesisUtterance("MESSAGE");
speechSynthesis.speak(msg);
That covers the quick basics, but read on for more examples!
ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TABLE OF CONTENTS
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
JAVASCRIPT TEXT TO SPEECH
All right, let us now get into more examples of using text-to-speech in Javascript.
1) SIMPLE TEXT TO SPEECH
1A) THE HTML
<button id="demoA" disabled>Text To Speech</button>
Yes, that’s just a single button for this simple demo.
1B) THE JAVASCRIPT
if ("speechSynthesis" in window) {
let demo = document.getElementById("demoA");
demo.onclick = () => {
let msg = new SpeechSynthesisUtterance("fus ro dah!");
speechSynthesis.speak(msg);
};
demo.disabled = false;
}
This is the same as the introduction snippet, except that it does a feature check before enabling the test button – if ("speechSynthesis" in window)
. At the time of writing, speechSynthesis
is not “universally supported” in all browsers and operating systems. So, it’s good to add that few lines of code and do compatibility checks.
1C) THE DEMO
2) CHOOSING A VOICE
2A) THE HTML
<form id="demoB">
<!-- (A) VOICE PICKER -->
<label>Choose A Voice</label>
<select id="demoB-voice" disabled></select>
<!-- (B) SAY SOMETHING -->
<label>Message</label>
<input type="text" id="demoB-msg" disabled required>
<label>Go!</label>
<input type="submit" id="demoB-go" disabled value="Speak">
</form>
In this example, we are expanding a little bit more and allowing users to choose a voice (available voices depend on the browser and operating system).
<select id="demoB-voice">
Voice selector.<input type="text" id="demoB-msg">
Message to speak.
2B) THE JAVASCRIPT
if ("speechSynthesis" in window) {
// (A) GET HTML ELEMENTS
let demo = document.getElementById("demoB"),
vlist = document.getElementById("demoB-voice"),
vmsg = document.getElementById("demoB-msg"),
vgo = document.getElementById("demoB-go");
// (B) POPULATE AVAILABLE VOICES
// CHROME LOADS VOICES ASYNCHRONOUSLY
// THUS THIS "STUPID" WAY TO ATTACH AVAILABLE VOICES
var voices = () => {
speechSynthesis.getVoices().forEach((v, i) => {
let opt = document.createElement("option");
opt.value = i;
opt.innerHTML = v.name;
vlist.appendChild(opt);
});
};
voices();
speechSynthesis.onvoiceschanged = voices;
// (C) SPEAK
var speak = () => {
let msg = new SpeechSynthesisUtterance();
msg.voice = speechSynthesis.getVoices()[vlist.value];
msg.text = vmsg.value;
speechSynthesis.speak(msg);
return false;
};
// (D) ENABLE FORM
demo.onsubmit = speak;
vlist.disabled = false;
vmsg.disabled = false;
vgo.disabled = false;
}
- We start with getting all the HTML form fields.
- The list of supported voices can be obtained with
speechSynthesis.getVoices()
. But as some browsers load the voice asynchronously, we have to listen to thespeechSynthesis.onvoiceschanged
event before populating the list of voices. - Self-explanatory. Does text-to-speech with the selected voice and message.
- Enable the form.
2C) THE DEMO
3) MORE CONTROLS – VOLUME, PITCH, RATE
3A) THE HTML
<form id="demoC">
<!-- (A) VOLUME + PITCH + RATE -->
<label>Volume</label>
<input type="range" id="demoC-vol" min="0" max="1" step="0.1" value="1">
<label>Pitch</label>
<input type="range" id="demoC-pitch" min="0" max="2" step="0.1" value="1">
<label>Rate</label>
<input type="range" id="demoC-rate" min="0.1" max="10" step="0.1" value="1">
<!-- (B) SAY SOMETHING -->
<label>Message</label>
<input type="text" id="demoC-msg" disabled required>
<label>Go!</label>
<input type="submit" id="demoC-go" disabled value="Speak">
</form>
Finally, for you guys who want “even more controls” – We can also tweak the volume, pitch, and rate.
3B) THE JAVASCRIPT
if ("speechSynthesis" in window) {
// (A) GET HTML ELEMENTS
let demo = document.getElementById("demoC"),
vvol = document.getElementById("demoC-vol"),
vpitch = document.getElementById("demoC-pitch"),
vrate = document.getElementById("demoC-rate"),
vmsg = document.getElementById("demoC-msg"),
vgo = document.getElementById("demoC-go");
// (B) SPEAK
var speak = () => {
let msg = new SpeechSynthesisUtterance();
msg.voice = speechSynthesis.getVoices()[0];
msg.text = vmsg.value;
msg.volume = +vvol.value;
msg.pitch = +vpitch.value;
msg.rate = +vrate.value;
speechSynthesis.speak(msg);
return false;
};
// (C) ENABLE FORM
demo.onsubmit = speak;
vmsg.disabled = false;
vgo.disabled = false;
}
- As usual, start by getting all the HTML elements.
- Do text-to-speech. But with the volume, pitch, and rate settings.
- Enable the form.
3C) THE DEMO
EXTRA BITS & LINKS
That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.
COMPATIBILITY CHECKS
- Arrow Functions – CanIUse
Works on all modern “Grade A” browsers.
LINKS & REFERENCES
- Speech Synthesis – MDN
- Web Apps That Talk – Google Developers
- Example on CodePen – JS Text-To-Speech
THE END
Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!