Speech Synthesis API blocks main thread

Question

I am using the Speech Synthesis API to pronounce a list of different words. My app animates the words in and out as they're being spoken via canvas. I realized that when I perform a new utterance:

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

the spoken word appears to block the main thread, temporarily stalling the animation. This happens every time I call window.speechSynthesis.speak();.

Is there a way to have the speech synthesis run on a separate thread in Javascript, so it doesn't interfere with my animation on the main thread?

(I am primarily testing this in Chrome)

Answer 1

I'd use a setTimeout to fake an asynchronious call:

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

I must admit I'm not sure about this.