🎙️ Audio Recorder App

A full-featured, offline-first mobile audio recording application built with React Native and Expo. Record, manage, and play back high-quality audio recordings entirely offline with an intuitive and modern interface.

✨ Features

🎤 Recording

• High-quality audio recording (44.1kHz, 16-bit)
• Multiple format support (M4A, MP3, WAV)
• Pause/Resume functionality
• Real-time audio visualization
• Background recording support
• Audio level meter
• Recording quality presets

📱 Playback

• Smooth audio playback with seek controls
• Variable playback speed (0.5x - 2x)
• Skip forward/backward (10/30 seconds)
• Loop and repeat options
• Waveform visualization
• Lock screen controls
• Background playback

💾 Storage & Management

• 100% offline functionality
• SQLite database for metadata
• Local file system storage
• Search and filter recordings
• Sort by date, name, duration, or size
• Folder organization with categories
• Batch operations
• Storage space monitoring

🎨 User Experience

• Clean, intuitive interface
• Dark mode support
• Haptic feedback
• Accessibility features
• Responsive design
• Material design principles

📤 Sharing & Export

• Share recordings with other apps
• Export to device storage
• Save to media library
• Multiple format export options

📋 Requirements

• Node.js 18+
• npm or yarn
• Expo CLI
• iOS Simulator (macOS) or Android Emulator
• Physical device for best testing experience

🚀 Getting Started

Installation

1. Clone the repository

   git clone https://github.com/yourusername/audio-recorder-app.git
   cd audio-recorder-app

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   npx expo start

4. Run on your device

   • Scan the QR code with Expo Go app (iOS/Android)
   • Press i for iOS simulator
   • Press a for Android emulator

First Launch

On first launch, the app will request the following permissions:

• Microphone - Required for audio recording
• Media Library (optional) - For saving recordings to your device

📦 Project Structure

audio-recorder-app/
├── App.tsx                      # App entry point
├── app.json                     # Expo configuration
├── package.json                 # Dependencies
├── tsconfig.json               # TypeScript configuration
├── src/
│   ├── components/             # Reusable UI components
│   │   ├── recorder/          # Recording-related components
│   │   ├── player/            # Playback-related components
│   │   └── common/            # Shared components
│   ├── screens/               # App screens
│   │   ├── RecordScreen.tsx
│   │   ├── RecordingsListScreen.tsx
│   │   ├── PlaybackScreen.tsx
│   │   └── SettingsScreen.tsx
│   ├── services/              # Business logic
│   │   ├── audioRecorder.ts
│   │   ├── audioPlayer.ts
│   │   └── audioProcessor.ts
│   ├── storage/               # Data persistence
│   │   ├── database.ts        # SQLite operations
│   │   ├── fileManager.ts     # File system operations
│   │   └── settingsStorage.ts # Settings management
│   ├── hooks/                 # Custom React hooks
│   ├── navigation/            # Navigation configuration
│   ├── context/               # React Context providers
│   ├── types/                 # TypeScript type definitions
│   ├── utils/                 # Helper functions
│   ├── constants/             # App constants
│   └── assets/                # Images, icons, fonts
└── assets/                    # Expo assets (root level)

🔧 Configuration

Audio Recording Settings

Default audio recording configuration can be modified in src/constants/audioConfig.ts:

export const AUDIO_CONFIG = {
  isMeteringEnabled: true,
  android: {
    extension: '.m4a',
    outputFormat: Audio.RECORDING_OPTION_ANDROID_OUTPUT_FORMAT_MPEG_4,
    audioEncoder: Audio.RECORDING_OPTION_ANDROID_AUDIO_ENCODER_AAC,
    sampleRate: 44100,
    numberOfChannels: 2,
    bitRate: 128000,
  },
  ios: {
    extension: '.m4a',
    outputFormat: Audio.RECORDING_OPTION_IOS_OUTPUT_FORMAT_MPEG4AAC,
    audioQuality: Audio.RECORDING_OPTION_IOS_AUDIO_QUALITY_HIGH,
    sampleRate: 44100,
    numberOfChannels: 2,
    bitRate: 128000,
    linearPCMBitDepth: 16,
    linearPCMIsBigEndian: false,
    linearPCMIsFloat: false,
  },
};

App Configuration

Main app settings are in app.json. Key configurations include:

• App name and slug
• Version and build numbers
• Splash screen and icon
• Permissions
• Platform-specific settings

🛠️ Development

Available Scripts

# Start development server
npm start

# Start with cleared cache
npm start -- --clear

# Run on iOS
npm run ios

# Run on Android
npm run android

# Run tests
npm test

# Type check
npm run type-check

# Lint code
npm run lint

Key Technologies

• React Native - Cross-platform mobile framework
• Expo - Development platform and toolchain
• TypeScript - Type-safe JavaScript
• expo-av - Audio recording and playback
• expo-file-system - File management
• expo-sqlite - Local database
• React Navigation - Navigation library
• React Native Paper - UI component library
• AsyncStorage - Key-value storage
• NetInfo - Network status detection

