react-mic/dist/index.js

Record audio from your microphone and display as a sound oscillation

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("prop-types"),require("react")):"function"==typeof define&&define.amd?define([,],t):"object"==typeof exports?exports.ReactMic=t(require("prop-types"),require("react")):e.ReactMic=t(e.PropTypes,e.React)}(window,(function(e,t){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){e.exports=n(3)},function(e,t,n){"use strict";n.r(t);var r,o,i,a=n(1),c=n.n(a),u=n(0),s=new(window.AudioContext||window.webkitAudioContext),l=s.createAnalyser(),f={getAudioContext:function(){return s},getAnalyser:function(){return l},resetAnalyser:function(){l=s.createAnalyser()},decodeAudioData:function(){s.decodeAudioData(audioData).then((function(e){}))}};function p(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var d,v,y,h,b,g,m,S,w=[];navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;var C,R=function(){function e(t,n,a,c,u,s){var l,p,C,R=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),C=function(){if(d=Date.now(),i){if(o&&"suspended"===o.state&&o.resume(),i&&"paused"===i.state)return void i.resume();o&&i&&"inactive"===i.state&&(i.start(10),o.createMediaStreamSource(v).connect(r),h&&h())}else navigator.mediaDevices?(console.log("getUserMedia supported."),navigator.mediaDevices.getUserMedia(S).then((function(e){v=e,i=MediaRecorder.isTypeSupported(y.mimeType)?new MediaRecorder(e,y):new MediaRecorder(e),h&&h(),i.onstop=R.onStop,i.ondataavailable=function(e){w.push(e.data),m&&m(e.data)},(o=f.getAudioContext()).resume().then((function(){r=f.getAnalyser(),i.start(10),o.createMediaStreamSource(v).connect(r)}))}))):alert("Your browser does not support audio recording")},(p="startRecording")in(l=this)?Object.defineProperty(l,p,{value:C,enumerable:!0,configurable:!0,writable:!0}):l[p]=C;var A=s.echoCancellation,x=s.autoGainControl,M=s.noiseSuppression,P=s.channelCount;h=t,b=n,g=a,m=c,y=u,S={audio:{echoCancellation:A,autoGainControl:x,noiseSuppression:M,channelCount:P},video:!1}}var t,n,a;return t=e,(n=[{key:"stopRecording",value:function(){i&&"inactive"!==i.state&&(i.stop(),v.getAudioTracks().forEach((function(e){e.stop()})),i=null,f.resetAnalyser())}},{key:"onStop",value:function(){var e=new Blob(w,{type:y.mimeType});w=[];var t={blob:e,startTime:d,stopTime:Date.now(),options:y,blobURL:window.URL.createObjectURL(e)};b&&b(t),g&&g(t)}}])&&p(t.prototype,n),a&&p(t,a),e}(),A={create:function(e){var t=f.getAudioContext(),n=f.getAnalyser();if(void 0===C){var r=t.createMediaElementSource(e);r.connect(n),C=r}n.connect(t.destination)}},x={visualizeSineWave:function(e,t,n,r,o,i){var a=f.getAnalyser(),c=a.fftSize,u=new Uint8Array(c);e.clearRect(0,0,n,r),function s(){requestAnimationFrame(s),(a=f.getAnalyser()).getByteTimeDomainData(u),e.fillStyle=o,e.fillRect(0,0,n,r),e.lineWidth=2,e.strokeStyle=i,e.beginPath();for(var l=1*n/c,p=0,d=0;d<c;d++){var v=u[d]/128*r/2;0===d?e.moveTo(p,v):e.lineTo(p,v),p+=l}e.lineTo(t.width,t.height/2),e.stroke()}()},visualizeFrequencyBars:function(e,t,n,r,o,i){var a=this,c=f.getAnalyser();c.fftSize=256;var u=c.frequencyBinCount,s=new Uint8Array(u);e.clearRect(0,0,n,r),function t(){requestAnimationFrame(t),(c=f.getAnalyser()).getByteFrequencyData(s),e.fillStyle=o,e.fillRect(0,0,n,r);for(var l,p=n/u*2.5,d=0,v=0;v<u;v++){l=s[v];a.hexToRgb(i);e.fillStyle=i,e.fillRect(d,r-l/2,p,l/2),d+=p+1}}()},visualizeFrequencyCircles:function(e,t,n,r,o,i){var a=f.getAnalyser();a.fftSize=32;var c=a.frequencyBinCount,u=new Uint8Array(c);e.clearRect(0,0,n,r),function t(){requestAnimationFrame(t),(a=f.getAnalyser()).getByteFrequencyData(u);for(var s=new Uint8Array(c/3),l=0;l<c;l+=3){for(var p=0,d=0;d<3;d++)p+=u[l+d];s[l/3]=p/3}e.clearRect(0,0,n,r),e.beginPath(),e.arc(n/2,r/2,Math.min(r,n)/2,0,2*Math.PI),e.fillStyle=o,e.fill();var v=Math.min(r,n)/2/s.length;e.strokeStyle=i;for(var y=0;y<s.length;y++){e.beginPath();var h=v*y+v*(s[y]/128);e.arc(n/2,r/2,h,0,2*Math.PI),e.stroke()}}()},hexToRgb:function(e){var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}};function M(e){return(M="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function P(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function T(e){return(T=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function j(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function k(e,t){return(k=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var O=function(e){function t(e){var n,r,o,i,a,u;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),r=this,o=T(t).call(this,e),n=!o||"object"!==M(o)&&"function"!=typeof o?j(r):o,i=j(n),u=function(){var e=n.props,t=e.backgroundColor,r=e.strokeColor,o=e.width,i=e.height,a=e.visualSetting,c=n.state,u=c.canvas,s=c.canvasCtx;"sinewave"===a?x.visualizeSineWave(s,u,o,i,t,r):"frequencyBars"===a?x.visualizeFrequencyBars(s,u,o,i,t,r):"frequencyCircles"===a&&x.visualizeFrequencyCircles(s,u,o,i,t,r)},(a="visualize")in i?Object.defineProperty(i,a,{value:u,enumerable:!0,configurable:!0,writable:!0}):i[a]=u,n.visualizerRef=c.a.createRef(),n.state={microphoneRecorder:null,canvas:null,canvasCtx:null},n}var n,r,o;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&k(e,t)}(t,e),n=t,(r=[{key:"componentDidUpdate",value:function(e){var t=this.props,n=t.record,r=t.onStop,o=this.state.microphoneRecorder;e.record!==n&&(n?o&&o.startRecording():o&&(o.stopRecording(r),this.clear()))}},{key:"componentDidMount",value:function(){var e=this,t=this.props,n=t.onSave,r=t.onStop,o=t.onStart,i=t.onData,a=t.audioElem,c=t.audioBitsPerSecond,u=t.echoCancellation,s=t.autoGainControl,l=t.noiseSuppression,f=(t.channelCount,t.mimeType),p=this.visualizerRef.current,d=p.getContext("2d"),v={audioBitsPerSecond:c,mimeType:f},y={echoCancellation:u,autoGainControl:s,noiseSuppression:l};a?(A.create(a),this.setState({canvas:p,canvasCtx:d},(function(){e.visualize()}))):this.setState({microphoneRecorder:new R(o,r,n,i,v,y),canvas:p,canvasCtx:d},(function(){e.visualize()}))}},{key:"clear",value:function(){var e=this.props,t=e.width,n=e.height;this.state.canvasCtx.clearRect(0,0,t,n)}},{key:"render",value:function(){var e=this.props,t=e.width,n=e.height;return c.a.createElement("canvas",{ref:this.visualizerRef,height:n,width:t,className:this.props.className})}}])&&P(n.prototype,r),o&&P(n,o),t}(a.Component);O.propTypes={backgroundColor:u.string,strokeColor:u.string,className:u.string,audioBitsPerSecond:u.number,mimeType:u.string,height:u.number,record:u.bool.isRequired,onStop:u.func,onData:u.func,onSave:u.func},O.defaultProps={backgroundColor:"rgba(255, 255, 255, 0.5)",strokeColor:"#000000",className:"visualizer",audioBitsPerSecond:128e3,mimeType:"audio/webm;codecs=opus",record:!1,width:640,height:100,visualSetting:"sinewave",echoCancellation:!1,autoGainControl:!1,noiseSuppression:!1,channelCount:2},n.d(t,"ReactMic",(function(){return O}))}])}));