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)