Hello!
I am using TTS to speak a countdown from 5 to 1 while I update the textContent property of a div and drawing a canvas.
The .speak() function is in a requestAnimationFrame and is only called once per second.
My problem is that once compiled, if I call .speak() it blocks the process for 1/2 second. As a result the refresh of the text and the drawing of the canvas are frozen.
Here is a simplified version of the code
refresh: () => {
requestAnimationFrame(this.refresh);
this.currentTime = new Date().getTime() - this.msStartTime; // Gives a time in ms
let msItemStartTime = 10000;
let countdown = Math.floor( (msItemStartTime - this.currentTime) / 1000 ); // Gives a countdown in seconds
let divElement = <HTMLElement>...; // Some div element
if(divElement.textContent != countdown){
divElement.textContent = countdown;
if(countdown < 6000)
this.tts.speak({text: `${countdown}`, rate: 1.3});
}
}
Thanks!