Question

我无法使用 getvoices() 框架中的 speechsynthesis 函数。我的基本想法是能够点击文档并能够阅读西班牙语元素的文本。因此，我尝试使用 promise 和 await 范式在基于可用语音列表加载文档时设置语音变量。我错过了什么？谢谢！

var synth = window.speechSynthesis;
function getVoices() {
    return new Promise(resolve => {
        let voices = speechSynthesis.getVoices()
            resolve(voices)
    })
}
async function getVoz() {
    const Voces = await getVoices();
    for(voz of Voces){
        if (voz.lang=="es-ES"){
            return voz
        }
    }
}
var voice = getVoz()

function sayit(){
  var div = document.getElementById('main')
  var what=div.innerHTML
  var hi = new SpeechSynthesisUtterance(what);
  hi.pitch = 1;
  hi.rate = 1;
  hi = voice;
  synth.speak(hi);
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>

<body>
  <div id="main" onclick="sayit()"> Hola Mundo </div>
</body>
</html>

Answer 1

我看到至少 3 个错误：

speechSynthesis.getVoices() 是一种同步方法，因此包装在 Promise 中没有任何作用。这没有害处，只是毫无意义。
var voice = getVoz() - 在此之后，voice 现在是承诺，而不是结果。但是，您不能在此处添加 await，因为您不在异步函数中。您需要使用 .then() 和回调。
hi = voice; - 这会用 Promise 覆盖整个 hi 变量。可能不是预期的。

我会这样写：


function sayit(){
  var hi = new SpeechSynthesisUtterance(document.getElementById('main').innerHTML);
  hi.pitch = 1;
  hi.rate = 1;
  hi.voice = window.speechSynthesis.getVoices().find(voz => voz.lang == "es-ES");
  window.speechSynthesis.speak(hi);
}

Answer 2

阅读更多内容后，我发现了一些可以解决我的问题的方法：

语音列表异步加载到页面。需要一个 onvoiceschanged 事件。
此代码有效 gr c v dateLower dateHigher 0 a d1 30 d2 NaN 1 a d2 10 d4 d3 2 a d3 20 d4 NaN 3 a d4 5 NaN NaN 4 b d5 35 d6 NaN 5 b d6 5 NaN NaN 而前一个无效 (await getVoices())

以下代码有效

const Voces = await getVoices()

异步等待承诺不起作用：promiseresult 未定义

2 个答案: