Media devices in reactJS to record audio

share link

by vsasikalabe dot icon Updated: Feb 16, 2023

technology logo
technology logo

Solution Kit Solution Kit  

A media device is a gadget that can record, transmit, or capture audio or video. Media devices are often accessed in the context of web development using APIs like the Web Audio API. Audio recording is a typical application for media devices. A media device might be used to record a voice memo, a podcast, or an audio message, for instance. Additionally, media devices can be used to broadcast music or video to another device or server, record video, or both.  

To record audio using a media device in a web application, you will typically need to use a method like navigator.mediaDevices.getUserMedia().  

  • navigator.mediaDevices.getUserMedia(): This function asks the user for permission to access their media input devices, including their audio, video, and display. A MediaStream object, which stands for a stream of media material, is returned as a Promise.  
  • getUserMedia(): This method takes an object with constraints that specify what type of media you want to access (e.g., video, audio) and returns a Promise that resolves with a MediaStream object if the user grants permission, or rejects with an error if the user denies permission or if there is an error getting the media.  

For more information about media devices in ReactJs to record audio, refer to the code given below.  

Preview of the output that you will get on running this code from your IDE


In this solution we use the React library.

/* eslint-env browser */
import React from 'react';
import Bird from "./sounds/birds.mp3"
const audioType = 'audio/*';

class RecordingAPI extends React.Component {
  constructor(props) {
    this.state = {
      recording: false,
      audios: [],

  async componentDidMount() {
    const stream = await navigator.mediaDevices.getUserMedia({audio: true});
    // show it to user = window.URL.createObjectURL(stream);;
    // init recording
    this.mediaRecorder = new MediaRecorder(stream);
    // init data storage for video chunks
    this.chunks = [];
    // listen for data from media recorder
    this.mediaRecorder.ondataavailable = e => {
      if ( && > 0) {

  startRecording(e) {
    // wipe old data chunks
    this.chunks = [];
    // start recorder with 10ms buffer
    // say that we're recording
    this.setState({recording: true});

  stopRecording(e) {
    // stop the recorder
    // say that we're not recording
    this.setState({recording: false});
    // save the video to memory

  saveAudio() {
    // convert saved chunks to blob
    const blob = new Blob(this.chunks, {type: audioType});
    // generate video url from blob
    const audioURL = window.URL.createObjectURL(blob);
    // append videoURL to list of saved videos for rendering
    const audios = this.state.audios.concat([audioURL]);

  deleteAudio(audioURL) {
    // filter out current videoURL from the list of saved videos
    const audios = this.state.audios.filter(a => a !== audioURL);

  render() {
    const {recording, audios} = this.state;

    return (
      <div className="camera">

          style={{width: 400}}
          ref={a => {
   = a;
         <p>Audio stream not available. </p>
          {!recording && <button onClick={e => this.startRecording(e)}>Record</button>}
          {recording && <button onClick={e => this.stopRecording(e)}>Stop</button>}
          <h3>Recorded audios:</h3>
          {, i) => (
            <div key={`audio_${i}`}>
              <audio controls style={{width: 200}} src={audioURL}   />
                <button onClick={() => this.deleteAudio(audioURL)}>Delete</button>
export default RecordingAPI


Follow the steps carefully to get the output easily.

  1. Install the Node.js and React on your IDE(preferable Visual Studio Code).
  2. Create React Application using npx create-react-app foldername.
  3. cd foldername.
  4. Open the folder in IDE.
  5. Copy the code using "copy" button above and paste it in App.js file(remove the earlier code from App.js).You may delete the bird import statement.
  6. Open the terminal from IDE.
  7. npm start to run the file.

I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.

I found this code snippet by searching for ' Media devices in reactJS to record audio 'in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in VS Code 1.73.1 version.
  2. The solution is tested on Nodejs 16.14.2 version.
  3. react 18.2.0 version.

Using this solution, we are able to do media devices in reactJS to record audio with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to do Media devices in reactJS to record audio.

Dependent Libraries

create-react-appby facebook

JavaScript doticonstar image 100082 doticonVersion:v5.0.1doticon
License: Permissive (MIT)

Set up a modern web app by running one command.


            create-react-appby facebook

            JavaScript doticon star image 100082 doticonVersion:v5.0.1doticon License: Permissive (MIT)

            Set up a modern web app by running one command.

                      You can search for any dependent library on kandi like 'react'.


                      1. For any support on kandi solution kits, please use the chat
                      2. For further learning resources, visit the Open Weaver Community learning page.

                      See similar Kits and Libraries