English | 日本語
Bit Voice Recorder is a simple and reliable web-based application for long-duration audio recording, playable and manageable directly in your browser. Built with React, TypeScript, and modern web technologies.
- 🎙️ High-quality audio recording using MediaRecorder API
- 📊 Real-time audio visualization with Web Audio API
- 💾 Local storage with IndexedDB (no server required)
▶️ Built-in audio player with progress control- 📱 Mobile support with Capacitor for iOS/Android
- 🎨 Modern UI with Tailwind CSS
- 🌙 Dark theme with custom brand colors
- ⬇️ Export recordings as audio files
- 🗑️ Delete recordings with confirmation
- 🌐 Multilingual support with automatic language detection and manual switching (English and Japanese)
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository:
git clone <repository-url>
cd bit-voice-recorder- Install dependencies (including internationalization libraries):
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
# Build for production
npm run build
# Preview the production build
npm run previewThe built files will be in the dist/ directory.
- Install iOS dependencies:
npm install @capacitor/ios
npx cap add ios- Build and sync:
npm run build
npx cap sync ios- Open in Xcode:
npx cap open ios- Install Android dependencies:
npm install @capacitor/android
npx cap add android- Build and sync:
npm run build
npx cap sync android- Open in Android Studio:
npx cap open androidbit-voice-recorder/
├── src/
│ ├── components/ # React components
│ │ ├── AudioPlayer.tsx # Audio playback component
│ │ ├── Recorder.tsx # Recording component
│ │ ├── RecordingList.tsx # Recording list component
│ │ └── icons/ # Icon components
│ ├── hooks/ # Custom React hooks
│ │ └── useRecorder.ts # Recording logic hook
│ ├── services/ # Service layer
│ │ └── db.ts # IndexedDB operations
│ │ └── i18n.ts # i18n configuration and initialization <!-- NEW -->
│ ├── App.tsx # Main application component
│ ├── index.tsx # Application entry point
│ └── types.ts # TypeScript interfaces
├── android/ # Capacitor Android project
├── ios/ # Capacitor iOS project
├── dist/ # Built files
├── public/ # Public assets
│ └── locales/ # Language translation files (en, ja) <!-- NEW -->
├── package.json
├── tsconfig.json
├── vite.config.ts
└── capacitor.config.ts
The app is configured for mobile deployment using Capacitor. Key settings in capacitor.config.ts:
- appId:
com.example.bitvoicerecorder - appName:
Bit Voice Recorder - webDir:
dist
The app requires microphone access. Upon first access, the browser will automatically prompt for microphone permission. If permission is denied or a device is not found, an informative message will be displayed.
- Web: Browser will prompt for microphone permission
- Mobile: Add microphone permissions to platform-specific configurations
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpx cap sync- Sync web assets to native projectsnpx cap run ios- Run on iOS device/simulatornpx cap run android- Run on Android device/emulatornpm test- Run unit testsnpm run test:all- Run all unit and integration tests
- Frontend: React 18, TypeScript
- Styling: Tailwind CSS
- Build Tool: Vite
- Mobile: Capacitor
- Audio APIs: MediaRecorder API, Web Audio API
- Storage: IndexedDB
- State Management: React Hooks
- Internationalization: i18next, react-i18next, i18next-browser-languagedetector
The app uses a custom dark theme with the following colors:
--brand-primary: #1E1F22 /* Main background */
--brand-secondary: #2B2D31 /* Card background */
--brand-accent: #5865F2 /* Accent color */
--brand-light: #F2F3F5 /* Primary text */
--brand-text: #D7DADD /* Secondary text */- Chrome/Edge 85+
- Firefox 79+
- Safari 14+
- Mobile browsers with MediaRecorder support
- Responsive design optimized for mobile devices
- Native mobile app packaging with Capacitor
- Touch-friendly controls
- Device microphone access
- Local-only storage: All recordings are stored locally in your browser
- No server communication: The app works completely offline
- No data collection: No personal data is transmitted or stored externally
- Secure permissions: Microphone access requires explicit user consent
If you encounter issues with microphone access:
- Ensure HTTPS is used (required for microphone access in some browsers).
- Check your browser's site permissions for microphone access.
- Verify that your microphone device is properly connected and enabled in your operating system settings.
- Try refreshing the page and granting permission again.
- Clear node_modules and reinstall:
rm -rf node_modules package-lock.json
npm install- Clear Vite cache:
npx vite --force- Sync Capacitor:
npx cap sync- Clean and rebuild:
npm run build
npx cap copy- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add some 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.
- React team for the excellent framework
- Vite team for the fast build tool
- Capacitor team for mobile app packaging
- Tailwind CSS for the styling framework
- i18next team for the internationalization framework
If you encounter any issues or have questions, please open an issue on GitHub.
Built with ❤️ using React, TypeScript, and modern web technologies.