Task: Add browser-based voice synthesis for letters, syllables, and individual words

Add browser-based voice synthesis for letters, syllables, and individual words

Use the Web Speech API to play educational units: letters, syllables, and individual words.

Goal

Add simple browser-based audio playback for educational materials without a separate TTS backend.

Main scenario:

  • a child sees a letter, syllable, or word;
  • clicks the play button;
  • the browser pronounces the corresponding text.

Technical Foundation

Use the browser's Web Speech API:

  • SpeechSynthesisUtterance;
  • window.speechSynthesis.speak();
  • window.speechSynthesis.cancel();
  • speechSynthesis.getVoices() to select a suitable Russian voice;
  • utterance.lang = 'ru-RU'.

What to Support

  • individual letters;
  • syllables;
  • individual words;
  • repeated playback;
  • canceling current playback before starting a new one;
  • selecting a Russian voice if available;
  • handling the asynchronous loading of the voice list via voiceschanged.

Important

At the first stage, the task is only about ready-made browser playback. Do not mix it with experiments on a custom speech synthesizer and PCM analysis.

Ворклоги

Progress: Limitations and Quirks of Browser SpeechSynthesis

Built-in browser text-to-speech was tested on individual words, syllables, and letters. For whole words, the API works acceptably in many cases, but noticeable and unpredictable text interpretation errors occur on short syllables and individual letters.

What Sounds Normal

  • Собака (Dog) — pronounced normally.
  • Ры (Ry) — pronounced normally.
  • Свинья (Pig) — pronounced normally.
  • Пель (Pel) — unexpectedly pronounced normally.

Observed Glitches

  • Со (So) — sounds roughly just like С (S).
  • Р (R) — sounds more like Э (E).
  • Ре (Re) — also sounds roughly like Э (E).
  • Свинь (Svin') — instead of a syllable, it starts reading out letter names: roughly Es Ve En Myagkiy znak (S V N Soft sign). At the same time, И and Н are not spoken separately as expected, and part of the sequence is interpreted as En.
  • Ковь (Kov') — also breaks down into spelling out letters.
  • Солн (Soln) — also spelled out letter by letter / not as a syllable.
  • Ко (Ko) — sounds like Ка (Ka).
  • Ар (Ar) — sounds like А (A).
  • Де (De) — sounds like (De).

Main Conclusion

SpeechSynthesisUtterance is well-suited for ordinary words and phrases, but does not guarantee correct pronunciation of artificially isolated syllables and individual letters.

The TTS engine tries to interpret a short string as natural text, a letter name, an abbreviation, or an unknown lexeme. Therefore, the same sequence of characters may be voiced differently depending on length and context.

Particularly problematic are:

  • single consonants;
  • short 2-letter syllables;
  • syllables with ь (soft sign);
  • truncated parts of words that are not independent lexemes;
  • combinations that look like letter abbreviations.

Practical Consequence

Browser TTS cannot be considered a universal source of correct pronunciation for the learning mechanics letter → syllable → word.

For whole words, it can be used directly, but for letters and syllables, one of the following approaches will be required:

  1. manual exceptions / a dictionary of alternative strings for the specific TTS;
  2. pre-recorded audio files;
  3. a separate TTS/SSML engine with more controllable pronunciation;
  4. a hybrid approach: words via browser TTS, problematic letters/syllables via prepared audio.

Important

These observations apply to the actual behavior of the current browser/system voice. On a different OS, browser, or with a different SpeechSynthesisVoice, the results may vary, so such exceptions cannot be considered universal for all devices.