Audio Recorder in React

This project provides an audio recording functionality using the MediaRecorder API. It allows users to record audio from their microphone, play it back, and download the recorded file.

[Demo]

Features

• Request microphone access and record audio.
• Start and stop the recording process.
• Play the recorded audio.
• Download the recording as a file.

Project Structure

• AudioRecorder.jsx: The main component for recording and handling audio functionality.
• Styled: Contains the styled-components for the layout of the recorder interface.

Dependencies

• @phosphor-icons/react: For icons like Microphone and Record.
• @emotion/styled: For styling the components.
• antd: For UI components like Buttons and Typography.

Usage

Component Implementation

You can use the AudioRecorder component by importing it into your React project.

import AudioRecorder from "./AudioRecorder";

function App() {
  return (
    <div className="App">
      <AudioRecorder />
    </div>
  );
}

export default App;

How It Works

1. Get Microphone Permission: When the user clicks "Get Microphone", the app requests permission to access the microphone using navigator.mediaDevices.getUserMedia.
2. Start Recording: Once permission is granted, the "Start Recording" button appears. Clicking it will start the recording process using MediaRecorder.
3. Stop Recording: While recording, a "Stop Recording" button is available. Clicking it stops the recording, creates a Blob from the audio data, and sets it as the source for an
4. Download: After the recording is complete, users can download the audio file by clicking the provided download link.

Styling

The application uses styled-components for styling the UI. Below are the key styles:

const Styled = {
  Main: styled.main`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  `,
  AudioRecorderContainer: styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px;
  `,
};