Progress control in Web Speech API

I am using Web Speech API to read a text (documentation link here).

Is there a way of displaying this kind of progress control?

The idea is that user sees the progress of the read, and can jump to any point of it.

Any free alternative is also welcomed.

Thanks in advance!

You can use the SpeechSynthesisUtterance.onboundary event callback to get the chatIndex while it speaks :

// The text to be spoken
const text = 'May the Force be with you.';

// Set up speech synthesis
const utterance = new SpeechSynthesisUtterance(text);

// Track progress
utterance.onboundary = e => console.log(text.slice(0, e.charIndex));

// On end
utterance.onend = () => console.log('Speech synthesis finished');

// Start speech synthesis
window.speechSynthesis.speak(utterance);

The callback fires after each word, the charIndex matching the character of the last spoken word in the given text :

May 
May the 
May the Force 
May the Force be 
May the Force be with 
Speech synthesis finished

I personally used this in a karaoke-like text progression UI, but you could easily use text.length and charIndex to make a progress % for a progress bar.

Note: I only tested it on Chrome.