Play Voices - HTML5 Speech Synthesis API Demo

Plays the English language voices loaded on your computer.

HTML

<p>Click to listen to all the voices</p>


<button onclick="loadVoices()">Reload voices</button>
<br>
<button onclick="playVoices()">Play all voices</button>

<p id="info"></p>

JavaScript

var voices = window.speechSynthesis.getVoices();
var idx = 0;
var stop = false;

function loadVoices() {
	voices = window.speechSynthesis.getVoices();
  setTimeout(function(){
    if ((voices.length === 0) ) {
      document.getElementById("info").innerHTML = "No voices.";

    } else {
      document.getElementById("info").innerHTML = voices.length + " voices found.";
    }
  }, 100);
}

function stopVoices() {
	stop = true;
}

function playVoices() {
  idx = 0;
  playVoice();
}

function playVoice() {
	stop = false;
  var say = 'Hi! My name is ' + voices[idx].name;
  document.getElementById("info").innerHTML = '[' + idx + ']' + say;
  var msg = new window.SpeechSynthesisUtterance(say);
  msg.voice = voices[idx];
  window.speechSynthesis.speak(msg);
  var notFound = true;
  idx++;
  while ((notFound) && (idx < voices.length) && (!stop)) {
    if (voices[idx].lang === 'es-ES') {
      setTimeout(function() {
        playVoice();
      }, 2000);
      notFound = false;
    } else {
      idx++;
    }
  }
}