on a button click I want to say blue sky in en-US language
this code results in error on utterThis.voice line
pls help

var synth = window.speechSynthesis;

$('button').on('click', function(){
    var utterThis = new SpeechSynthesisUtterance('blue sky');
        utterThis.rate = 1;
        utterThis.pitch = 1;
        utterThis.voice = {voiceURI: 'Google US English', name: 'Google US English', lang: 'en-US', localService: false, default: false};
    synth.speak(utterThis);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You need to use one of the voices returned by .getVoices - assigning a plain object to .voice won't work.

$('button').on('click', function() {
  var utterThis = new SpeechSynthesisUtterance('blue sky');
  utterThis.rate = 1;
  utterThis.pitch = 1;

  for (const v of speechSynthesis.getVoices()) {
    if (v.voiceURI === 'Google US English') {
      utterThis.voice = v;
    }
  }
  speechSynthesis.speak(utterThis);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

The voices returned by .getVoices are verified by the browser / operating system to be supported, and are clearly tied to an underlying service that translates the text into speech - a plain object, on the other hand, does not, which is why a plain object doesn't work.