以下 HTML 在第一次单击时在控制台中显示空数组：
<!DOCTYPE html>
<html>
<head>
<script>
function test(){
console.log(window.speechSynthesis.getVoices())
}
</script>
</head>
<body>
<a href="#" onclick="test()">Test</a>
</body>
</html>
在第二次单击中，您将获得预期的列表。
如果你添加onload事件来调用这个函数（<body onload="test()">），那么你可以在第一次点击时得到正确的结果。请注意，第一次调用onload仍然无法正常工作。它在页面加载时返回空，但之后工作。
问题：
由于它可能是测试版中的一个错误，我放弃了“为什么”的问题。
现在，问题是您是否想window.speechSynthesis在页面加载时访问：
- 解决这个问题的最佳方法是什么？
- 您如何确保它会
speechSynthesis在页面加载时加载？
背景和测试：
我正在测试 Web Speech API 中的新功能，然后在我的代码中遇到了这个问题：
<script type="text/javascript">
$(document).ready(function(){
// Browser support messages. (You might need Chrome 33.0 Beta)
if (!('speechSynthesis' in window)) {
alert("You don't have speechSynthesis");
}
var voices = window.speechSynthesis.getVoices();
console.log(voices) // []
$("#test").on('click', function(){
var voices = window.speechSynthesis.getVoices();
console.log(voices); // [SpeechSynthesisVoice, ...]
});
});
</script>
<a id="test" href="#">click here if 'ready()' didn't work</a>
我的问题是：为什么在加载页面并触发函数window.speechSynthesis.getVoices()后返回空数组？onready如您所见，如果您单击链接，相同的函数会通过触发器返回一组可用的 Chromeonclick语音？
页面加载后似乎 Chrome 加载window.speechSynthesis了！
问题不在ready事件中。如果我var voice=...从ready函数中删除该行，首先单击它会在控制台中显示空列表。但第二次点击工作正常。
第一次通话后似乎window.speechSynthesis需要更多时间来加载。你需要调用它两次！而且，您需要等待并让它在第二次调用之前加载window.speechSynthesis。例如，如果您第一次运行以下代码，控制台中会显示两个空数组：
// First speechSynthesis call
var voices = window.speechSynthesis.getVoices();
console.log(voices);
// Second speechSynthesis call
voices = window.speechSynthesis.getVoices();
console.log(voices);
