@cbmdf/react-voice-recorder/dist/index.modern.js

This (react-voice-recorder) is a JavaScript library for React Applicaiton which will be used to record voice as audio and download the same.

import React, { Component } from 'react';
import { FaMicrophone, FaStop } from 'react-icons/fa';

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  subClass.__proto__ = superClass;
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

var styles = {"recorder_library_box":"_1ceqH","recorder_box":"_2fG9h","recorder_box_inner":"_dt3-T","mic_icon":"_1dpop","reco_header":"_1lB9c","h2":"_2N9dq","close_icons":"_3-aC9","record_section":"_3bC73","duration_section":"_1YOWG","btn_wrapper":"_1Yplu","btn":"_1Pz2d","clear_btn":"_2gd2_","duration":"_f2DT8","recorder_page_box":"_17RTH","help":"_eV_dK","record_controller":"_qxztz","icons":"_2uz65","stop":"_1bSom","pause":"_3nQu5"};

var audioType = "audio/*";

var Recorder = /*#__PURE__*/function (_Component) {
  _inheritsLoose(Recorder, _Component);

  function Recorder(props) {
    var _this;

    _this = _Component.call(this, props) || this;
    _this.state = {
      time: {},
      seconds: 0,
      isPaused: false,
      recording: false,
      medianotFound: false,
      audios: [],
      audioBlob: null
    };
    _this.timer = 0;
    _this.startTimer = _this.startTimer.bind(_assertThisInitialized(_this));
    _this.countDown = _this.countDown.bind(_assertThisInitialized(_this));
    return _this;
  }

  var _proto = Recorder.prototype;

  _proto.handleAudioPause = function handleAudioPause(e) {
    e.preventDefault();
    clearInterval(this.timer);
    this.mediaRecorder.pause();
    this.setState({
      pauseRecord: true
    });
  };

  _proto.handleAudioStart = function handleAudioStart(e) {
    e.preventDefault();
    this.startTimer();
    this.mediaRecorder.resume();
    this.setState({
      pauseRecord: false
    });
  };

  _proto.startTimer = function startTimer() {
    this.timer = setInterval(this.countDown, 1000);
  };

  _proto.countDown = function countDown() {
    var seconds = this.state.seconds + 1;
    this.setState({
      time: this.secondsToTime(seconds),
      seconds: seconds
    });
  };

  _proto.secondsToTime = function secondsToTime(secs) {
    var hours = Math.floor(secs / (60 * 60));
    var divisor_for_minutes = secs % (60 * 60);
    var minutes = Math.floor(divisor_for_minutes / 60);
    var divisor_for_seconds = divisor_for_minutes % 60;
    var seconds = Math.ceil(divisor_for_seconds);
    var obj = {
      h: hours,
      m: minutes,
      s: seconds
    };
    return obj;
  };

  _proto.componentDidMount = function componentDidMount() {
    try {
      var _this3 = this;

      console.log(navigator.mediaDevices);
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

      var _temp2 = function () {
        if (navigator.mediaDevices) {
          return Promise.resolve(navigator.mediaDevices.getUserMedia({
            audio: true
          })).then(function (stream) {
            _this3.mediaRecorder = new MediaRecorder(stream);
            _this3.chunks = [];

            _this3.mediaRecorder.ondataavailable = function (e) {
              if (e.data && e.data.size > 0) {
                _this3.chunks.push(e.data);
              }
            };
          });
        } else {
          _this3.setState({
            medianotFound: true
          });

          console.log("Media Decives will work only with SSL.....");
        }
      }();

      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
    } catch (e) {
      return Promise.reject(e);
    }
  };

  _proto.startRecording = function startRecording(e) {
    e.preventDefault();
    this.chunks = [];
    this.mediaRecorder.start(10);
    this.startTimer();
    this.setState({
      recording: true
    });
  };

  _proto.stopRecording = function stopRecording(e) {
    clearInterval(this.timer);
    this.setState({
      time: {},
      seconds: 0
    });
    e.preventDefault();
    this.mediaRecorder.stop();
    this.setState({
      recording: false
    });
    this.saveAudio();
  };

  _proto.handleRest = function handleRest() {
    this.setState({
      time: {},
      seconds: 0,
      isPaused: false,
      recording: false,
      medianotFound: false,
      audios: [],
      audioBlob: null
    });
    this.props.handleRest(this.state);
  };

  _proto.saveAudio = function saveAudio() {
    var blob = new Blob(this.chunks, {
      type: audioType
    });
    var audioURL = window.URL.createObjectURL(blob);
    var audios = [audioURL];
    this.setState({
      audios: audios,
      audioBlob: blob
    });
    this.props.handleAudioUpload({
      url: audioURL,
      blob: blob,
      chunks: this.chunks,
      duration: this.state.time
    });
  };

  _proto.render = function render() {
    var _this4 = this;

    var _this$state = this.state,
        recording = _this$state.recording,
        audios = _this$state.audios,
        time = _this$state.time,
        medianotFound = _this$state.medianotFound;
    var _this$props = this.props,
        showUIAudio = _this$props.showUIAudio,
        audioURL = _this$props.audioURL;
    return /*#__PURE__*/React.createElement("div", {
      className: styles.recorder_library_box
    }, /*#__PURE__*/React.createElement("div", {
      className: styles.recorder_box
    }, /*#__PURE__*/React.createElement("div", {
      className: styles.recorder_box_inner
    }, !medianotFound ? /*#__PURE__*/React.createElement("div", {
      className: styles.record_section
    }, /*#__PURE__*/React.createElement("div", {
      className: styles.duration_section
    }, /*#__PURE__*/React.createElement("div", {
      className: styles.audio_section
    }, audioURL !== null && showUIAudio ? /*#__PURE__*/React.createElement("audio", {
      controls: true
    }, /*#__PURE__*/React.createElement("source", {
      src: audios[0],
      type: "audio/ogg"
    }), /*#__PURE__*/React.createElement("source", {
      src: audios[0],
      type: "audio/mpeg"
    })) : null), /*#__PURE__*/React.createElement("div", {
      className: styles.duration
    }, /*#__PURE__*/React.createElement("span", {
      className: styles.mins
    }, time.m !== undefined ? "" + (time.m <= 9 ? "0" + time.m : time.m) : "00"), /*#__PURE__*/React.createElement("span", {
      className: styles.divider
    }, ":"), /*#__PURE__*/React.createElement("span", {
      className: styles.secs
    }, time.s !== undefined ? "" + (time.s <= 9 ? "0" + time.s : time.s) : "00")), !recording ? /*#__PURE__*/React.createElement("p", {
      className: styles.help
    }, "Aperte no microfone para gravar") : null), !recording ? /*#__PURE__*/React.createElement("a", {
      onClick: function onClick(e) {
        return _this4.startRecording(e);
      },
      href: " #",
      className: styles.mic_icon
    }, /*#__PURE__*/React.createElement(FaMicrophone, null)) : /*#__PURE__*/React.createElement("div", {
      className: styles.record_controller
    }, /*#__PURE__*/React.createElement("a", {
      onClick: function onClick(e) {
        return _this4.stopRecording(e);
      },
      href: " #",
      className: styles.icons + " " + styles.stop
    }, /*#__PURE__*/React.createElement(FaStop, null)))) : /*#__PURE__*/React.createElement("p", {
      style: {
        color: "#fff",
        marginTop: 30,
        fontSize: 25
      }
    }, "Seems the site is Non-SSL"))));
  };

  return Recorder;
}(Component);

export { Recorder };
//# sourceMappingURL=index.modern.js.map