UNPKG

react-mic-record

Version:
6 lines 8.31 kB
/*! * react-mic-record v1.0.6 * MIT Licensed */ !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports["react-mic-record"]=e(require("react")):t["react-mic-record"]=e(t.React)}(this,function(t){return function(t){function e(n){if(i[n])return i[n].exports;var o=i[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=7)}([function(t,e,i){"use strict";function n(){var t=window.AudioContext||window.webkitAudioContext;if(!t)return!1;var e=new t;return!!e&&(e.ok=!0,!!e.createAnalyser)}Object.defineProperty(e,"__esModule",{value:!0});var o=i(1);e.browserSupportsAudio=n,e.default=o.a},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var a=i(6),s=i.n(a),c=i(4),u=i(2),d=i(3),h=i(5);i.d(e,"a",function(){return p});var l,f,p=(f=l=function(t){function e(i){n(this,e);var r=o(this,t.call(this,i));return r.audioContext=null,r.microphoneRecorder=null,r.state={canvas:null,canvasCtx:null},r}return r(e,t),e.prototype.componentDidMount=function(){var t=this,e=this.props,i=e.onStop,n=e.onStart,o=e.onData,r=e.audioElem,a=e.audioBitsPerSecond,s=e.mimeType,h=this.visualizerRef,l=h.getContext("2d"),f={audioBitsPerSecond:a,mimeType:s};this.audioContext=new u.a,r?this.audioPlayer=new d.a(r,this.audioContext):this.microphoneRecorder=new c.a(n,i,o,f,this.audioContext),this.setState({canvas:h,canvasCtx:l},function(){return t.visualize()})},e.prototype.componentWillUnmount=function(){this.microphoneRecorder&&(this.microphoneRecorder.unMount(),this.clear())},e.prototype.visualize=function(){var t=this.props,e=t.backgroundColor,i=t.strokeColor,n=t.width,o=t.height,r=t.visualSetting,a=this.state,s=a.canvas,c=a.canvasCtx;this.visualizer=new h.a(this.audioContext,c,s,n,o,e,i),"sinewave"===r?this.visualizer.visualizeSineWave():"frequencyBars"===r&&this.visualizer.visualizeFrequencyBars()},e.prototype.clear=function(){var t=this.state,e=t.canvasCtx,i=t.width,n=t.height;e.clearRect(0,0,i,n)},e.prototype.render=function(){var t=this,e=this.props,i=e.record,n=e.width,o=e.height,r=e.className;return i?this.microphoneRecorder&&(this.microphoneRecorder.startRecording(),this.visualize()):this.microphoneRecorder&&(this.microphoneRecorder.stopRecording(),this.clear()),s.a.createElement("canvas",{ref:function(e){return t.visualizerRef=e},height:o,width:n,className:r})},e}(s.a.Component),l.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"},f)},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}i.d(e,"a",function(){return o});var o=function(){function t(){n(this,t),this.audioCtx=new(window.AudioContext||window.webkitAudioContext),this.analyser=this.audioCtx.createAnalyser()}return t.prototype.getAudioContext=function(){return this.audioCtx},t.prototype.getAnalyser=function(){return this.analyser},t}()},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}i.d(e,"a",function(){return o});var o=function t(e,i){n(this,t);var o=i.getAudioContext(),r=i.getAnalyser();this.audioSource=o.createMediaElementSource(e),this.audioSource.connect(r),r.connect(o.destination)}},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}i.d(e,"a",function(){return r});var o={audio:!0,video:!1},r=function(){function t(e,i,o,r,a){n(this,t),navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia,this.audioCtx=a.getAudioContext(),this.analyser=a.getAnalyser(),this.stream=null,this.onStartCb=e,this.onStopCb=i,this.mediaOptions=r,this.onData=o,this.chunks=[],this.startTime=null}return t.prototype.startRecording=function(){var t=this;if(this.startTime=Date.now(),this.mediaRecorder){if(this.audioCtx&&"suspended"===this.audioCtx.state&&this.audioCtx.resume(),this.mediaRecorder&&"paused"===this.mediaRecorder.state)return void this.mediaRecorder.resume();if(this.audioCtx&&this.mediaRecorder&&"inactive"===this.mediaRecorder.state){this.mediaRecorder.start(10);this.audioCtx.createMediaStreamSource(this.stream).connect(this.analyser),this.onStartCb&&this.onStartCb()}}else navigator.mediaDevices?(console.log("getUserMedia supported."),navigator.mediaDevices.getUserMedia(o).then(function(e){t.stream=e,MediaRecorder.isTypeSupported(t.mediaOptions.mimeType)?t.mediaRecorder=new MediaRecorder(t.stream,t.mediaOptions):t.mediaRecorder=new MediaRecorder(t.stream),t.onStartCb&&t.onStartCb(),t.mediaRecorder.onstop=function(){return t.onStop()},t.mediaRecorder.ondataavailable=function(e){t.chunks.push(e.data),t.onData&&t.onData(e.data)},t.mediaRecorder.start(10),t.audioCtx.createMediaStreamSource(t.stream).connect(t.analyser)})):alert("Your browser does not support audio recording")},t.prototype.stopRecording=function(){this.mediaRecorder&&"inactive"!==this.mediaRecorder.state&&(this.mediaRecorder.stop(),this.audioCtx.suspend())},t.prototype.unMount=function(){this.stream&&this.stream.getTracks()[0].stop(),this.mediaRecorder=null},t.prototype.onStop=function(){var t=new Blob(this.chunks,{type:this.mediaOptions.mimeType});this.chunks=[];var e={blob:t,startTime:this.startTime,stopTime:Date.now(),options:this.mediaOptions,blobURL:window.URL.createObjectURL(t)};this.onStopCb&&this.onStopCb(e)},t}()},function(t,e,i){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t){var e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}i.d(e,"a",function(){return r});var r=function(){function t(e,i,o,r,a,s,c){n(this,t),this.analyser=e.getAnalyser(),this.canvasCtx=i,this.canvas=o,this.width=r,this.height=a,this.backgroundColor=s,this.strokeColor=c,this.drawVisual=null}return t.prototype.visualizeSineWave=function(){var t=this;this.analyser.fftSize=2048;var e=this.analyser.fftSize,i=new Uint8Array(e);this.canvasCtx.clearRect(0,0,this.width,this.height),function n(){t.drawVisual=requestAnimationFrame(n),t.analyser.getByteTimeDomainData(i),t.canvasCtx.fillStyle=t.backgroundColor,t.canvasCtx.fillRect(0,0,t.width,t.height),t.canvasCtx.lineWidth=2,t.canvasCtx.strokeStyle=t.strokeColor,t.canvasCtx.beginPath();for(var o=1*t.width/e,r=0,a=0;a<e;a++){var s=i[a]/128,c=s*t.height/2;0===a?t.canvasCtx.moveTo(r,c):t.canvasCtx.lineTo(r,c),r+=o}t.canvasCtx.lineTo(t.canvas.width,t.canvas.height/2),t.canvasCtx.stroke()}()},t.prototype.visualizeFrequencyBars=function(){var t=this;this.analyser.fftSize=256;var e=this.analyser.frequencyBinCount,i=new Uint8Array(e);this.canvasCtx.clearRect(0,0,this.width,this.height),function n(){t.drawVisual=requestAnimationFrame(n),t.analyser.getByteFrequencyData(i),t.canvasCtx.fillStyle=t.backgroundColor,t.canvasCtx.fillRect(0,0,t.width,t.height);for(var r=t.width/e*2.5,a=void 0,s=0,c=0;c<e;c++){a=i[c];o(t.strokeColor);t.canvasCtx.fillStyle=t.strokeColor,t.canvasCtx.fillRect(s,t.height-a/2,r,a/2),s+=r+1}}()},t}()},function(e,i){e.exports=t},function(t,e,i){t.exports=i(0)}])}); //# sourceMappingURL=react-mic-record.min.js.map