diff --git a/dist/vue-audio-recorder.min.js b/dist/vue-audio-recorder.min.js index 9a7b75b..985211e 100644 --- a/dist/vue-audio-recorder.min.js +++ b/dist/vue-audio-recorder.min.js @@ -1,2 +1 @@ -!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("VueAudioRecorder",[],n):"object"==typeof exports?exports.VueAudioRecorder=n():t.VueAudioRecorder=n()}("undefined"!=typeof self?self:this,function(){return function(t){function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}var e={};return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=12)}([function(t,n){t.exports=function(t,n,e,r,i,o){var a,s=t=t||{},c=typeof t.default;"object"!==c&&"function"!==c||(a=t,s=t.default);var l="function"==typeof s?s.options:s;n&&(l.render=n.render,l.staticRenderFns=n.staticRenderFns,l._compiled=!0),e&&(l.functional=!0),i&&(l._scopeId=i);var u;if(o?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},l._ssrRegister=u):r&&(u=r),u){var d=l.functional,p=d?l.render:l.beforeCreate;d?(l._injectStyles=u,l.render=function(t,n){return u.call(n),p(t,n)}):l.beforeCreate=p?[].concat(p,u):[u]}return{esModule:a,exports:s,options:l}}},function(t,n){function e(t,n){var e=t[1]||"",i=t[3];if(!i)return e;if(n&&"function"==typeof btoa){var o=r(i);return[e].concat(i.sources.map(function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"})).concat([o]).join("\n")}return[e].join("\n")}function r(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}t.exports=function(t){var n=[];return n.toString=function(){return this.map(function(n){var r=e(n,t);return n[2]?"@media "+n[2]+"{"+r+"}":r}).join("")},n.i=function(t,e){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},i=0;ie.parts.length&&(r.parts.length=e.parts.length)}else{for(var a=[],i=0;i1?1:i}function i(t){return new Date(1e3*t).toISOString().substr(14,5)}n.a=r,n.b=i},function(t,n,e){"use strict";var r=e(7),i=e(16),o=e(0),a=o(r.a,i.a,!1,null,null,null);n.a=a.exports},function(t,n,e){"use strict";function r(t){e(13)}var i=e(6),o=e(24),a=e(0),s=r,c=a(i.a,o.a,!1,s,null,null);n.a=c.exports},function(t,n,e){"use strict";var r=e(4),i=e(8),o=e(20),a=e(3);n.a={props:{src:{type:String},uploadUrl:{type:String},record:{type:Object},compact:{type:Boolean,default:!0},startUpload:{type:Function},successfulUpload:{type:Function},failedUpload:{type:Function}},data:function(){return{isPlaying:!1,duration:Object(a.b)(0),playedTime:Object(a.b)(0),progress:0}},components:{IconButton:r.a,LineControl:i.a,VolumeControl:o.a},mounted:function(){var t=this;this.player=document.getElementById(this.playerUniqId),this.player.addEventListener("ended",function(){t.isPlaying=!1}),this.player.addEventListener("loadeddata",function(n){t._resetProgress(),t.duration=Object(a.b)(t.player.duration)}),this.player.addEventListener("timeupdate",this._onTimeUpdate)},computed:{audioSource:function(){var t=this.src||this.record.url;if(t)return t;this._resetProgress()},playBtnIcon:function(){return this.isPlaying?"pause":"play"},playerUniqId:function(){return"audio-player"+this._uid}},methods:{playback:function(){var t=this;this.isPlaying?this.player.pause():setTimeout(function(){t.player.play()},0),this.isPlaying=!this.isPlaying},upload:function(){var t=this;this.startUpload&&this.startUpload(),this.$emit("on-start-upload");var n=new FormData;n.append("audio",this.record.blob,"my-record"),this.$http.post(this.uploadUrl,n,{headers:{"Content-Type":"multipart/form-data; boundary="+n._boundary}}).then(function(n){t.$emit("on-end-upload","success"),t.successfulUpload&&t.successfulUpload(n)}).catch(function(n){t.$emit("on-end-upload","fail"),t.failedUpload&&t.failedUpload(n)})},download:function(){var t=document.createElement("a");t.href=this.record.url,t.download="record.wav",t.click()},decorator:function(t){this.audioSource&&t()},_resetProgress:function(){var t=this;this.isPlaying&&this.player.pause(),setTimeout(function(){t.duration=Object(a.b)(0),t.playedTime=Object(a.b)(0),t.progress=0,t.isPlaying=!1},0)},_onTimeUpdate:function(){this.playedTime=Object(a.b)(this.player.currentTime),this.progress=this.player.currentTime/this.player.duration*100},_onUpdateProgress:function(t){t&&(this.player.currentTime=t*this.player.duration)},_onChangeVolume:function(t){t&&(this.player.volume=t)}}}},function(t,n,e){"use strict";n.a={props:{name:{type:String}},data:function(){return{icons:{download:'',mic:'',pause:'',play:'',save:'',stop:'',volume:''}}}}},function(t,n,e){"use strict";function r(t){e(17)}var i=e(9),o=e(19),a=e(0),s=r,c=a(i.a,o.a,!1,s,null,null);n.a=c.exports},function(t,n,e){"use strict";var r=e(3);n.a={props:{refId:{type:String},eventName:{type:String},percentage:{type:Number,default:0},rowDirection:{type:Boolean,default:!0}},methods:{onMouseDown:function(t){var n=Object(r.a)(t,this.$refs[this.refId]);this.$emit("change-linehead",n),document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mouseup",this.onMouseUp)},onMouseUp:function(t){document.removeEventListener("mouseup",this.onMouseUp),document.removeEventListener("mousemove",this.onMouseMove);var n=Object(r.a)(t,this.$refs[this.refId]);this.$emit("change-linehead",n)},onMouseMove:function(t){var n=Object(r.a)(t,this.$refs[this.refId]);this.$emit("change-linehead",n)}},computed:{calculateSize:function(){var t=this.percentage<1?100*this.percentage:this.percentage;return(this.rowDirection?"width":"height")+": "+t+"%"}}}},function(t,n,e){"use strict";var r=e(4),i=e(8);n.a={data:function(){return{volume:.8}},components:{IconButton:r.a,LineControl:i.a},methods:{onChangeLinehead:function(t){this.$emit("change-volume",t),this.volume=t}}}},function(t,n,e){"use strict";var r=e(5),i=e(4),o=e(28),a=e(3);n.a={props:{attempts:{type:Number},compact:{type:Boolean,default:!1},time:{type:Number},uploadUrl:{type:String},attemptsLimit:{type:Function},failedUpload:{type:Function},micFailed:{type:Function},startRecord:{type:Function},startUpload:{type:Function},stopRecord:{type:Function},successfulUpload:{type:Function},successfulUploadMsg:{type:String,default:"Upload successful"},failedUploadMsg:{type:String,default:"Upload fail"}},data:function(){var t=this;return{isUploading:!1,recorder:new o.a({afterStop:function(){t.recordList=t.recorder.recordList(),t.stopRecord&&t.stopRecord("stop record")},attempts:this.attempts,time:this.time}),recordList:[],selected:{},uploadStatus:null}},components:{AudioPlayer:r.a,IconButton:i.a},methods:{toggleRecorder:function(){this.attempts&&this.recorder.records.length>=this.attempts||(!this.isRecording||this.isRecording&&this.isPause?(this.recorder.start(),this.startRecord&&this.startRecord("start record")):(this.recorder.pause(),this.startRecord&&this.startRecord("pause record")))},stopRecorder:function(){this.isRecording&&this.recorder.stop()},removeRecord:function(t){this.recordList.splice(t,1),this.$set(this.selected,"url",null)},onStartUpload:function(){this.isUploading=!0},onEndUpload:function(t){var n=this;this.isUploading=!1,this.uploadStatus=t,setTimeout(function(){n.uploadStatus=null},1500)}},computed:{attemptsLeft:function(){return this.attempts-this.recorder.records.length},iconButtonType:function(){return this.isRecording&&this.isPause?"mic":this.isRecording?"pause":"mic"},isPause:function(){return this.recorder.isPause},isRecording:function(){return this.recorder.isRecording},message:function(){return"success"===this.uploadStatus?this.successfulUploadMsg:this.failedUploadMsg},recordedTime:function(){return this.time&&this.recorder.duration>=60*this.time&&this.stopRecorder(),Object(a.b)(this.recorder.duration)},uploadStatusClasses:function(){var t=["ar__upload-status"];return t.push("success"===this.uploadStatus?"ar__upload-status--success":"ar__upload-status--fail"),t.join(" ")},volume:function(){return parseFloat(this.recorder.volume)}}}},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=e(5),i=e(25);e.d(n,"AudioPlayer",function(){return r.a}),e.d(n,"AudioRecorder",function(){return i.a});var o={AudioPlayer:r.a,AudioRecorder:i.a,install:function(t){this.installed||(this.installed=!0,t.component("audio-player",r.a),t.component("audio-recorder",i.a))}};n.default=o},function(t,n,e){var r=e(14);"string"==typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);e(2)("2ae0cf23",r,!0,{})},function(t,n,e){n=t.exports=e(1)(!1),n.push([t.i,"\n.ar-player {\n width: 380px;\n height: 120px;\n border: 1px solid #E8E8E8;\n border-radius: 24px;\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: center;\n background-color: #FAFAFA;\n font-family: 'Roboto', sans-serif;\n}\n.ar-player-bar {\n display: flex;\n align-items: center;\n height: 38px;\n padding: 0 12px;\n margin: 0 5px;\n}\n.ar-player-actions {\n width: 55%;\n display: flex;\n align-items: center;\n justify-content: space-around;\n}\n.ar-player--compact {\n height: unset;\n flex-direction: row;\n border: 0;\n border-radius: 0;\n background-color: unset;\n}\n.ar-player--compact > .ar-player-actions {\n width: unset;\n}\n.ar-player--compact > .ar-player-actions > #download,\n .ar-player--compact > .ar-player-actions > #upload {\n display: none;\n}\n.ar-player--compact > .ar-player-bar {\n border: 1px solid #E8E8E8;\n border-radius: 24px;\n margin: 0 0 0 5px;\n}\n.ar-player--compact > .ar-player-bar > .ar-player__progress {\n width: 125px;\n}\n.ar-player__progress {\n width: 160px;\n margin: 0 8px;\n}\n.ar-player__time {\n color: rgba(84, 84, 84, 0.5);\n font-size: 16px;\n width: 41px;\n}\n.ar-player__play {\n width: 45px;\n height: 45px;\n background-color: #FFFFFF;\n box-shadow: 0 2px 11px 11px rgba(0, 0, 0, 0.07);\n}\n.ar-player__play--active {\n fill: white !important;\n background-color: #05CBCD !important;\n}\n.ar-icon {\n fill: #747474;\n border-radius: 50%;\n border: 1px solid #05CBCD;\n background-color: #FFFFFF;\n padding: 5px;\n cursor: pointer;\n transition: .2s;\n}\n.ar-icon--rec {\n fill: white;\n background-color: #FF6B64;\n border-color: transparent;\n}\n.ar-icon--pulse {\n animation: ripple .5s linear infinite;\n}\n@keyframes ripple {\n0% {\n box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.1), 0 0 0 1px rgba(255, 0, 0, 0.1), 0 0 0 5px rgba(255, 0, 0, 0.1);\n}\n100% {\n box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.1), 0 0 0 10px rgba(255, 0, 0, 0.1), 0 0 0 20px rgba(255, 0, 0, 0);\n}\n}\n.ar-icon__sm {\n width: 30px;\n height: 30px;\n}\n.ar-icon__lg {\n width: 45px;\n height: 45px;\n box-shadow: 0 2px 5px 1px rgba(158, 158, 158, 0.5);\n}\n",""])},function(t,n){t.exports=function(t,n){for(var e=[],r={},i=0;i0&&void 0!==arguments[0]?arguments[0]:{};r(this,t),this.afterStop=n.afterStop,this.micFailed=n.micFailed,this.bufferSize=4096,this.records=[],this.samples=[],this.isPause=!1,this.isRecording=!1,this.duration=0,this.volume=0,this._duration=0}return a(t,[{key:"start",value:function(){navigator.mediaDevices.getUserMedia({audio:!0}).then(this._micCaptured.bind(this)).catch(this._micError.bind(this)),this.isPause=!1,this.isRecording=!0}},{key:"stop",value:function(){this.stream.getTracks().forEach(function(t){return t.stop()}),this.input.disconnect(),this.processor.disconnect(),this.context.close();var t=new i.a({bufferSize:this.bufferSize,sampleRate:this.context.sampleRate,samples:this.samples}),n=t.getData(),e=URL.createObjectURL(n);this.samples=[],this.records.push({id:Date.now(),blob:n,duration:Object(o.b)(this.duration),url:e}),this._duration=0,this.duration=0,this.isPause=!1,this.isRecording=!1,this.afterStop&&this.afterStop()}},{key:"pause",value:function(){this.stream.getTracks().forEach(function(t){return t.stop()}),this.input.disconnect(),this.processor.disconnect(),this.context.close(),this._duration=this.duration,this.isPause=!0}},{key:"recordList",value:function(){return this.records}},{key:"lastRecord",value:function(){return this.records.slice(-1)}},{key:"_micCaptured",value:function(t){var n=this;this.context=new(window.AudioContext||window.webkitAudioContext),this.duration=this._duration,this.input=this.context.createMediaStreamSource(t),this.processor=this.context.createScriptProcessor(this.bufferSize,1,1),this.stream=t,this.processor.onaudioprocess=function(t){for(var e=t.inputBuffer.getChannelData(0),r=0,i=0;i.02},attrs:{name:t.iconButtonType},nativeOn:{click:function(n){return t.toggleRecorder(n)}}}),t._v(" "),e("icon-button",{staticClass:"ar-icon ar-icon__sm ar-recorder__stop",attrs:{name:"stop"},nativeOn:{click:function(n){return t.stopRecorder(n)}}})],1),t._v(" "),t.attempts?e("div",{staticClass:"ar-recorder__records-limit"},[t._v("Attempts: "+t._s(t.attemptsLeft)+"/"+t._s(t.attempts))]):t._e(),t._v(" "),e("div",{staticClass:"ar-recorder__duration"},[t._v(t._s(t.recordedTime))]),t._v(" "),t.time?e("div",{staticClass:"ar-recorder__time-limit"},[t._v("Record duration is limited: "+t._s(t.time)+"m")]):t._e(),t._v(" "),e("div",{staticClass:"ar-records"},t._l(t.recordList,function(n,r){return e("div",{key:n.id,staticClass:"ar-records__record",class:{"ar-records__record--selected":n.id===t.selected.id},on:{click:function(e){t.selected=n}}},[n.id===t.selected.id?e("div",{staticClass:"ar__rm",on:{click:function(n){t.removeRecord(r)}}},[t._v("×")]):t._e(),t._v(" "),e("div",{staticClass:"ar__text"},[t._v("Record "+t._s(r+1))]),t._v(" "),e("div",{staticClass:"ar__text"},[t._v(t._s(n.duration))])])})),t._v(" "),e("audio-player",{attrs:{compact:t.compact,record:t.selected,"upload-url":t.uploadUrl,"start-upload":t.startUpload,"successful-upload":t.successfulUpload,"failed-upload":t.failedUpload},on:{"start-upload":t.onStartUpload,"end-upload":t.onEndUpload}}),t._v(" "),t.uploadStatus?e("div",{class:t.uploadStatusClasses},[t._v(t._s(t.message))]):t._e()],1)])},i=[],o={render:r,staticRenderFns:i};n.a=o}]).default}); -//# sourceMappingURL=vue-audio-recorder.min.js.map \ No newline at end of file +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("VueAudioRecorder",[],e):"object"==typeof exports?exports.VueAudioRecorder=e():t.VueAudioRecorder=e()}(window,function(){return function(n){var r={};function o(t){if(r[t])return r[t].exports;var e=r[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,o),e.l=!0,e.exports}return o.m=n,o.c=r,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=12)}([function(t,e){t.exports=function(n){var a=[];return a.toString=function(){return this.map(function(t){var e=function(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var o=(a=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),i=r.sources.map(function(t){return"/*# sourceURL="+r.sourceRoot+t+" */"});return[n].concat(i).concat([o]).join("\n")}var a;return[n].join("\n")}(t,n);return t[2]?"@media "+t[2]+"{"+e+"}":e}).join("")},a.i=function(t,e){"string"==typeof t&&(t=[[null,t,""]]);for(var n={},r=0;rn.parts.length&&(r.parts.length=n.parts.length)}else{var i=[];for(o=0;o .ar-player-actions {\n width: unset;\n}\n.ar-player--compact > .ar-player-actions > #download,\n .ar-player--compact > .ar-player-actions > #upload {\n display: none;\n}\n.ar-player--compact > .ar-player-bar {\n border: 1px solid #E8E8E8;\n border-radius: 24px;\n margin: 0 0 0 5px;\n}\n.ar-player--compact > .ar-player-bar > .ar-player__progress {\n width: 125px;\n}\n.ar-player__progress {\n width: 160px;\n margin: 0 8px;\n}\n.ar-player__time {\n color: rgba(84, 84, 84, 0.5);\n font-size: 16px;\n width: 41px;\n}\n.ar-player__play {\n width: 45px;\n height: 45px;\n background-color: #FFFFFF;\n box-shadow: 0 2px 11px 11px rgba(0, 0, 0, 0.07);\n}\n.ar-player__play--active {\n fill: white !important;\n background-color: #05CBCD !important;\n}\n.ar-icon {\n fill: #747474;\n border-radius: 50%;\n border: 1px solid #05CBCD;\n background-color: #FFFFFF;\n padding: 5px;\n cursor: pointer;\n transition: .2s;\n}\n.ar-icon--rec {\n fill: white;\n background-color: #FF6B64;\n border-color: transparent;\n}\n.ar-icon--pulse {\n animation: ripple .5s linear infinite;\n}\n@keyframes ripple {\n0% {\n box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.1), 0 0 0 1px rgba(255, 0, 0, 0.1), 0 0 0 5px rgba(255, 0, 0, 0.1);\n}\n100% {\n box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.1), 0 0 0 10px rgba(255, 0, 0, 0.1), 0 0 0 20px rgba(255, 0, 0, 0);\n}\n}\n.ar-icon__sm {\n width: 30px;\n height: 30px;\n}\n.ar-icon__lg {\n width: 45px;\n height: 45px;\n box-shadow: 0 2px 5px 1px rgba(158, 158, 158, 0.5);\n}\n",""])},function(t,e,n){var r=n(5);"string"==typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);(0,n(1).default)("722c44a2",r,!1,{})},function(t,e,n){(t.exports=n(0)(!1)).push([t.i,"\n.ar-line-control {\n position: relative;\n height: 8px;\n border-radius: 5px;\n background-color: #E6E6E6;\n}\n.ar-line-control__head {\n position: absolute;\n height: inherit;\n background-color: #616161;\n border-radius: inherit;\n}\n",""])},function(t,e,n){var r=n(7);"string"==typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);(0,n(1).default)("5b0bec03",r,!1,{})},function(t,e,n){(t.exports=n(0)(!1)).push([t.i,"\n.ar-icon {\n fill: #747474;\n border-radius: 50%;\n border: 1px solid #05CBCD;\n background-color: #FFFFFF;\n padding: 5px;\n cursor: pointer;\n transition: .2s;\n}\n.ar-icon--rec {\n fill: white;\n background-color: #FF6B64;\n border-color: transparent;\n}\n.ar-icon--pulse {\n animation: ripple .5s linear infinite;\n}\n@keyframes ripple {\n0% {\n box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.1), 0 0 0 1px rgba(255, 0, 0, 0.1), 0 0 0 5px rgba(255, 0, 0, 0.1);\n}\n100% {\n box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.1), 0 0 0 10px rgba(255, 0, 0, 0.1), 0 0 0 20px rgba(255, 0, 0, 0);\n}\n}\n.ar-icon__sm {\n width: 30px;\n height: 30px;\n}\n.ar-icon__lg {\n width: 45px;\n height: 45px;\n box-shadow: 0 2px 5px 1px rgba(158, 158, 158, 0.5);\n}\n",""])},function(t,e,n){var r=n(9);"string"==typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);(0,n(1).default)("7e43270a",r,!1,{})},function(t,e,n){(t.exports=n(0)(!1)).push([t.i,"\n.ar-volume {\n display: flex;\n align-items: center;\n line-height: 10px;\n}\n.ar-volume-bar {\n width: 50px;\n height: 6px;\n background: #E6E6E6;\n border-radius: 4px;\n position: relative;\n}\n.ar-volume__icon {\n fill: #747474;\n width: 24px;\n height: 24px;\n border: 0;\n border-radius: 0;\n padding: 0;\n background-color: unset;\n margin-right: 3px;\n}\n",""])},function(t,e,n){var r=n(11);"string"==typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);(0,n(1).default)("00c7c6ba",r,!1,{})},function(t,e,n){(t.exports=n(0)(!1)).push([t.i,"\n.ar {\n width: 420px;\n font-family: 'Roboto', sans-serif;\n border-radius: 16px;\n background-color: #FAFAFA;\n box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.17);\n position: relative;\n box-sizing: content-box;\n}\n.ar-content {\n padding: 16px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ar-records {\n height: 138px;\n padding-top: 1px;\n overflow-y: auto;\n margin-bottom: 20px;\n}\n.ar-records__record {\n width: 320px;\n height: 45px;\n padding: 0 10px;\n margin: 0 auto;\n line-height: 45px;\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid #E8E8E8;\n position: relative;\n}\n.ar-records__record--selected {\n border: 1px solid #E8E8E8;\n border-radius: 24px;\n background-color: #FFFFFF;\n margin-top: -1px;\n padding: 0 34px;\n}\n.ar-recorder {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ar-recorder__duration {\n color: #AEAEAE;\n font-size: 32px;\n font-weight: 500;\n margin-top: 20px;\n margin-bottom: 16px;\n}\n.ar-recorder__stop {\n position: absolute;\n top: 10px;\n right: -52px;\n}\n.ar-recorder__time-limit {\n position: absolute;\n color: #AEAEAE;\n font-size: 12px;\n top: 128px;\n}\n.ar-recorder__records-limit {\n position: absolute;\n color: #AEAEAE;\n font-size: 12px;\n top: 78px;\n}\n.ar-spinner {\n display: flex;\n height: 30px;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n width: 144px;\n z-index: 10;\n}\n.ar-spinner__dot {\n display: block;\n margin: 0 8px;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n background: #05CBCD;\n animation-name: blink;\n animation-duration: 1.4s;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n}\n.ar-spinner__dot:nth-child(2) {\n animation-delay: .2s;\n}\n.ar-spinner__dot:nth-child(3) {\n animation-delay: .4s;\n}\n@keyframes blink {\n0% {\n opacity: .2;\n}\n20% {\n opacity: 1;\n}\n100% {\n opacity: .2;\n}\n}\n.ar__text {\n color: rgba(84, 84, 84, 0.5);\n font-size: 16px;\n}\n.ar__blur {\n filter: blur(2px);\n opacity: 0.7;\n}\n.ar__overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 10;\n}\n.ar__upload-status {\n text-align: center;\n font-size: 10px;\n padding: 2px;\n letter-spacing: 1px;\n position: absolute;\n bottom: 0;\n}\n.ar__upload-status--success {\n color: green;\n}\n.ar__upload-status--fail {\n color: red;\n}\n.ar__rm {\n cursor: pointer;\n position: absolute;\n width: 6px;\n height: 6px;\n padding: 6px;\n line-height: 6px;\n margin: auto;\n left: 10px;\n bottom: 0;\n top: 0;\n color: #f4785a;\n}\n.ar-icon {\n fill: #747474;\n border-radius: 50%;\n border: 1px solid #05CBCD;\n background-color: #FFFFFF;\n padding: 5px;\n cursor: pointer;\n transition: .2s;\n}\n.ar-icon--rec {\n fill: white;\n background-color: #FF6B64;\n border-color: transparent;\n}\n.ar-icon--pulse {\n animation: ripple .5s linear infinite;\n}\n@keyframes ripple {\n0% {\n box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.1), 0 0 0 1px rgba(255, 0, 0, 0.1), 0 0 0 5px rgba(255, 0, 0, 0.1);\n}\n100% {\n box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.1), 0 0 0 10px rgba(255, 0, 0, 0.1), 0 0 0 20px rgba(255, 0, 0, 0);\n}\n}\n.ar-icon__sm {\n width: 30px;\n height: 30px;\n}\n.ar-icon__lg {\n width: 45px;\n height: 45px;\n box-shadow: 0 2px 5px 1px rgba(158, 158, 158, 0.5);\n}\n",""])},function(t,e,n){"use strict";n.r(e);var r={props:{name:{type:String}},data:function(){return{icons:{download:'',mic:'',pause:'',play:'',save:'',stop:'',volume:''}}}},o=function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{domProps:{innerHTML:t._s(t.icons[t.name])}})};function i(t,e,n,r,o,i,a,s){var c=typeof(t=t||{}).default;"object"!==c&&"function"!==c||(t=t.default);var l,p="function"==typeof t?t.options:t;if(e&&(p.render=e,p.staticRenderFns=n,p._compiled=!0),r&&(p.functional=!0),i&&(p._scopeId=i),a?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},p._ssrRegister=l):o&&(l=s?function(){o.call(this,this.$root.$options.shadowRoot)}:o),l)if(p.functional){p._injectStyles=l;var d=p.render;p.render=function(t,e){return l.call(e),d(t,e)}}else{var u=p.beforeCreate;p.beforeCreate=u?[].concat(u,l):[l]}return{exports:t,options:p}}o._withStripped=!0;var a=i(r,o,[],!1,null,null,null);a.options.__file="src/components/icon-button.vue";var s=a.exports;function c(t,e){var n=e.getBoundingClientRect().width,r=t.target.getBoundingClientRect().left,o=(t.clientX-r)/n;try{if(!t.target.className.match(/^ar\-line\-control/))return}catch(t){return}return o=1<(o=o<0?0:o)?1:o}function l(t){return new Date(1e3*t).toISOString().substr(14,5)}var p={props:{refId:{type:String},eventName:{type:String},percentage:{type:Number,default:0},rowDirection:{type:Boolean,default:!0}},methods:{onMouseDown:function(t){var e=c(t,this.$refs[this.refId]);this.$emit("change-linehead",e),document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mouseup",this.onMouseUp)},onMouseUp:function(t){document.removeEventListener("mouseup",this.onMouseUp),document.removeEventListener("mousemove",this.onMouseMove);var e=c(t,this.$refs[this.refId]);this.$emit("change-linehead",e)},onMouseMove:function(t){var e=c(t,this.$refs[this.refId]);this.$emit("change-linehead",e)}},computed:{calculateSize:function(){var t=this.percentage<1?100*this.percentage:this.percentage;return(this.rowDirection?"width":"height")+": "+t+"%"}}},d=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{ref:t.refId,staticClass:"ar-line-control",on:{mousedown:t.onMouseDown}},[n("div",{staticClass:"ar-line-control__head",style:t.calculateSize})])};d._withStripped=!0;var u=i(p,d,[],!1,function(t){n(4)},null,null);u.options.__file="src/components/line-control.vue";var h=u.exports,f={props:{options:{type:Object},record:{type:Object}},components:{IconButton:s},methods:{upload:function(){var e=this;if(this.record.url){this.$eventBus.$emit("start-upload"),this.options.startUpload&&this.options.startUpload();var t=new FormData;t.append("audio",this.record.blob,"my-record");var n=Object.assign(this.options.headers,{});n["Content-Type"]="multipart/form-data; boundary="+t._boundary,this.$http.post(this.options.uploadUrl,t,{headers:n}).then(function(t){e.$eventBus.$emit("end-upload","success"),e.options.successfulUpload&&e.options.successfulUpload(t)}).catch(function(t){e.$eventBus.$emit("end-upload","fail"),e.options.failedUpload&&e.options.failedUpload(t)})}}}},m=function(){var e=this,t=e.$createElement;return(e._self._c||t)("icon-button",{attrs:{name:"save"},nativeOn:{click:function(t){return e.upload(t)}}})};m._withStripped=!0;var v=i(f,m,[],!1,function(t){n(6)},null,null);v.options.__file="src/components/uploader.vue";var g=v.exports,_={data:function(){return{volume:.8}},components:{IconButton:s,LineControl:h},methods:{onChangeLinehead:function(t){this.$emit("change-volume",t),this.volume=t}}},y=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"ar-volume"},[n("icon-button",{staticClass:"ar-volume__icon",attrs:{name:"volume"}}),t._v(" "),n("line-control",{staticClass:"ar-volume-bar",attrs:{"ref-id":"volume",percentage:t.volume},on:{"change-linehead":t.onChangeLinehead}})],1)};y._withStripped=!0;var x=i(_,y,[],!1,function(t){n(8)},null,null);x.options.__file="src/components/volume-control.vue";var b=x.exports,w={props:{src:{type:String},record:{type:Object},compact:{type:Boolean,default:!0},uploaderOptions:{type:Object,default:function(){return new Object}}},data:function(){return{isPlaying:!1,duration:l(0),playedTime:l(0),progress:0}},components:{IconButton:s,LineControl:h,Uploader:g,VolumeControl:b},mounted:function(){var e=this;this.player=document.getElementById(this.playerUniqId),this.player.addEventListener("ended",function(){e.isPlaying=!1}),this.player.addEventListener("loadeddata",function(t){e._resetProgress(),e.duration=l(e.player.duration)}),this.player.addEventListener("timeupdate",this._onTimeUpdate),this.$eventBus.$on("remove-record",function(){e._resetProgress()})},computed:{audioSource:function(){var t=this.src||this.record.url;if(t)return t;this._resetProgress()},playBtnIcon:function(){return this.isPlaying?"pause":"play"},playerUniqId:function(){return"audio-player"+this._uid}},methods:{playback:function(){var t=this;this.isPlaying?this.player.pause():setTimeout(function(){t.player.play()},0),this.isPlaying=!this.isPlaying},download:function(){var t=document.createElement("a");t.href=this.record.url,t.download="record.wav",t.click()},decorator:function(t){this.audioSource&&t()},_resetProgress:function(){this.isPlaying&&this.player.pause(),this.duration=l(0),this.playedTime=l(0),this.progress=0,this.isPlaying=!1},_onTimeUpdate:function(){this.playedTime=l(this.player.currentTime),this.progress=this.player.currentTime/this.player.duration*100},_onUpdateProgress:function(t){t&&(this.player.currentTime=t*this.player.duration)},_onChangeVolume:function(t){t&&(this.player.volume=t)}}},C=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"ar-player",class:{"ar-player--compact":e.compact}},[n("div",{staticClass:"ar-player-actions"},[n("icon-button",{staticClass:"ar-icon ar-icon__sm",attrs:{id:"download",name:"download"},nativeOn:{click:function(t){e.decorator(e.download)}}}),e._v(" "),n("icon-button",{staticClass:"ar-icon ar-icon__lg ar-player__play",class:{"ar-player__play--active":e.isPlaying},attrs:{id:"play",name:e.playBtnIcon},nativeOn:{click:function(t){e.decorator(e.playback)}}}),e._v(" "),n("uploader",{staticClass:"ar-icon ar-icon__sm",attrs:{id:"upload",record:e.record,options:e.uploaderOptions}})],1),e._v(" "),n("div",{staticClass:"ar-player-bar"},[n("div",{staticClass:"ar-player__time"},[e._v(e._s(e.playedTime))]),e._v(" "),n("line-control",{staticClass:"ar-player__progress",attrs:{"ref-id":"progress",percentage:e.progress},on:{"change-linehead":e._onUpdateProgress}}),e._v(" "),n("div",{staticClass:"ar-player__time"},[e._v(e._s(e.duration))]),e._v(" "),n("volume-control",{on:{"change-volume":e._onChangeVolume}})],1),e._v(" "),n("audio",{attrs:{id:e.playerUniqId,src:e.audioSource}})])};C._withStripped=!0;var S=i(w,C,[],!1,function(t){n(2)},null,null);S.options.__file="src/components/player.vue";var U=S.exports,F=function(){function r(t,e){for(var n=0;n=this.attempts||(!this.isRecording||this.isRecording&&this.isPause?(this.recorder.start(),this.startRecord&&this.startRecord("start record")):(this.recorder.pause(),this.startRecord&&this.startRecord("pause record")))},stopRecorder:function(){this.isRecording&&this.recorder.stop()},removeRecord:function(t){this.recordList.splice(t,1),this.$set(this.selected,"url",null),this.$eventBus.$emit("remove-record")}},computed:{attemptsLeft:function(){return this.attempts-this.recorder.records.length},iconButtonType:function(){return this.isRecording&&this.isPause?"mic":this.isRecording?"pause":"mic"},isPause:function(){return this.recorder.isPause},isRecording:function(){return this.recorder.isRecording},message:function(){return"success"===this.uploadStatus?this.successfulUploadMsg:this.failedUploadMsg},recordedTime:function(){return this.time&&this.recorder.duration>=60*this.time&&this.stopRecorder(),l(this.recorder.duration)},uploadStatusClasses:function(){var t=["ar__upload-status"];return t.push("success"===this.uploadStatus?"ar__upload-status--success":"ar__upload-status--fail"),t.join(" ")},volume:function(){return parseFloat(this.recorder.volume)}}},M=function(){var r=this,t=r.$createElement,o=r._self._c||t;return o("div",{staticClass:"ar"},[r.isUploading?o("div",{staticClass:"ar__overlay"}):r._e(),r._v(" "),r.isUploading?o("div",{staticClass:"ar-spinner"},[o("div",{staticClass:"ar-spinner__dot"}),r._v(" "),o("div",{staticClass:"ar-spinner__dot"}),r._v(" "),o("div",{staticClass:"ar-spinner__dot"})]):r._e(),r._v(" "),o("div",{staticClass:"ar-content",class:{ar__blur:r.isUploading}},[o("div",{staticClass:"ar-recorder"},[o("icon-button",{staticClass:"ar-icon ar-icon__lg",class:{"ar-icon--rec":r.isRecording,"ar-icon--pulse":r.isRecording&&.02", "license": "MIT", "scripts": {