Javascript Text To Speech (Simple Examples)

Welcome to a tutorial on how to work with text to speech in Javascript. Need a “read aloud” feature on your website? Yes, the Stone Age of the Internet is long over.

That covers the quick basics, read on for more examples!

 

 

TABLE OF CONTENTS

 

 

EXAMPLE CODE DOWNLOAD

Source code on GitHub Gist | Example on CodePen

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

 

TUTORIAL VIDEO

 

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

1. <select id="demoB-voice"> Voice selector.
2. <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;
}

1. We start with getting all the HTML form fields.
2. The list of supported voices can be obtained with speechSynthesis.getVoices(). But as some browsers load the voice asynchronously, we have to listen to the speechSynthesis.onvoiceschanged event before populating the list of voices.
3. Self-explanatory. Does text-to-speech with the selected voice and message.
4. 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;
}

1. As usual, start by getting all the HTML elements.
2. Do text-to-speech. But with the volume, pitch, and rate settings.
3. Enable the form.

 

3C) THE DEMO

 

 

 

COMPATIBILITY CHECKS

• Arrow Functions – CanIUse

Works on all modern “Grade A” browsers.

 

LINKS & REFERENCES

• Speech Synthesis – MDN
• Web Apps That Talk – Google Developers