Task: Add browser-based single-word speech recognition for child responses

Objective

Add a simple child voice response scenario to picture exercises.

Example:

1. A picture of a dog is shown on the screen.
2. The child presses the microphone button.
3. Says: "Dog".
4. The browser recognizes what was said.
5. The app receives the text and compares it with the expected answer.

Similarly for short answers like "fish", "cat", "house", etc.

Technical Foundation

Use the browser's Web Speech API:

• SpeechRecognition or webkitSpeechRecognition;
• recognition.lang = 'ru-RU';
• for a single answer, continuous = false;
• interimResults = false can be used for the simplest initial version;
• get the result from event.results / transcript.

What to Support

• recording start button;
• "listening" visual state;
• stopping after a short answer;
• receiving the final recognized text;
• text normalization before comparison: lowercase, trim, and punctuation removal if necessary;
• comparison with the expected word;
• states: correct / not recognized / microphone access error / API unavailable;
• ability to retry.

Limitations

SpeechRecognition has inconsistent browser support and may use the browser's/platform's external speech-recognition service. This is acceptable for this scenario: the task is not about local phonetic recognition or LLMs, but about a child's short, practical single-word response.

At the first stage, do not attempt to recognize free speech, sentences, or evaluate phoneme pronunciation.