Why is my Speech Synthesis API voice changing when function run more than 1 time?

Question

I have been using the new Speech Synthesis API in Chrome (33 and above) to make a web based communication aid. I would like the user to be able to change the voice between male and female, which the API allows me to do. However, when the page is first loaded and the first time the function is run (from an onclick event) it uses the default female voice. Then any time it is run after that, it uses the male voice that I am trying to use to. How can I make the male voice run the first time as well?

Here is the button which calls the javascript:

<button type="button" name="speakMe"id="speakMe" onclick="speakPhrase($('phraseBar').getValue());" ><img src="images/speakMe.png" /></button>

And here is the speakPhrase function which is being called:

function speakPhrase(phrase) {
    if(phrase =="")
    {
        alert("Please enter a phrase before asking me to speak for you. Thank you!");
    }
    else
    {
        var speech = new SpeechSynthesisUtterance(phrase);
        var voices = window.speechSynthesis.getVoices();
        speech.voice = voices.filter(function(voice) { return voice.name == 'Google UK English Male'; })[0];
        window.speechSynthesis.speak(speech);

    }
}

Can anyone help?

Answer 1

By a bit of good fortune I managed to solve the issue by setting the default attribute to false before setting the voice

function speakPhrase(phrase) {
    if(phrase =="")
    {
        alert("Please enter a phrase before asking me to speak for you. Thank you!");
    }
    else
    {
        var speech = new SpeechSynthesisUtterance(phrase);
        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'; //Also added as for some reason android devices used for testing loaded spanish language 
        window.speechSynthesis.speak(speech);
    }
}

Answer 2

It seems that the voices array is empty on the first call. From what I read it has something to do with an asynchronous call to load the voices. So, it's always empty the first time it's called. For me this did the magic:

var speech_voices;
if ('speechSynthesis' in window) {
  speech_voices = window.speechSynthesis.getVoices();
  window.speechSynthesis.onvoiceschanged = function() {
    speech_voices = window.speechSynthesis.getVoices();
  };
}

Call from somewhere outside your speech function.

Answer 3

I solved issue.

Root Cause: When you call API for the first time voices don't load for some reason. And default voice loads for the first time.

SO I added below line of code at page load or start or ready state which is even before my code gets call:

voices = window.speechSynthesis.getVoices();

That solved my issue, hope that helps others.

Answer 4

Updated answer. This is works for me.

$(window).load(function(){ voices = window.speechSynthesis.getVoices(); })