更改 SpeechSynthesis 语音不起作用

Question

我已经尝试了在 Whosebug 上可以找到的所有变体，但我仍然无法在 SpeechSynthesis 上改变声音

下面是独立代码，它用所有可用的语音填充下拉列表，并允许我select我想要的语音。

不幸的是，这段代码并没有改变声音。另外，在改变声音之前。 msg.voice 为空，即使它已用于列出所有可用语音。

谁能告诉我代码有什么问题？ (console.log(msg.voice); 在设置之前给出一个空值)

<!doctype html>
<html>
<head>
<SCRIPT>
var msg = new SpeechSynthesisUtterance();
voices = window.speechSynthesis.getVoices();
var numberOfVoices=0;


function Main(){
voiceSelect=document.getElementById("voiceSelect");
setTimeout(getVoicesFunction,2000);
}

function getVoicesFunction(){
msg = new SpeechSynthesisUtterance("hello");
numberOfVoices=0;   
speechSynthesis.getVoices().forEach(function(voice) {
var option = document.createElement('option');
        option.text = option.value = voice.voiceURI;
        voiceSelect.add(option, 0);
        numberOfVoices=numberOfVoices+1;
});
    voiceSelect.onchange = voiceChange;
}

function voiceChange(){
    textToSpeech("this is the old voice");
    var selectedOption = this[this.selectedIndex];
    selectedVoice = selectedOption.text;
    msg = new SpeechSynthesisUtterance();
    voices = window.speechSynthesis.getVoices();
    msg = new SpeechSynthesisUtterance();
    console.log("before change msg.voice");
    console.log(msg.voice);
    for(i = 0; i < numberOfVoices ; i++) {
    if(voices[i].voiceURI === selectedVoice) {
    var temp="changing the voice number to "+i;
    setTimeout(textToSpeech,2000,temp);
    msg.voice = voices[i];
    console.log(msg.voice);
    var tempVoiceNumber=i;
    };
    }
    setTimeout(textToSpeech,4000,"this is the new voice");
}

function textToSpeech(tspeech){
    msg = new SpeechSynthesisUtterance();
    msg.text = tspeech;
    speechSynthesis.speak(msg);
    console.log("speech "+tspeech);
}       
</SCRIPT>
</head>
<body onload= "Main()" id= "mainb">
<div id="container">
<select name="Combobox1" size="1" id="voiceSelect">
</select>
</div>
</body>
</html>

Answer 1

IanR，我复制了代码，它对我有用。我删除了音高和速率控制并使 html 更简单，但基本上是一样的。

如果它对您不起作用，您是否收到任何控制台错误？

var synth = window.speechSynthesis;

var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('.txt');
var voiceSelect = document.querySelector('select');

/*var pitch = document.querySelector('#pitch');
var pitchValue = document.querySelector('.pitch-value');
var rate = document.querySelector('#rate');
var rateValue = document.querySelector('.rate-value');*/



var voices = [];

function populateVoiceList() {
  voices = synth.getVoices();

  for (i = 0; i < voices.length; i++) {
    var option = document.createElement('option');
    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';

    if (voices[i].default) {
      option.textContent += ' -- DEFAULT';
    }

    option.setAttribute('data-lang', voices[i].lang);
    option.setAttribute('data-name', voices[i].name);
    voiceSelect.appendChild(option);
  }
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

inputForm.onsubmit = function(event) {
  event.preventDefault();

  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
  for (i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  //utterThis.pitch = pitch.value;
  //utterThis.rate = rate.value;
  synth.speak(utterThis);

  inputTxt.blur();
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>61016951</title>
  <script src="61016951.js" defer></script>
</head>

<body>
  <div id="div">
    <form>
      <input type="text" class="txt">
      <select></select>
      <button type="submit">Play</button>
    </form>
  </div>
</body>

</html>

Answer 2

去除代码中的所有额外位，下面是您需要如何处理 speechSynthesis.getVoices();

上的异步加载

if (voiceLoaded()) {
  speak();
} else {
  speechSynthesis.addEventListener('voiceschanged', speak);
}

function speak() {
  const utterance = new SpeechSynthesisUtterance('text');
  utterance.voice = getFemaleVoice();
  speechSynthesis.speak(utterance);
}

function getFemaleVoice() {
  const voiceIndex = 4;
  return speechSynthesis.getVoices()[voiceIndex];
}

function voiceLoaded() {
  return speechSynthesis.getVoices().length;
}

如果语音数组已经加载，那么它将说出话语，否则此代码将在 voiceschanged 事件上添加事件侦听器，一旦浏览器加载语音数组然后您的回调发言运行.

更改 SpeechSynthesis 语音不起作用

Changing the SpeechSynthesis voice not working

javascript

text-to-speech

speech-synthesis