The HTML5 Speech Synthesis API isn’t widely supported, but it is something cool to play with and can be useful. It is supported only in Chrome and Safari. For a recent prototype feature I used it. It is definitely still pretty beta. The goal of this post is to give some pointers when using it, if you choose to.
If you are going to do anything with Speech Synthesis you are probably going to want to enable it only if your user’s browser supports it.
There is a known bug in Chrome that causes the speech synthesis to stop working if you use text greater than ~ 300 characters. The only way to get to start working again is to restart Chrome. The simple solution is to split up your text into sentences. This actually works out for the better, since there will be a larger gap between the sentences and it sounds more natural.
This works well, however as a safeguard you might want to make sure none of your sentences go over the limit. If any do break them up!
Pausing and Resuming
The API supports stopping, pausing, and resuming. Safari will resume at the beginning of the current SpeechSynthesisUtterance object whereas chrome will resume where it left off.
I’ve found that to get everything to work consistently sometimes you have to pause and resume it once or twice at the beginning of playback.