语音合成API块主线程

Question

我正在使用语音合成API来发音不同单词的列表。当我们的应用程序通过画布进行讲话时，我的应用程序可以将内容进行动画处理。我意识到，当我执行一个新的话语：

var msg = new SpeechSynthesisUtterance(word); 
window.speechSynthesis.speak(msg); 

口语词似乎阻止主线程，暂时停止动画。每当我拨打window.speechSynthesis.speak();时都会发生这种情况。

有没有办法来对在Javascript中一个单独的线程的语音合成运行，所以它不与我在主线程动画干扰？

（我主要是在Chrome测试这个）

Answer 1

我会使用一个setTimeout的伪造的asynchronious电话：

var msg = new SpeechSynthesisUtterance(word); 
setTimeout(function() { window.speechSynthesis.speak(msg); }, 1); 

我必须承认，我不知道这件事。

Answer 2

的一种方法在这里跟着是使用一个工作线程播放与该短信的声音。

一个网络工作者，但不列入访问window对象。所以我们不能直接在工人内部调用window.speechSythesis.speak方法。

一个不错的工作，围绕text-to-speech library from Francois Laberge工具是

1. 将文本发送到说给工作线程。然后
2. 工作者线程将这段文字转换成声音（WAV）文件，并返回主线程的WAV文件。
3. 来自工作者线程接收消息将运行使用音频元件WAV文件的主线程。

在我看来甚至更好的性能可以创建工作池。

请看看演示here

Answer 3

我真的建议你看看菲利普·罗伯茨的关于什么是事件循环和这个可爱的总结为什么setTimeout 0是有道理的：https://www.youtube.com/watch?v=8aGhZQkoFbQ

总之一个快速的解决方案可能是Booster2ooo说什么，你一个setTimeout调用内包裹呼叫：

setTimeout(function() { window.speechSynthesis.speak(msg); }, 0);