How to Implement Audio Recording in a React Application

Audio recording in web applications has become increasingly popular, and React, being a widely-used JavaScript library, provides a seamless way to integrate audio recording capabilities. In this comprehensive guide, we'll explore how to implement audio recording in a React application using the MediaRecorder API.

Setting up the React Project

To get started, create a new React project using Create React App or your preferred setup. Open your terminal and run the following commands:

npx create-react-app react-audio-recording
cd react-audio-recording

Implementing Audio Recording

1. Accessing User Media

Firstly, we need to request access to the user's microphone. Create a new component, let's call it AudioRecorder.js, and include the following code:

import React, { useRef, useState } from 'react';
const AudioRecorder = () => {
  const mediaStream = useRef(null);
  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia(
        { audio: true }
      );
      mediaStream.current = stream;
    } catch (error) {
      console.error('Error accessing microphone:', error);
    }
  };
  return (
    <div>
      <button onClick={startRecording}>Start Recording</button>
    </div>
  );
};
export default AudioRecorder;

In this code, we use the getUserMedia API to request access to the user's microphone.

2. Implementing MediaRecorder

Next, let's integrate the MediaRecorder API for capturing audio. Add the following code to the AudioRecorder.js component:

import React, { useRef, useState } from 'react';
const AudioRecorder = () => {
  const [recordedUrl, setRecordedUrl] = useState('');
  const mediaStream = useRef(null);
  const mediaRecorder = useRef(null);
  const chunks = useRef([]);
  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia(
        { audio: true }
      );
      mediaStream.current = stream;
      mediaRecorder.current = new MediaRecorder(stream);
      mediaRecorder.current.ondataavailable = (e) => {
        if (e.data.size > 0) {
          chunks.current.push(e.data);
        }
      };
      mediaRecorder.current.onstop = () => {
        const recordedBlob = new Blob(
          chunks.current, { type: 'audio/webm' }
        );
        const url = URL.createObjectURL(recordedBlob);
        setRecordedUrl(url);
        chunks.current = [];
      };
      mediaRecorder.current.start();
    } catch (error) {
      console.error('Error accessing microphone:', error);
    }
  };
  const stopRecording = () => {
    if (mediaRecorder.current && mediaRecorder.current.state === 'recording') {
      mediaRecorder.current.stop();
    }
    if (mediaStream.current) {
      mediaStream.current.getTracks().forEach((track) => {
        track.stop();
      });
    }
  };
  return (
    <div>
      <audio controls src={recordedUrl} />
      <button onClick={startRecording}>Start Recording</button>
      <button onClick={stopRecording}>Stop Recording</button>
    </div>
  );
};
export default AudioRecorder;

Here, we've added the logic to start and stop recording using the MediaRecorder API. The recorded audio chunks are stored in the chunks array, and when recording stops, they are combined into a Blob, and the audio element's source is updated. The recorded audio will be played back using the <audio> element.

Congratulations! You've successfully implemented audio recording in a React application using the MediaRecorder API. This comprehensive guide covers accessing user media, integrating MediaRecorder, and handling the recorded audio. Feel free to enhance the functionality by adding features like saving recordings, applying filters, or integrating with a backend for storage. Explore the possibilities and make your React audio recording application even more robust!