A privacy-first, browser-only voice recording and transformation web application that allows students to record short voice samples and apply fun audio effects while learning basic STEM concepts about sound, frequency, and digital signal processing.
Perfect for: Middle school and high school STEM demonstrations, science fairs, and educational workshops.
🌐 Live Demo: yourspraveen.github.io/browser-voice-changer 👤 Author: yourspraveen.com
- 100% browser-based - No server uploads, no cloud processing
- Your audio stays on your device - Nothing is sent to any server
- No login required - Start using immediately
- Open source - Transparent and auditable
- Learn DSP basics - Understand frequency, pitch, and sound waves
- Interactive visualizations - See waveforms in real-time
- STEM concepts - Age-appropriate explanations for each effect
- "Did you know?" facts - Fascinating audio science trivia
- Chipmunk - High-pitched, squeaky voice
- Deep Voice - Low, booming voice like a movie trailer
- Robot - Mechanical, synthetic sound
- Telephone - Old-fashioned phone call effect
- Echo - Canyon/hall reverb effect
- Alien - Otherworldly, modulated voice
- Mobile-first design - Works on phones, tablets, and computers
- Large buttons - Easy for all ages to use
- Keyboard navigation - Fully accessible
- QR code friendly - Share via QR code for classroom use
- Works offline - PWA with offline support
- EN / ES - English and Spanish UI
- Node.js 18+ and npm 9+
- Modern browser (Chrome 79+, Safari 14.1+, Firefox 76+, Edge 79+)
# Clone the repository
git clone https://github.com/yourspraveen/browser-voice-changer.git
cd browser-voice-changer
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:3000 in your browser.
# Build optimized production bundle
npm run build
# Preview production build
npm run previewbrowser-voice-changer/
├── public/ # Static assets
│ ├── icons/ # PWA icons
│ ├── samples/ # Pre-recorded demo audio (AI-generated voices)
│ └── manifest.json # PWA manifest
├── src/
│ ├── audio/ # Audio processing core
│ │ ├── effects/ # Effect implementations
│ │ ├── AudioCapture.ts
│ │ ├── AudioProcessor.ts
│ │ └── AudioExporter.ts
│ ├── visualization/ # Waveform and visualizations
│ ├── ui/
│ │ ├── components/ # React components
│ │ └── styles/ # CSS stylesheets
│ ├── state/ # State management
│ ├── hooks/ # React hooks
│ ├── i18n/ # EN/ES translations
│ ├── utils/ # Utility functions
│ ├── types/ # TypeScript types
│ ├── App.tsx # Root component
│ └── main.tsx # Entry point
├── tests/ # Unit tests (Vitest)
├── docs/ # Documentation
│ ├── ARCHITECTURE.md
│ ├── TECH_STACK.md
│ ├── DSP_SPECIFICATIONS.md
│ ├── DESIGN_SYSTEM.md
│ └── PROJECT_STATUS.md
└── package.json
# Run unit tests
npm test
# Run tests in watch mode
npm run test:watch
# Generate coverage report
npm run test:coverage# Lint code
npm run lint
# Fix linting issues
npm run lint:fix
# Format code
npm run format
# Type check
npm run type-checkComprehensive documentation is available in the docs/ directory:
- Architecture - System design and module specifications
- Tech Stack - Technology decisions and rationale
- DSP Specifications - Detailed audio effect implementations
- Design System - UI/UX guidelines and component styles
- Project Status - Current status and history
This application is designed for classroom demonstrations:
- No Setup Required - Students can access via web browser
- QR Code Access - Generate a QR code to the live demo
- Privacy Compliant - No data collection, FERPA friendly
- Offline Capable - Works without internet after first load
- Cross-Platform - Works on Chromebooks, iPads, laptops, and phones
- Physics: Sound waves, frequency, amplitude
- Math: Hertz (Hz), waveforms, ratios
- Computer Science: Digital signal processing, algorithms
- Engineering: Audio engineering, recording technology
Three AI-generated voice samples are included so students can experiment without a microphone:
- Samantha (US English) — "This is a demo voice. Try changing it with robot, echo, or telephone effects!"
- Daniel (British English) — "Hello there! I am a voice sample. Can you make me sound like a chipmunk?"
- Moira (Irish English) — "Testing, one two three! The voice changer turns any voice into something amazing."
| Browser | Minimum Version | Status |
|---|---|---|
| Chrome (desktop) | 79+ | ✅ Fully Supported |
| Edge | 79+ | ✅ Fully Supported |
| Safari (macOS) | 14.1+ | ✅ Fully Supported |
| Firefox | 76+ | ✅ Fully Supported |
| Safari (iOS) | 14.3+ | ✅ Supported |
| Chrome (iOS) | 79+ | ✅ Supported (uses WebKit) |
Note: All iOS browsers use WebKit under the hood and require iOS 14.3+ for MediaRecorder support. Recording uses audio/mp4 on iOS automatically.
- Framework: React 18 + TypeScript 5
- Build Tool: Vite 5
- Audio: Web Audio API + Tone.js v14
- Styling: CSS Modules + CSS Variables
- Testing: Vitest + jsdom
- PWA: vite-plugin-pwa + Workbox
- Deployment: GitHub Pages via GitHub Actions
See TECH_STACK.md for detailed technology decisions.
Contributions are welcome! Please see CONTRIBUTING.md for guidelines.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes
- Run tests (
npm test) - 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.
- Built with Tone.js for pitch-shifting effects
- Demo voices generated with macOS TTS (Samantha, Daniel, Moira)
- Inspired by educational STEM projects worldwide
- Documentation: See the
docs/folder - Issues: GitHub Issues
- Discussions: GitHub Discussions
- Basic recording functionality
- 6 core effects (Chipmunk, Deep Voice, Robot, Telephone, Echo, Alien)
- Waveform visualization
- Educational content with STEM explanations
- PWA support with offline caching
- AI-generated demo voice samples
- EN / ES language switcher
- iOS Safari compatibility
- GitHub Pages deployment
- Advanced visualizations (FFT, Spectrogram)
- More languages
- Teacher dashboard
- Printable worksheets
- Bundle Size: ~156KB gzipped (well under 500KB target)
- Initial Load: <3 seconds on 3G
- Lighthouse Score: >90 target
- Memory Usage: <100MB during recording
- Processing Latency: <200ms for effects
✅ Live at: yourspraveen.github.io/browser-voice-changer
Made with ❤️ for STEM education by yourspraveen.com