Overview
Dictation is an immersive voice learning application featuring stunning 3D visualizations powered by Three.js and React Three Fiber. Practice pronunciation, improve listening skills, and engage with interactive audio experiences in a visually captivating environment.
Features
Real-Time Voice Recognition
Leverage the Web Speech API for real-time voice recognition with instant feedback on pronunciation accuracy.
3D Interactive Visualizations
Immersive Three.js scenes that respond to audio input and user interactions, creating an engaging learning environment.
Audio Waveform Display
Visual representation of audio input with real-time waveform analysis for better understanding of speech patterns.
Progress Tracking
Track your learning progress with scoring systems and achievement tracking across sessions.
Multiple Difficulty Levels
Adjust difficulty to match your skill level, from beginner to advanced dictation exercises.
Gamified Experience
Game-like elements including points, levels, and achievements to keep learners motivated.
Quick Start Guide
- 1Open the Dictation app and grant microphone permissions
- 2Select your preferred language and difficulty level
- 3Listen to the audio prompt carefully
- 4Speak clearly into your microphone to record your response
- 5Receive instant feedback on your pronunciation
- 6Track your progress and unlock new levels
Technologies
Next.js 16
React framework for server-side rendering
Three.js
3D graphics library for WebGL rendering
React Three Fiber
React renderer for Three.js
React Three Drei
Useful helpers for React Three Fiber
Web Audio API
Browser API for audio processing
Web Speech API
Browser API for speech recognition
Architecture
The Dictation app combines modern web technologies to create an immersive learning experience. The Three.js scene is managed through React Three Fiber, allowing for declarative 3D programming. Audio input is processed through the Web Audio API for visualization, while the Web Speech API handles recognition. The Convex backend stores user progress and game states.
Ready to get started?
Open Dictation