AI English Pronunciation Trainer: Listen, Speak, Get Scored

Overview

A web app to practise English pronunciation, live at eng.alipour.me. You pick a level, the app creates a fresh English word, phrase or sentence with AI, reads it aloud in a natural voice, you read it into the microphone, and the app scores your pronunciation: words said well turn green, words said badly turn red with a wavy underline, and the score appears under the sentence. The Persian translation is one button away. The app started as a single HTML file and, over six versions, became a complete Next.js web app with accounts, an admin panel and an installable mobile version. I built this project in 2024.

The pictures on this page are from the live application, with a real microphone and a real Azure score.

What the application does

• Five levels: single word (A1), short phrase (A2), simple sentence (B1), complex sentence (B2) and business/professional sentence (C1).

• Fresh sentences from AI. A language model creates a new text for the chosen level and a random topic (technology, travel, food, work, space, history...). The last sentences are passed to the model as "do not repeat", and a random seed is added to every request. If a model does not answer, the next one in a backup queue is used, and the model that wrote the text is shown under the buttons.

• Hearing the correct pronunciation. Six neural voices (female and male, American accent) at four speeds, from normal to very slow.

• Pronunciation scoring. You press the microphone and read the text. The speech is assessed at the phoneme level against the exact text, and a 0 to 100 accuracy score is shown: green from 80 up, red below. Every word gets its own colour, so you see exactly which word to repeat.

• Persian translation of the sentence with one button.

• Noise handling while recording: noise suppression, echo cancellation and automatic gain are switched on in the browser, and silence timeouts are set so a short pause does not cut you off.

• Sign-in and shared access. Users sign in with a username and password. An admin panel lets the admin create and delete users. The service keys are set once by the admin and shared with every user, so a user needs nothing but a login.

• Installable on a phone: a PWA with its own icon, full-screen mode, safe areas for the iPhone notch, and Persian text in the Vazirmatn font.

How it grew (the versions)

• Version 1: making sentences, playing them and scoring the pronunciation, in one HTML file.

• Version 2: history of recent sentences.

• Version 3: noise removal while recording.

• Version 4: translation.

• Versions 5 and 6: icons and animations for the microphone (connecting, recording) and the stable single-file version.

• The Next.js version: accounts, an admin panel, a database, shared keys, the installable mobile app and the live deployment.

How it works

• Pronunciation scoring and speech synthesis with Azure Speech: Pronunciation Assessment at the phoneme level, and neural voices driven by SSML for the speed.

• Sentence generation and translation with open language models through Groq, which is fast enough that a new sentence appears almost at once.

• The sentence is checked word by word: each word's error type and accuracy score decide its colour.

• Next.js (App Router), React and TypeScript; sign-in with NextAuth, a MongoDB database with Mongoose, passwords hashed with bcrypt, and route protection so only signed-in users reach the settings and only the admin reaches the panel.

Tools

• JavaScript, HTML, CSS; Next.js, React, TypeScript, Tailwind CSS

• Azure Speech SDK (pronunciation assessment, text-to-speech)

• Groq (language models)

• NextAuth, MongoDB, Mongoose, bcrypt; PWA

Result

A short practice loop that works on a phone: listen, speak, get a score, see which word was wrong and say it again.