Media devices in reactJS to record audio

by vsasikalabe Updated: Feb 16, 2023

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

Code:

In this solution we use the React library.

Use getusermedia media devices in reactJS to record audio

JavaScriptLines of Code : 102License : Strong Copyleft (CC BY-SA 4.0)

Dependent Libraries :

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

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

  async componentDidMount() {
    const stream = await navigator.mediaDevices.getUserMedia({audio: true});
    // show it to user
    this.audio.src = window.URL.createObjectURL(stream);
    this.audio.play();
    // 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 (e.data && e.data.size > 0) {
        this.chunks.push(e.data);
      }
    };
  }

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

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

  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]);
    this.setState({audios});
  }

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

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

    return (
      <div className="camera">
        <audio


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

Instructions

Follow the steps carefully to get the output easily.

Install the Node.js and React on your IDE(preferable Visual Studio Code).
Create React Application using npx create-react-app foldername.
cd foldername.
Open the folder in IDE.
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.
Open the terminal from IDE.
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.

The solution is created in VS Code 1.73.1 version.
The solution is tested on Nodejs 16.14.2 version.
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

100082

Version:v5.0.1

License: Permissive (MIT)

Set up a modern web app by running one command.

Support

Quality

Security

License

Reuse

create-react-appby facebook

JavaScript 100082 Version:v5.0.1 License: Permissive (MIT)

Set up a modern web app by running one command.

Support

Quality

Security

License

Reuse

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

Support

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

See similar Kits and Libraries

Open Weaver – Develop Applications Faster with Open Source

Terms
Privacy policy

Media devices in reactJS to record audio

Code:

Instructions

Environment Tested

Dependent Libraries

Support

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow