Preloading Web Speech API before calling speak

Question

So I've noticed that after you do the first speak using speechSynthesis.speak, it speeds up dramatically in providing results. So my aim below was to speed it up by pre-initializing the synthesis so when we call speakIt() we don't have to wait for it. It hasn't sped up at all; any suggestions on why it's not speeding up and how I fix it?

Full Script:

var speech = new SpeechSynthesisUtterance("test");
var voices = window.speechSynthesis.getVoices();
speech.default = false;
speech.voice = voices.filter(function(voice) { return voice.name == 'Google  UK English Male'; })[0];
speech.lang = 'en-GB';

function speakIt(word){
        speech.text = word;
        window.speechSynthesis.speak(speech);
}

chrome.tts.speak seems to be a bit quicker but certainly isn't there, but that's not the point — this should still work. Until someone finds the answer I will migrate to Chrome's usage.

Answer 1

You need to do some setup before performing speech. I wish more examples included this. Specifically you should call getVoices() and add an event handler to populate voices ahead of time when the page loads. I've written a class that does this for you. See the Codepen example.

var speech = new Speech();

if (speech.supported()) {
  speech.speak('hello, speech is working fine');
}

Codepen Example: http://codepen.io/anon/pen/qNwOAO