📱 Building for Production

Using EAS Build

1. Install EAS CLI

   npm install -g eas-cli

2. Login to Expo

   eas login

3. Configure build

   eas build:configure

4. Build for iOS

   eas build --platform ios

5. Build for Android

   eas build --platform android

6. Build APK for testing

   eas build -p android --profile preview

Local Builds

For local builds without EAS:

# iOS (macOS only)
npx expo run:ios --configuration Release

# Android
npx expo run:android --variant release

🔄 Continuous Integration (CI/CD)

GitHub Actions Workflow

The repository includes an automated build workflow (.github/workflows/android-build.yml) that:

• ✅ Runs type checking with TypeScript
• ✅ Executes all tests
• ✅ Performs code linting
• ✅ Generates JavaScript bundle with verification
• ✅ Builds Android APK automatically with error checking
• ✅ Verifies APK was created successfully
• ✅ Uploads APK as a downloadable artifact

The workflow includes verification steps to ensure:

• JavaScript bundle is created before building
• Gradle build completes successfully
• APK file exists at the expected location
• Build failures are caught with detailed error messages

When Builds Are Triggered

The workflow automatically runs on:

• Pushes to main or develop branches
• Pull requests to main or develop branches
• Git tags (e.g., v1.0.0, v1.0.1)
• Manual trigger via GitHub Actions UI

How to Download Build Artifacts

1. Go to the Actions tab in the GitHub repository
2. Click on the workflow run you're interested in
3. Scroll to the Artifacts section at the bottom
4. Download the app-release artifact (APK file)
5. Extract the ZIP file to get the release APK

Installing the APK on Android

1. Download the APK artifact from GitHub Actions
2. Extract the ZIP file to get app-release.apk
3. Transfer the APK to your Android device
4. Enable Install from Unknown Sources in device settings
5. Tap the APK file to install
6. Grant permissions when prompted

Note: The release APK is unsigned. For distribution, you'll need to sign it with your keystore.

Manual Build Trigger

To manually trigger a build:

1. Go to Actions tab in GitHub
2. Select Android Build workflow
3. Click Run workflow button
4. Select the branch to build
5. Click Run workflow to start

Local Android Build

To build locally without GitHub Actions:

# Generate native Android project
npx expo prebuild --platform android --clean

# Create assets directory
mkdir -p android/app/src/main/assets

# Generate JS bundle and assets (for release builds)
npx expo export:embed \
  --platform android \
  --dev false \
  --bundle-output android/app/src/main/assets/index.android.bundle \
  --assets-dest android/app/src/main/res

# Build release APK
cd android
./gradlew assembleRelease

# APK location: android/app/build/outputs/apk/release/app-release.apk

# Or build debug APK for testing (bundle generation not required)
./gradlew assembleDebug
# APK location: android/app/build/outputs/apk/debug/app-debug.apk

Note: For release builds, the JS bundle must be generated before running assembleRelease to ensure the app can run standalone without the Metro development server.

🧪 Testing

Running Tests

# Run all tests
npm test

# Run tests in watch mode
npm test -- --watch

# Run tests with coverage
npm test -- --coverage

Testing on Physical Devices

1. Install Expo Go app on your device
2. Ensure device is on same WiFi network
3. Scan QR code from terminal
4. Grant necessary permissions when prompted

🐛 Troubleshooting

Common Issues

Audio not recording:

• Check microphone permissions in device settings
• Ensure no other app is using the microphone
• Try restarting the app

Playback issues:

• Check if file exists in storage
• Verify file format is supported
• Check device volume settings

Build errors:

• Clear cache: npx expo start --clear
• Reinstall dependencies: rm -rf node_modules && npm install
• Clear Expo cache: npx expo start -c

Permission denied:

• Check app permissions in device settings
• Re-request permissions from settings screen
• Reinstall the app

Debug Mode

To enable debug logging, set the following in your environment:

// Add to App.tsx
if (__DEV__) {
  console.log('Debug mode enabled');
}

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

Development Guidelines

• Follow TypeScript best practices
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed
• Follow the existing code style

👥 Authors

• Your Name - @yourhandle

🙏 Acknowledgments

• Expo team for the amazing development platform
• React Native community for continuous support
• Contributors who help improve this app

📞 Support

For support, email support@yourapp.com or open an issue on GitHub.

🗺️ Roadmap

• Cloud sync functionality
• Audio editing features (trim, merge)
• Voice-to-text transcription
• Recording templates and presets
• Audio effects and filters
• Folder sharing and collaboration
• Widget support
• Apple Watch integration
• Web version

📊 Performance

• App size: ~25MB (varies by platform)
• Cold start: <3 seconds
• Recording latency: <100ms
• Supports recordings up to 4 hours
• Efficient battery usage during recording

🔒 Privacy

This app:

• ✅ Works 100% offline
• ✅ No data collection or analytics
• ✅ No third-party tracking
• ✅ All recordings stored locally
• ✅ No cloud storage required
• ✅ Open source and transparent

---

Made with ❤️ using React Native and Expo