问题描述
<！DOCTYPE html>下面的HTML在控制台上显示空数组：
< html>
< head>
< script>
function test（）{
console.log（window.speechSynthesis.getVoices（））
}
< / script>
< / head>
< body>
< a href =＃onclick =test（）>测试< / a>
< / body>
< / html>
在第二次点击时，您将得到预期的列表。
如果添加 onload 事件来调用此函数（< body onload =test（）> ），那么你可以在第一次点击时得到正确的结果。请注意， onload 上的第一个调用仍然无法正常工作。它在页面加载时返回空，但在以后工作。
问题： 它可能是，我放弃了为什么的问题。
现在，问题是您是否想要在页面加载时访问 window.speechSynthesis ：
- 这个问题的最佳解决方法是什么？
- 如何确定它会加载语音合成，在页面加载？
背景和测试： 我正在测试Web Speech API中的新功能，然后我在代码中遇到了这个问题： 我的问题是：为什么 window.speechSynthesis.getVoices（） code>返回空数组，页面加载后， onready 函数被触发？正如你可以看到，如果你点击链接，相同的函数通过 onclick triger返回Chrome的可用声音数组？ 看来Chrome在加载页面后加载 window.speechSynthesis ！ 问题不在准备好事件。如果我从 ready 函数中删除了 var voice = ... 这一行，首先点击它显示控制台中的空列表。但第二次点击工作正常。 看起来 window.speechSynthesis 在第一次调用后需要更多时间加载。你需要调用它两次！但是，您还需要等待并在第二次调用 window.speechSynthesis 之前加载它。例如，如果您第一次运行它，以下代码将在控制台中显示两个空数组： 据（E11 2013-10-17），语音列表异步加载到页。 诀窍是从该事件监听器的回调中设置声音： Following HTML shows empty array in console on first click: In second click you will get the expected list. If you add onload event to call this function (<body onload="test()">), then you can get correct result on first click. Note that the first call on onload still doesn't work properly. It returns empty on page load but works afterward. Questions: Since it might be a bug in beta version, I gave up on "Why" questions. Now, the question is if you want to access window.speechSynthesis on page load: Background and tests: I was testing the new features in Web Speech API, then I got to this problem in my code: My question was: why does window.speechSynthesis.getVoices() return empty array, after page is loaded and onready function is triggered? As you can see if you click on the link, same function returns an array of available voices of Chrome by onclick triger? It seems Chrome loads window.speechSynthesis after the page load! The problem is not in ready event. If I remove the line var voice=... from ready function, for first click it shows empty list in console. But the second click works fine. It seems window.speechSynthesis needs more time to load after first call. You need to call it twice! But also, you need to wait and let it load before second call on window.speechSynthesis. For example, following code shows two empty arrays in console if you run it for first time: According to Web Speech API Errata (E11 2013-10-17), the voice list is loaded async to the page. An onvoiceschanged event is fired when they are loaded. So, the trick is to set your voice from the callback for that event listener: 这篇关于获取语音列表中的语音合成Chrome（Web Speech API）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
< script type =文本/ JavaScript的>
$（document）.ready（function（）{
//浏览器支持消息（您可能需要Chrome 33.0 Beta）
if（！（'windowSynthesis'in window））{
alert（您没有speechSynthesis）;
}
var voices = window.speechSynthesis.getVoices（）;
console.log（voices）/ /']
$ b $（＃test）。on（'click'，function（）{
var voices = window.speechSynthesis.getVoices（）;
console。 log（voices）; // [SpeechSynthesisVoice，...]
}）;
}）;
< / script>
< a id =testhref =＃>如果'ready（）'无效< / a>
// First speechSynthesis call
var voices = window.speechSynthesis.getVoices（）;
console.log（voices）;
// Second speechSynthesis call
voices = window.speechSynthesis.getVoices（）;
console.log（voices）;
//在获取列表之前等待语音加载
window.speechSynthesis.onvoiceschanged = function（）{
window.speechSynthesis.getVoices（）;
...
};
<!DOCTYPE html>
<html>
<head>
<script>
function test(){
console.log(window.speechSynthesis.getVoices())
}
</script>
</head>
<body>
<a href="#" onclick="test()">Test</a>
</body>
</html>
<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>
// First speechSynthesis call
var voices = window.speechSynthesis.getVoices();
console.log(voices);
// Second speechSynthesis call
voices = window.speechSynthesis.getVoices();
console.log(voices);
// wait on voices to be loaded before fetching list
window.speechSynthesis.onvoiceschanged = function() {
window.speechSynthesis.getVoices();
...
};