A modern web-based teleprompter application with real-time speech recognition and Picture-in-Picture support. Built with Vue 3, TypeScript, and the Web Speech API.
- 🎯 Real-time Speech Recognition: Advanced speech-to-text with fuzzy matching algorithm
- 📺 Picture-in-Picture Mode: Move teleprompter to floating window while preserving state
- 📝 Script Management: Easy script editing with word count and progress tracking
- 🎨 Modern UI: Clean, responsive interface with dark theme
- ⚡ Fast Performance: Optimized fuzzy matching with sliding window algorithm
- 🔧 Customizable Settings: Adjustable text size, lines to show, and scroll behavior
- 🌍 Multi-language Support: Speech recognition in multiple languages
- 📊 Analytics: Built-in Google Analytics for usage tracking
- 💾 Local Storage: Automatic saving of settings and scripts
- 📱 Responsive Design: Works on desktop and mobile devices
- Frontend: Vue 3 + TypeScript
- Build Tool: Vite
- State Management: Pinia
- Speech Recognition: Web Speech API
- Picture-in-Picture: Document Picture-in-Picture API
- Analytics: Google Analytics 4
- Testing: Vitest + Vue Test Utils
- Linting: ESLint + Prettier
- Deployment: GitHub Pages
# Clone the repository
git clone https://github.com/Andrey-Roshchupkin/speech-teleprompter.git
cd speech-teleprompter
# Install dependencies
npm install# Start development server
npm run dev
# Run tests
npm run test
# Run linting
npm run lint
# Format code
npm run format# Build for production
npm run build:prod
# Preview production build
npm run preview# Deploy to main branch
npm run deploy:main
# Or use script directly
./deploy-main.sh- Create GitHub repository and push your code
- Run deployment using the method above
- Enable GitHub Pages in repository settings:
- Go to Settings → Pages
- Source: Deploy from a branch
- Branch:
main
- Speech Recognition: Uses the Web Speech API to convert speech to text in real-time
- Fuzzy Matching: Implements a sliding window algorithm to match spoken words with script text
- Real-time Updates: Updates the teleprompter position based on speech recognition results
- Smart Scoring: Uses bonus scoring for end-of-phrase matches to improve accuracy
- Picture-in-Picture: Moves the teleprompter to a floating window while preserving all state
- Auto-scroll: Automatically scrolls the text based on speech progress and user settings
- State Management: Centralized state management with Pinia for consistent data flow
- Text Size: Adjustable font size (12-48px)
- Lines to Show: Control how many lines are visible (3-10)
- Scroll Trigger: Set when auto-scroll activates (1 to lines-1)
- Language Support: Multiple language options for speech recognition
- Auto-save: Settings and scripts are automatically saved to local storage
- Debug Logging: Configurable log levels for troubleshooting
- Chrome/Chromium (recommended - full support)
- Microsoft Edge (full support)
- Safari (limited support - no Picture-in-Picture)
- Firefox (limited support - no Picture-in-Picture)
| Feature | Chrome | Edge | Safari | Firefox |
|---|---|---|---|---|
| Speech Recognition | ✅ | ✅ | ❌ | |
| Picture-in-Picture | ✅ | ✅ | ❌ | ❌ |
| Auto-scroll | ✅ | ✅ | ✅ | ✅ |
| Local Storage | ✅ | ✅ | ✅ | ✅ |
- 📺 Picture-in-Picture Mode: Move teleprompter to floating window
- 🔄 Enhanced Auto-scroll: Improved scroll behavior with state preservation
- 📊 Google Analytics: Built-in usage tracking and analytics
- 💾 Auto-save: Automatic saving of settings and scripts
- 🎨 UI Improvements: Better styling and user experience
- 🐛 Bug Fixes: Improved stability and performance
- State Management: Centralized state with Pinia
- Error Handling: Better error handling and user feedback
- Performance: Optimized rendering and memory usage
- Accessibility: Improved keyboard navigation and screen reader support
The application includes Google Analytics 4 for tracking:
- User engagement and session duration
- Feature usage (speech recognition, PiP mode)
- Browser and device statistics
- Geographic distribution of users
All data collection is anonymous and GDPR compliant.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Vue.js team for the amazing framework
- Web Speech API for speech recognition capabilities
- Document Picture-in-Picture API for floating window support
- Google Analytics for usage tracking
- All contributors and testers
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed description
- Include browser version and error messages if applicable
This project is licensed under the MIT License - see the LICENSE file for details.