https://github.com/humpherson/audio-recorder-app

A browser-based audio recorder using the MediaRecorder API with real-time uploads to Azure Blob Storage. Supports cross-browser compatibility, automatic MIME type detection, and resilient chunked uploads with retry logic. Includes seamless playback and download of recordings, ideal for modern web and cloud applications. 🚀
https://github.com/humpherson/audio-recorder-app

html5 mediarecorder mediarecorder-api postcss react react-dom tailwindcss vite

Last synced: 2 days ago
JSON representation

A browser-based audio recorder using the MediaRecorder API with real-time uploads to Azure Blob Storage. Supports cross-browser compatibility, automatic MIME type detection, and resilient chunked uploads with retry logic. Includes seamless playback and download of recordings, ideal for modern web and cloud applications. 🚀

• Host: GitHub
• URL: https://github.com/humpherson/audio-recorder-app
• Owner: humpherson
• Created: 2024-12-09T11:34:53.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-12-09T12:06:29.000Z (about 2 months ago)
• Last Synced: 2024-12-09T12:37:10.825Z (about 2 months ago)
• Topics: html5, mediarecorder, mediarecorder-api, postcss, react, react-dom, tailwindcss, vite
• Language: JavaScript
• Homepage:
• Size: 54.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Audio Recorder App

A powerful, browser-based audio recorder app designed to capture and save audio directly to Azure Blob Storage.

## Description

The Audio Recorder App allows users to record audio, pause/resume recordings, and save audio data in real-time to Azure Blob Storage. It is designed for flexibility and extensibility, making it easy to adapt for web and native platforms like Android and iOS.

## Features

- Record audio directly from the browser or Android device

- Pause and resume recordings seamlessly

- Real-time upload of audio chunks to Azure Blob Storage

- Retry logic for resilient uploads

- Cross-platform support (web, Android and iOS)

- Supports `.webm` and `.mp4` formats

- Designed for integration into larger systems or standalone use

## Getting Started

### Prerequisites

1.  Node.js (v16 or higher) and npm installed.

2.  Android Studio (for Android builds).

3.  Azure Storage account with configured CORS rules.

4.  Capacitor CLI installed globally:

    `npm install -g @capacitor/cli`

### Installation

1.  Clone the repository:

    `git clone https://github.com/your-username/audio-recorder-app.git`

    `cd audio-recorder-app`

2.  Install dependencies:

    `npm install`

3.  Configure environment variables:

- Create a `.env` file in the project root.

- Add the following: `VITE_AZURE_BLOB_SAS_URL=`

### Development

1.  Start the development server:

    `npm run dev`

2.  Open the app in your browser:

    `http://localhost:5173`

### Building

#### Web App

1.  Build the production version:

    `npm run build`

2.  The built assets will be in the `dist` folder.

#### **Android App**

1.  Add the Android platform (if not already added):

    `npx cap add android`

2.  Sync the project:

    `npm run build`

    

    `npx cap copy`

    

    `npx cap sync android`

4.  Open the Android project in Android Studio:

    `npx cap open android`

5.  Build the APK:

    - In Android Studio, go to **Build > Build Bundle(s)/APK(s) > Build APK(s)**.

    - Locate the APK in `android/app/build/outputs/apk/debug/`

6.  Share and install the APK on your Android device.

## Contributing

Contributions are welcome! To contribute:

1.  Fork the repository.

2.  Create a new branch for your feature/bugfix:

    `git checkout -b feature/your-feature-name`

3.  Commit your changes and push to your forked repository.

4.  Open a pull request to the main repository.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.