音声合成APIブロックメインスレッド

Question

私は音声合成APIを使用して、異なる単語のリストを発音しています。私のアプリはキャンバスを介して話されている間に単語をアニメーション化したり消したりします。

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

話し言葉が一時的にアニメーションを失速、メインスレッドをブロックするように表示されます。私は、私は新しい発話を実行するときに気づきました。これは私がwindow.speechSynthesis.speak();と呼ぶたびに起こります。

音声合成をJavascriptの別のスレッドで実行する方法はありますか？メインスレッドのアニメーションに干渉しませんか？

Answer 1

は私が偽のasynchroniousコールにsetTimeoutメソッドを使用したい（私は主にChromeでこれをテストしてい）：

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

私はこれについてはよく分からない認めなければなりません。

Answer 2

ここに従うアプローチは、テキストメッセージに対応するオーディオを再生するワーカースレッドを使用することです。

ただし、Webワーカーはウィンドウオブジェクトにアクセスできません。だから私たちは労働者の中で直接window.speechSythesis.speakメソッドを呼び出すことはできません。

text-to-speech library from Francois Laberge実装が

1. あり、その周りの素敵な作品は、テキストがワーカースレッドに話さなければ送信します。
2. ワーカースレッドはこのテキストをオーディオ（WAV）ファイルに変換し、メインスレッドのWAVファイルを返します。
3. ワーカースレッドからのメッセージを受信する際のメインスレッドは、オーディオ要素を使用してWAVファイルを実行します。

私の意見では、パフォーマンスを向上させるためにワーカープールを作成することができます。

私は本当にあなたがイベントループ、なぜsetTimeout 0は理にかなっているかについてのフィリップ・ロバーツのこの素敵な概要を参照することをお勧めデモhere

Answer 3

を見てください：要するにhttps://www.youtube.com/watch?v=8aGhZQkoFbQ

を迅速な解決策は、あなたがsetTimeoutを呼び出し内の呼び出しをラップすることを、Booster2oooが言うことがあります

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