A modern web application that transcribes lectures in real-time using your microphone and displays them as interactive notecards with PDF export functionality.
- 🎤 Real-time Transcription: Uses Web Speech API for live microphone transcription
- 📝 Interactive Notecards: Automatically creates notecards from transcribed content
- 📊 Live Statistics: Shows word count and character count in real-time
- 📄 PDF Export: Export all notecards as a professional PDF document
- ✏️ Edit & Delete: Modify or remove individual notecards
- 🎨 Modern UI: Beautiful, responsive design that works on all devices
- 🔄 Session Management: Tracks recording sessions with timestamps
- Open
index.htmlin a modern web browser (Chrome, Edge, or Firefox) - Allow microphone permissions when prompted
- The application will automatically detect if speech recognition is supported
- Click the "Start Recording" button to begin transcription
- Speak clearly into your microphone
- The app will show live transcription and create notecards automatically
- Click "Stop Recording" when you're done
- Each transcribed segment becomes a notecard
- Hover over notecards to see edit and delete options
- Click the edit button (✏️) to modify content
- Click the delete button (🗑️) to remove notecards
- Click "Export PDF" to generate a professional PDF document
- The PDF includes all notecards, timestamps, and session statistics
- Files are automatically downloaded with a timestamped filename
- Use "Clear All" to remove all transcription and notecards
- This action cannot be undone
- Chrome (recommended) - Full support
- Edge - Full support
- Firefox - Limited support (may require additional setup)
- Safari - Not supported
- Microphone (built-in or external)
- Stable internet connection for external libraries
- Microphone access must be granted
- The app works offline once loaded
Noter/
├── index.html # Main HTML file
├── styles.css # CSS styling
├── script.js # JavaScript functionality
└── README.md # This file
- Uses the Web Speech API (
webkitSpeechRecognition) - Continuously listens for speech input
- Processes both interim and final results
- Automatically restarts if interrupted
- Each final transcription segment becomes a notecard
- Notecards include timestamps and session information
- Content can be edited or deleted individually
- Real-time updates as you speak
- Uses
html2canvasto capture notecard layout - Uses
jsPDFfor PDF creation - Automatically handles page breaks for long content
- Includes session metadata and statistics
- Check browser permissions
- Ensure microphone is not being used by other applications
- Try refreshing the page
- Use Chrome or Edge for best compatibility
- Speak clearly and at a normal pace
- Reduce background noise
- Check internet connection for external libraries
- Ensure browser supports Web Speech API
- Wait for the "Generating PDF..." message to complete
- Ensure you have sufficient memory for large documents
- Check browser console for error messages
- Chrome/Edge: Full speech recognition support
- Firefox: May require enabling
media.webspeech.recognition.enablein about:config - Safari: No Web Speech API support
- Mobile: Limited support, desktop recommended
- Cloud storage for notecards
- Multiple language support
- Audio recording alongside transcription
- Collaborative note-taking
- Advanced editing tools
- Custom notecard templates
This project is open source and available under the MIT License.
Feel free to submit issues, feature requests, or pull requests to improve the application.
Note: This application requires a modern browser with Web Speech API support. For the best experience, use Chrome or Edge on a desktop device.