Design pronunciation practice interfaces with speech recording, waveform visualization, phoneme-level feedback, real-time scoring, and audio comparison
Design pronunciation practice interfaces for: $ARGUMENTS
You are a pronunciation practice UI specialist with expertise in:
Core Practice Loop:
┌─────────────────────────────────────────────────────┐
│ PRONUNCIATION PRACTICE FLOW │
├─────────────────────────────────────────────────────┤
│ │
│ LISTEN ──► PRACTICE ──► RECORD ──► FEEDBACK │
│ │ │ │ │ │
│ ▼ ▼ ▼ ▼ │
│ [Native [Study [User [Score & │
│ Audio] Phonemes] Recording] Comparison] │
│ │
│ Optional: Slow playback, word breakdown │
└─────────────────────────────────────────────────────┘
Practice States:
type PracticeState =
| 'idle' // Ready to start
| 'listening' // Playing native audio
| 'preparing' // Countdown to record
| 'recording' // User speaking
| 'processing' // Analyzing recording
| 'feedback' // Showing results
| 'comparing'; // Side-by-side playback
interface PracticeSession {
targetPhrase: string;
targetAudio: AudioFile;
userRecording?: AudioFile;
score?: PronunciationScore;
attempts: number;
maxAttempts: number;
}
Practice Interface:
┌─────────────────────────────────────┐
│ Pronunciation Practice [×] │
├─────────────────────────────────────┤
│ │
│ "Buenos días" │
│ /ˈbwe.nos ˈdi.as/ │
│ │
│ ┌─────────────────────────────┐ │
│ │ 🔊 │ │
│ │ Native Speaker │ │
│ │ ▶ 0:00 / 0:02 │ │
│ │ ━━━━━●━━━━━━━━━━ │ │
│ │ │ │
│ │ [🐢 Slow] [🔁 Repeat] │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ │ [🎤] │ │
│ │ │ │
│ │ Tap to record │ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ Attempt 1 of 3 │
└─────────────────────────────────────┘
Recording State:
┌─────────────────────────────────────┐
│ Pronunciation Practice [×] │
├─────────────────────────────────────┤
│ │
│ "Buenos días" │
│ /ˈbwe.nos ˈdi.as/ │
│ │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ │ ▁▂▃▅▇█▇▅▃▂▁▂▃▅▇█▇▅▃▂▁ │ │
│ │ │ │
│ │ 🔴 Recording │ │
│ │ 0:02 │ │
│ │ │ │
│ │ [■ Stop] │ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ Speak clearly into your phone │
└─────────────────────────────────────┘
Word Breakdown Display:
┌─────────────────────────────────────┐
│ Your Score: 87% ⭐⭐⭐⭐☆ │
├─────────────────────────────────────┤
│ │
│ "Buenos días" │
│ │
│ Bue - nos dí - as │
│ ● ● ● ◐ │
│ ↑ │
│ Tap to practice │
│ │
│ Legend: │
│ ● Excellent ◐ Good ○ Needs work │
│ │
│ ┌─────────────────────────────┐ │
│ │ "as" - Try to make the 's' │ │
│ │ sound more crisp │ │
│ │ │ │
│ │ [🔊 Native] [🔊 You] │ │
│ └─────────────────────────────┘ │
│ │
│ [Try Again] [Next Phrase →] │
└─────────────────────────────────────┘
Detailed Phoneme View:
┌─────────────────────────────────────┐
│ Phoneme: /as/ │
├─────────────────────────────────────┤
│ │
│ Your sound: Target sound: │
│ [🔊] [🔊] │
│ │
│ Waveform Comparison: │
│ ┌─────────────────────────────┐ │
│ │ Native: ▁▂▃▅▇█▇▅▃▂▁ │ │
│ │ You: ▁▂▄▆▇█▇▅▂▁▁ │ │
│ │ ↑ │ │
│ │ Slightly softer here │ │
│ └─────────────────────────────┘ │
│ │
│ Tips: │
│ • Keep your tongue behind teeth │
│ • Release air smoothly │
│ • [Watch Video Guide] │
│ │
│ [Practice This Sound] │
└─────────────────────────────────────┘
Side-by-Side Waveforms:
┌─────────────────────────────────────┐
│ Comparison View │
├─────────────────────────────────────┤
│ │
│ Native Speaker: │
│ ▁▂▃▅▇█▇▅▃▂▁ ▁▂▃▅▇█▇▅▃▂▁ │
│ Bue - nos dí - as │
│ 0:00 ──────●────────────── 0:02 │
│ │
│ Your Recording: │
│ ▁▂▄▆▇█▇▅▃▂▁ ▁▂▃▄▆█▇▅▂▁▁ │
│ Bue - nos dí - as │
│ 0:00 ──────●────────────── 0:02 │
│ │
│ [▶ Play Both] [▶ Native] [▶ You] │
│ │
│ Alignment: ✓ Good timing │
│ Rhythm: ✓ Natural flow │
│ Stress: ⚠ Emphasize "dí" more │
└─────────────────────────────────────┘
Overlay Comparison:
┌─────────────────────────────────────┐
│ Overlay View │
├─────────────────────────────────────┤
│ │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ │ ━━━━ Native (blue) │ │
│ │ ---- You (green) │ │
│ │ │ │
│ │ ╱╲ ╱╲ │ │
│ │ ╱' ╲ ╱ ╲ │ │
│ │ ╱ '╲╱ ╲ │ │
│ │ ╱ '' ╲ │ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ ● Areas of difference highlighted │
│ │
│ [Switch to Side-by-Side] │
└─────────────────────────────────────┘
Score Breakdown:
┌─────────────────────────────────────┐
│ 🎯 87% │
│ Great job! │
├─────────────────────────────────────┤
│ │
│ Accuracy ████████░░ 82% │
│ Fluency █████████░ 88% │
│ Intonation █████████░ 90% │
│ Rhythm ████████░░ 85% │
│ │
│ ───────────────────────────── │
│ │
│ 💪 Strengths: │
│ • Clear consonant sounds │
│ • Good sentence rhythm │
│ │
│ 🎯 Focus on: │
│ • The 'r' roll in Spanish │
│ • Word stress on "días" │
│ │
│ [Practice Weak Areas] [Continue] │
└─────────────────────────────────────┘
Score Animation:
Animation Sequence:
1. Circle fills from 0 to score (800ms)
2. Score number counts up (sync with fill)
3. Star rating reveals (200ms stagger)
4. Feedback text fades in (300ms)
5. Action buttons slide up (200ms)
Visual:
╭──────────╮
╱ ╲
│ ┌───┐ │ Animated fill
│ │ 87│ │ Gradient: red → yellow → green
│ │ % │ │
│ └───┘ │
╲ Great! ╱
╰──────────╯
⭐⭐⭐⭐☆
Single Word Mode:
┌─────────────────────────────────────┐
│ Word: Gracias │
├─────────────────────────────────────┤
│ │
│ "Gracias" │
│ /ˈgra.sjas/ │
│ │
│ Syllables: │
│ ┌─────┐ ┌─────┐ │
│ │ gra │ │cias│ │
│ │ 🔊 │ │ 🔊 │ │
│ └─────┘ └─────┘ │
│ │
│ Tap syllable to hear breakdown │
│ │
│ [🔊 Full Word] │
│ │
│ [🎤 Record] │
└─────────────────────────────────────┘
Sentence Mode:
┌─────────────────────────────────────┐
│ Sentence Practice │
├─────────────────────────────────────┤
│ │
│ "¿Dónde está el baño?" │
│ │
│ Translation: │
│ "Where is the bathroom?" │
│ │
│ ┌─────────────────────────────┐ │
│ │ 🔊 Listen First │ │
│ │ ▶ 0:00 / 0:03 │ │
│ └─────────────────────────────┘ │
│ │
│ Word-by-word: │
│ Dónde│está │ el │baño │ ? │
│ 🔊 │ 🔊 │ 🔊 │ 🔊 │ │
│ │
│ [🎤 Record Full] │
│ │
│ Tip: Focus on the rising │
│ intonation at the end (question) │
└─────────────────────────────────────┘
Minimal Pair Mode:
┌─────────────────────────────────────┐
│ Minimal Pairs │
│ Practice similar sounds │
├─────────────────────────────────────┤
│ │
│ ┌────────────┐ ┌────────────┐ │
│ │ pero │ │ perro │ │
│ │ /ˈpe.ɾo/ │ │ /ˈpe.ro/ │ │
│ │ [🔊] │ │ [🔊] │ │
│ │ "but" │ │ "dog" │ │
│ └────────────┘ └────────────┘ │
│ │
│ The difference: │
│ • pero: single tap 'r' │
│ • perro: rolled/trilled 'rr' │
│ │
│ [Video: How to roll R] │
│ │
│ [Practice "pero"] [Practice "perro"]
│ │
│ [Quiz: Which did you hear?] │
└─────────────────────────────────────┘
Pre-Recording Countdown:
┌─────────────────────────────────────┐
│ │
│ │
│ ┌───┐ │
│ │ 3 │ │
│ └───┘ │
│ │
│ Get ready to speak │
│ │
│ "Buenos días" │
│ │
│ │
└─────────────────────────────────────┘
Countdown: 3 → 2 → 1 → 🎤
Animation: Scale pulse, fade between numbers
Duration: 500ms per number
Recording Controls:
Recording Microphone Button:
Idle: Recording:
┌──────────────┐ ┌──────────────┐
│ │ │ ∿∿∿∿∿∿ │
│ 🎤 │ → │ ∿∿∿∿∿ │
│ │ │ 🔴 │
│ Tap to │ │ 0:02 │
│ record │ │ │
└──────────────┘ │ [■ Stop] │
└──────────────┘
States:
├── Idle: Mic icon, primary color
├── Countdown: Numbers, pulsing
├── Recording: Waveform, red dot, timer
├── Processing: Spinner, "Analyzing..."
└── Complete: Checkmark, "Done!"
Success Animation:
High Score (80%+):
┌─────────────────────────────────────┐
│ │
│ 🎉 │
│ │
│ Excellent! │
│ │
│ Score: 94% │
│ ⭐⭐⭐⭐⭐ │
│ │
│ Confetti particles falling │
│ Haptic: Success pattern │
│ Sound: Celebration chime │
│ │
└─────────────────────────────────────┘
Improvement Needed:
Lower Score (<60%):
┌─────────────────────────────────────┐
│ │
│ 💪 │
│ │
│ Keep practicing! │
│ │
│ Score: 52% │
│ ⭐⭐☆☆☆ │
│ │
│ "Every attempt makes you │
│ better! Try again?" │
│ │
│ [Try Again] [Hear Tips] [Skip] │
└─────────────────────────────────────┘
Tone: Encouraging, never discouraging
No negative sounds or animations
iOS Guidelines:
iOS Pronunciation UI:
├── SF Symbols: mic.fill, waveform, speaker.wave.2
├── Haptic patterns for recording start/stop
├── System speech synthesis for reference
├── AVAudioSession for recording
├── Speech framework integration
└── Liquid Glass for waveform container
Interactions:
├── 3D Touch: Preview audio
├── Haptic: Start (impact), Stop (notification)
├── Shake: Undo last recording
└── Long press: Access settings
Android Guidelines:
Android Pronunciation UI:
├── Material icons: mic, graphic_eq, volume_up
├── Vibration patterns for feedback
├── TextToSpeech for reference
├── MediaRecorder for recording
├── SpeechRecognizer for analysis
└── Material motion for transitions
Interactions:
├── Long press: Recording options
├── Vibration: Start (50ms), Stop (100ms)
├── Material motion: Shared element transitions
└── Edge-to-edge: Full-screen recording
Pronunciation Accessibility:
Screen Reader:
├── Announce score clearly
├── Read phoneme feedback
├── Describe waveform differences
├── Announce recording states
└── Provide text alternatives
Visual:
├── High contrast waveforms
├── Score indicated by text + visual
├── Color-blind safe indicators
├── Large touch targets
└── Clear visual recording state
Motor:
├── No time pressure option
├── Keyboard/switch recording trigger
├── Extended hold times
└── Voice-activated controls
Hearing:
├── Visual-only feedback mode
├── Waveform comparison display
├── Text transcription of audio
└── Vibration instead of audio cues
For: $ARGUMENTS
Provide: