Navigator mediadevices getUserMedia - Record Audio React

RecordAudio.js

/* 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,
      //Use Audios for List of Recordings
      //   audios:[],
      audio: {},
    };
    this.getMedia = this.getMedia.bind(this);
    this.startRecording = this.startRecording.bind(this);
  }

  async componentDidMount() {
    try {
      //   const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const stream = await this.getMedia({ audio: true });
      // 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);
        }
      };
    } catch (e) {
      console.log("error", e);
    }
  }

  getMedia = async (constraints) => {
    let stream = null;

    try {
      stream = await navigator.mediaDevices.getUserMedia(constraints);
      return stream;
      /* use the stream */
    } catch (err) {
      /* handle the error */
      console.log("error in getMedia", err);
    }
  };

  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({ audio: audioURL });
  }

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

  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 for List of Recordings
          {/* {audios.map((audioURL, i) => ( */}
          {/* <div key={`audio_${i}`}> */}
//           <audio controls style={{ width: 200 }} src={audioURL} />

          <audio controls style={{ width: 200 }} src={this.state.audio} />
          <div>
            <button onClick={() => this.deleteAudio(this.state.audio)}>
              Delete
            </button>
          </div>
          {/* </div> */}
          {/* ))} */}
        </div>
      </div>
    );
  }
}
export default RecordingAPI;