Minimal, elegant vocabulary audiobook app built with Next.js 13.5 (JavaScript), Tailwind CSS, and shadcn-style UI.
- Word groups (sets) loaded from
data/words.json - Continuous TTS playback (word → synonym → sentence) with 1–2s pauses
- Controls: Play / Pause / Stop / Next / Prev
- Progress: “Word X of Y” with progress bar
- Adjustable speech rate: slow / medium / fast
- Light/Dark theme toggle (persisted)
npm install
npm run devEdit data/words.json to manage sets. Structure:
{
"groups": [
{
"id": 1,
"name": "Set 1",
"words": [
{
"id": 1,
"word": "abreast",
"synonym": "up-to-date",
"sentence": "..."
}
]
}
]
}Choose the active set from the dropdown in the UI.
- Click Play to start; Pause/Resume or Stop anytime
- Next/Prev jumps between words
- Change rate via the rate dropdown
- Toggle theme with the header button
- TTS uses the browser
SpeechSynthesisAPI (separate utterances per field) - Playback is resilient to fast skips via a session run id
- Styling via Tailwind; UI primitives:
Button,Card,Progress
- Push to a Git repo
- Import the repo in Vercel
- Use defaults for a Next.js app
Requires SpeechSynthesis (modern Chrome/Edge/Safari/Firefox). Some browsers require a user gesture before audio can play.