🎤 Sound Analyzer App

A modern, cross-platform audio recording and analysis application built with React Native and Expo. This app provides real-time audio recording, playback, and download functionality with a beautiful, animated user interface.

✨ Features

• 🎵 Real-time Audio Recording - Native MediaRecorder API for high-quality audio capture
• 🎧 Instant Playback - Play recorded audio immediately with HTML5 Audio API
• 📥 Download Recordings - Save audio files in WebM format
• 🎨 Beautiful UI - Dark gradient theme with animated recording indicators
• 📱 Cross-Platform - Works on Web, iOS, and Android
• 🔒 Privacy First - All recording happens locally, no data sent to servers
• 🎯 User-Friendly - Simple, intuitive interface with clear visual feedback
• ⚡ Performance Optimized - Native browser APIs for maximum efficiency

🚀 Quick Start

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Expo CLI

Installation

1. Clone the repository:

   git clone https://github.com/4mkbs/Sound-Analyzer-App.git
   cd Sound-Analyzer-App

2. Install dependencies:

   npm install

3. Start the development server:

   npm run web    # For web development
   npm run android # For Android
   npm run ios     # For iOS

4. Open in browser:

   • Web: http://localhost:19006
   • Scan QR code with Expo Go app for mobile

🎯 Usage

Recording Audio

1. Click the "Start Recording" button
2. Allow microphone permissions when prompted
3. Watch the pulsing animation while recording
4. Click "Stop Recording" when finished

Playing Back

1. After recording, click the "Play" button
2. Listen to your recorded audio
3. Use "Stop" to pause playback

Downloading

1. Click "Download" to save your recording
2. Files are saved as .wav format
3. Compatible with all major audio players

🛠️ Technology Stack

Frontend Framework

• React Native - Cross-platform mobile development
• Expo - Development platform and toolchain
• React - UI component library

Audio APIs

• MediaRecorder API - Native browser recording
• getUserMedia API - Microphone access
• HTML5 Audio API - Audio playback
• Web Audio API - Audio processing

Styling

• CSS3 - Custom animations and styling
• React Native StyleSheet - Component styling
• Flexbox - Responsive layouts

📁 Project Structure

Sound-Analyzer-App/
├── App.js                 # Main application entry point
├── app.json              # Expo configuration
├── package.json          # Dependencies and scripts
├── babel.config.js       # Babel configuration
├── assets/               # Static assets (icons, images)
├── component/
│   ├── Audio.jsx         # Main audio component
│   ├── AudioStyles.css   # Audio-specific styles
│   └── GlobalStyles.css  # Global application styles
└── Readme.md            # This file

🎨 UI Components

Audio Component (Audio.jsx)

• Recording Controls - Start/Stop recording buttons
• Playback Controls - Play/Pause audio buttons
• Status Display - Real-time recording status
• Error Handling - User-friendly error messages
• Visual Feedback - Animated recording indicators

Styling (AudioStyles.css)

• Wave Animation - Pulsing recording indicator
• Gradient Themes - Modern dark color scheme
• Responsive Design - Works on all screen sizes
• Smooth Transitions - Animated state changes

🔧 Configuration

Audio Settings

The app uses optimized audio settings for best quality:

{
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100,
  }
}

MediaRecorder Options

{
  mimeType: "audio/webm;codecs=opus";
}

🌐 Browser Compatibility

Browser	Recording	Playback	Download
Chrome 66+	✅	✅	✅
Firefox 29+	✅	✅	✅
Safari 14.1+	✅	✅	✅
Edge 79+	✅	✅	✅

📱 Mobile Support

• iOS Safari - Full support (iOS 14.3+)
• Android Chrome - Full support
• Expo Go App - Complete functionality
• PWA Ready - Can be installed as web app

🔒 Privacy & Permissions

Required Permissions

• Microphone Access - For audio recording
• Storage Access - For downloading files (automatic)

Privacy Features

• Local Processing - All audio stays on your device
• No Cloud Storage - Files not uploaded anywhere
• Permission Control - Users control microphone access
• Temporary URLs - Audio blobs cleaned up automatically

🚨 Troubleshooting

Common Issues

1. "Microphone permission denied"

   • Click the microphone icon in browser address bar
   • Select "Allow" for microphone access
   • Refresh the page

2. "No audio recorded"

   • Check if microphone is connected
   • Try a different browser
   • Ensure microphone isn't used by other apps

3. "Recording not supported"

   • Update your browser to latest version
   • Try Chrome or Firefox
   • Check if HTTPS is enabled

Debug Mode

Enable detailed logging by opening browser console (F12) to see:

• Recording status messages
• Audio blob information
• Error details
• Performance metrics

🔄 Development

Running in Development

# Start Expo development server
npm start

# For specific platforms
npm run web      # Web development
npm run android  # Android emulator
npm run ios      # iOS simulator

Building for Production

# Build web version
expo build:web

# Build mobile apps
expo build:android
expo build:ios

🤝 Contributing

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

📝 License

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

🙏 Acknowledgments

• MediaRecorder API - Modern browser audio recording
• Expo Team - Cross-platform development platform
• React Native Community - UI components and tools
• Web Audio Community - Audio processing standards

📧 Support

For support, create an issue on GitHub.

🔮 Roadmap

• Audio Visualization - Real-time waveform display
• Audio Effects - Echo, reverb, and filters
• Multi-format Export - MP3, WAV, OGG support
• Cloud Storage - Optional cloud backup
• Voice Analysis - Pitch and frequency analysis
• Batch Processing - Multiple file handling

---

Made with ❤️ by 4mkbs

⭐ Star this repo if you found it helpful! ⭐