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)
3 Answers
Answers 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.
Answers 2
An approach to follow here would be to use a worker thread that plays the audio corresponding to the text message.
A web-worker, however doesnot have access to the window object. So we cannot call the window.speechSythesis.speak method directly inside the worker.
A nice work around which text-to-speech library from Francois Laberge implements is
- Send the text to be spoken to the worker thread.
- The worker thread would then convert this text to an audio(WAV) file and return the main-thread the WAV file.
- The main thread on receiving a message from the worker thread will run the WAV file using an audio element.
In my opinion for even a better performance a worker pool can be created.
Please have a look at the demo here
Answers 3
I really suggest you to see this lovely summary of Philip Roberts about what is the event loop and why setTimeout 0 makes sense: https://www.youtube.com/watch?v=8aGhZQkoFbQ
In short a quick solution may be what Booster2ooo says, that you wrap the call within a setTimeout call:
setTimeout(function() { window.speechSynthesis.speak(msg); }, 0); 
0 comments:
Post a Comment