Web Speech API

I recently learned that there's a pretty decent Web Speech API, and I have the perfect (although outdated) pet project for it, my choose your adventure system: Lots of text that, with minimal cleaning, make for a nice reading.

There is a very practical online demo that will also give you a feeling of how good or bad the speech synthesizer will sound. And trust me, you should test it, as at least under Ubuntu Linux, Firefox sounds quite terrible, meanwhile Chrome is decent enough that I decided to target that browser for speech.

Most of the API consists on two objects, a single SpeechSynthesis instance to handle the main configuration, and then one SpeechSynthesisUtterance instance per sentence you wish to get read by the API.

I won't enter in the details of how to use it, because I merely followed the nice explanations and checked the source code of the demo (which are concise and good), but I will warn about one issue that I'm having with Chrome: If the sentence is too long, it gets cut, and the API seems to hang, not playing any further sound until closing and re-opening again the browser application!

In order to workaround the length limitation, I am applying the following simple split:

fullText.split(/[.,\:;!\?]| - /).forEach((textFragment) => {
    const text = textFragment.trim();
    if (text.length > 0) {
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.voice = desiredVoice;
      utterance.pitch = pitchValue;
      utterance.rate = rateValue;
      synth.speak(utterance);
    }
  });

You can perfectly enqueue any number of "sentences" (utterances), just make sure that each is not too big.

I might improve the logic a bit in the future, mostly if I still find too big sentences I will try to discern the aprox. max length and split to the previous full word. Also note that when reading numbers (e.g. 5.6) it will split them. But overall, it is a nice first step, and really simple to use.