app-audioinput-demo

Demonstration apps for the cordova-plugin-audioinput v2.0 plugin, showcasing both Cordova and Capacitor implementations.

🎯 What's New in v2.0

This demo repository now includes two complete demo applications:

1. Cordova Demo (root directory) - Classic Cordova implementation
2. Capacitor Demo (capacitor-demo/) - Modern React + TypeScript implementation

Both demos showcase the same plugin features but with different architectures and technologies.

📦 Demo Apps

Cordova Demo (Traditional)

Location: Root directory Technologies: Vanilla JavaScript, HTML, CSS Platforms: Android, iOS, Browser

Features:

• 4 demo modes: Events, Web Audio, WAV, File Recording
• Updated to latest Cordova platforms (Android 14.0, iOS 7.1.1)
• Modern dark theme UI with CSS animations
• Memory leak fixes and performance improvements
• ES6+ JavaScript with arrow functions and modern syntax

Getting Started:

# Install dependencies
npm install

# Add platforms (versions will be pulled from package.json)
cordova platform add android
cordova platform add ios

# Or add specific versions
cordova platform add android@14.0.0
cordova platform add ios@7.1.1

# Run on Android
cordova run android

# Run on iOS
cordova run ios

Capacitor Demo (Modern)

Location: capacitor-demo/ Technologies: React 19, TypeScript 5, Vite 7, Capacitor 7 Platforms: Android, iOS, Web

Features:

• Modern React + TypeScript architecture
• Component-based demos with type safety
• Beautiful gradient UI with animations
• Vite for fast development and builds

Getting Started:

cd capacitor-demo

# Install dependencies
npm install

# Development mode
npm run dev

# Build and sync
npm run build
npx cap sync

# Open in Android Studio
npx cap open android

# Open in Xcode
npx cap open ios

🚀 Features Demonstrated

Both demo apps showcase:

1. Events Demo - Capture raw audio data and process with Web Audio API
2. Web Audio Demo - Direct AudioNode streaming to speakers
3. WAV Demo - Encode captured audio to WAV format
4. File Demo - Record and save audio files to device storage

📱 Supported Platforms

• Android 5.0+ (API 22+)
• iOS 13.0+
• Browser (limited features)

🔧 Plugin Features (v2.0)

• Real-time microphone capture
• Multiple audio sources (Default, Camcorder, Unprocessed, Voice Communication, etc.)
• Configurable sample rates and buffer sizes
• Web Audio API integration
• File recording with WAV encoding
• Permission handling
• TypeScript definitions (Capacitor)
• Promise-based API (Capacitor)
• Event-based API (Cordova)

📝 Changelog (v2.0)

Cordova Demo Updates

• ✅ Updated to cordova-plugin-audioinput v2.0.0
• ✅ Updated Android platform to 14.0.0 (from 7.0.0) - Targets Android 15/SDK 35
• ✅ Updated iOS platform to 7.1.1 (from 4.5.4)
• ✅ Updated cordova-plugin-file to 8.1.3
• ✅ Removed deprecated plugins (cordova-plugin-compat, cordova-plugin-splashscreen)
• ✅ Removed external CSS dependencies (W3.CSS)
• ✅ Fixed memory leaks in events and file demos
• ✅ Fixed typos in error messages
• ✅ Complete CSS overhaul with modern dark theme
• ✅ Modernized JavaScript with ES6+ syntax (const/let, arrow functions, template literals)
• ✅ Added visual feedback and status indicators
• ✅ Removed icon/splash screen configurations (simpler demo setup)

Capacitor Demo (New!)

• ✨ Brand new React + TypeScript demo app
• ✨ Modern component-based architecture
• ✨ Beautiful gradient UI design
• ✨ Type-safe AudioInput API
• ✨ Vite for fast development
• ✨ Ready for Android and iOS

🛠️ Development

Cordova Demo

The Cordova demo uses traditional web technologies and is located in the root directory:

www/
├── index.html           # Main menu
├── events-demo.html     # Events demo
├── webaudio-demo.html   # Web Audio demo
├── wav-demo.html        # WAV encoding demo
├── file-demo.html       # File recording demo
├── css/
│   └── app.css         # Enhanced styles
└── js/
    ├── events-demo.js
    ├── webaudio-demo.js
    ├── file-demo.js
    ├── wav-demo.js
    └── utils.js

Capacitor Demo

The Capacitor demo is a modern React app with TypeScript:

capacitor-demo/
├── src/
│   ├── App.tsx              # Main app with navigation
│   ├── App.css              # Modern gradient styles
│   ├── components/
│   │   ├── EventsDemo.tsx
│   │   ├── WebAudioDemo.tsx
│   │   ├── WavDemo.tsx
│   │   └── FileDemo.tsx
│   └── main.tsx
├── android/                 # Android platform
├── capacitor.config.ts      # Capacitor config
├── package.json
└── tsconfig.json

🤝 Contributing

This project is open-source, and contributions are welcome! Please ensure your changes maintain backward compatibility.

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

MIT License

👏 Credits

• Created by: @edimuj
• App icon: @richardbmx

Contributors

🔗 Links

• Plugin Repository
• Plugin Documentation
• Cordova Documentation
• Capacitor Documentation
• Issues