获取语音合成中的语音列表（Web Speech API） [英] Getting the list of voices in speechSynthesis (Web Speech API)
问题描述
以下HTML显示的是第一次单击时控制台中的空数组：
Following HTML shows empty array in console on first click:
<!DOCTYPE html>
<html>
<head>
<script>
function test(){
console.log(window.speechSynthesis.getVoices())
}
</script>
</head>
<body>
<a href="#" onclick="test()">Test</a>
</body>
</html>
第二次单击将获得预期的列表。
In second click you will get the expected list.
如果添加 onload 事件以调用此函数（< body onload = test（）> ），那么您可以在第一次点击时获得正确的结果。请注意，第一次调用 onload 仍无法正常工作。
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.
问题：
Beta版中可能是一个错误，我放弃了为什么的问题。
Since it might be a bug in beta version, I gave up on "Why" questions.
现在，问题是是否要在页面加载时访问 window.speechSynthesis ：
Now, the question is if you want to access window.speechSynthesis on page load:
- 此问题的最佳破解是什么？
- 如何确定将加载
语音合成，页面加载了吗？
- What is the best hack for this issue?
- How can you make sure it will load
speechSynthesis, on page load?
背景和测试：
I正在测试Web Speech API的新功能，然后我在代码中遇到了这个问题：
I was testing the new features in Web Speech API, then I got to this problem in my code:
<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 函数吗？如您所见，如果您单击链接，同一功能将通过 onclick 触发器返回Chrome的可用语音数组？
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?
Chrome似乎在页面加载后加载了 window.speechSynthesis ！
It seems Chrome loads window.speechSynthesis after the page load!
问题不在就绪事件。如果我从 ready 函数中删除行 var voice = ... ，则首先单击它会在控制台中显示空列表。
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.
似乎 window.speechSynthesis 第一次调用后需要更多时间来加载。您需要调用两次！但是，您还需要等待并加载它，然后才能再次调用 window.speechSynthesis 。例如，下面的代码在您第一次运行时会在控制台中显示两个空数组：
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:
// First speechSynthesis call
var voices = window.speechSynthesis.getVoices();
console.log(voices);
// Second speechSynthesis call
voices = window.speechSynthesis.getVoices();
console.log(voices);
推荐答案
根据Web语音API勘误（E11 2013-10-17），语音列表会异步加载到页。 onvoiceschanged 事件在加载时触发。
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.
voiceschanged： getVoices方法将返回的SpeechSynthesisVoiceList的内容已更改。例如：服务器端综合，其中列表是异步确定的，或者安装/卸载了客户端语音时。
voiceschanged: Fired when the contents of the SpeechSynthesisVoiceList, that the getVoices method will return, have changed. Examples include: server-side synthesis where the list is determined asynchronously, or when client-side voices are installed/uninstalled.
技巧是从该事件侦听器的回调中设置您的声音：
So, the trick is to set your voice from the callback for that event listener:
// wait on voices to be loaded before fetching list
window.speechSynthesis.onvoiceschanged = function() {
window.speechSynthesis.getVoices();
...
};
这篇关于获取语音合成中的语音列表（Web Speech API）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
