Chrome speech synthesis api not changing options

Question

I am trying to change the an instance of the speech synthesis API's options (such as pitch, volume etc) but its not working. For some reason, the only way I can get it to change the voice from UK male to UK female is to call the var voices variable twice, but this is the only option I can change in this. Here is the code:

//After the document loads (using the prototype library)
document.observe("dom:loaded", function() {
    //When the speakMe button is clicked
    $("speakMe").observe('click', function() {
        //Get the entered phrase
        phrase = $('phraseBar').getValue();
        //If the phrase is blank
        if(phrase =="")
        {
            //Warning message
            alert("Please enter a phrase before asking me to speak for you. Thank you!");
        }
        else
        {
            //Declare the speach object & set attributes
            var speech = new SpeechSynthesisUtterance(phrase);
            var voices = speechSynthesis.getVoices();
            var options = new Object();
            speech.default = false;
            speech.localservice = true;
            speech.voice = voices.filter(function(voice) { return voice.name == userVoice; })[0];    
            speech.lang = userLang;
            speech.rate = userRate;
            speech.pitch = 2;
            speech.volume = userVolume;

            //Speak the phrase
            window.speechSynthesis.speak(speech);

        }
    });
    var voices = speechSynthesis.getVoices();
});

Any ideas?

Answer 1

There is a Chrome known issue with the rate, volume, or pitch options not having an effect for some voices.

Also, the reason why speechSynthesis.getVoices() is working the second time is that it in Chrome it should be called after the onvoiceschanged event (see this answer).