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);
    }
}