[ShowDEV] Speech exercises for kids / [RU] Логопедические упражнения для детей

https://aleksei-berezkin.github.io/hard-letters/

My kid doesn't speak Russian, anything interesting for me here?

Of course! Please see the last section

Immigration Hurdles

You probably know that after the tragic events that began in February 2022, many people fled their home countries. This includes me and my Russian-speaking colleagues.

Immigration is challenging; with kids, it's even harder. You have to do many things by yourself that you normally delegated to someone else. For example, speech professionals usually help kids with correct pronunciation, but it's hard to find such professionals in another country.

The Problem with Hard Letters

Wise people removed hard letters from their languages. There are no rolling R's or hard L's in English, French, and German. Unfortunately, they exist in Russian, and many kids struggle to learn them. Besides the lack of speech therapists, there isn't enough speech practice to reinforce learning. There are some practice videos on YouTube, but we exhausted them very quickly.

One day, after watching a video for the 10th or 20th time, my son told me he was tired of repeating the same words again and again and asked if we could just watch some cartoons instead. At that moment, I thought: maybe I can use my web development skills to help.

What Do Kids Need for Practice?

At first, I thought of generating videos with MidJourney or similar tools. However, I quickly realized that was overkill. We don't even need a video here. What my son needs is just a simple slideshow with nice photos and someone reading the words aloud. Nice background music would add a playful feeling. After a very short Google search, I found that all these components exist and are free.

The Components

Synthesized Speech

It's not new, but I didn't use it before. Making your browser speak is very simple:

const msg = new SpeechSynthesisUtterance(text);
msg.lang = 'ru-RU'
msg.pitch = 1.1   // 0.1 to 2
msg.rate = 0.85   // 0.1 to 10
// Depending on your system you may have multiple voices
msg.voice = speechSynthesis.getVoices()[0]
msg.volume = 1
window.speechSynthesis.speak(msg);

Make sure the document is focused to hear the sound. This is always the case if the user has to click or tap something before the browser starts speaking.

Pixabay — Often Overlooked Free Pics Service

Of course, I first tried famous services like Unsplash and Pexels. However, they have very strict initial limitations per access token — 50 and 200 API requests per hour, respectively. After googling a bit more, I found Pixabay. Its collection is also impressive, with about 4 million photos, and the initial limit is 100 API requests per minute.

Background Music with SoundCloud

You just insert an iframe into your HTML — and that's it! You don't even need to keep its original size. Its layout is responsive and adapts to smaller sizes.

Their API is glitchy, though. I needed to add some workarounds to make it work consistently. And make sure the track or playlist you selected is free; otherwise, there will be a delay before it starts to play.

Finally

I never thought that it was possible to do something for my kids with my web development skills. This app is not rocket science; it's trivial. However, it's one of the most satisfying things I've ever done. Watching my son's speech progress is priceless.

Now I'm wondering how many more things are yet possible!

Images used in this post

• Cover
• Alphabet