jamit-audio-recorder
Version:
Nice little Vue Audio Recorder
2 lines • 8.36 kB
JavaScript
(function(){var e={639:function(e,o,i){"use strict";i.r(o);var t=i(81),r=i.n(t),a=i(645),d=i.n(a),n=d()(r());n.push([e.id,".audioControls[data-v-505b85d4]{display:flex;align-items:center}.audioStyle[data-v-505b85d4]{width:var(--audio-width)}.ar-icon[data-v-505b85d4]{width:40px;height:40px;border-radius:50%;padding:5px}audio[data-v-505b85d4]{max-height:100%;max-width:100%;margin:auto;-o-object-fit:contain;object-fit:contain}.audio[data-v-505b85d4]{margin:0 5px}.recorder-start[data-v-505b85d4]{background:green}.recorder-start-error[data-v-505b85d4]{background:gray}.recorder-stop[data-v-505b85d4]{background:red;box-shadow:0 0 0 0 #ff5252;-webkit-animation:pulse-505b85d4 1.5s infinite;animation:pulse-505b85d4 1.5s infinite}@-webkit-keyframes pulse-505b85d4{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(255,82,82,.7)}70%{transform:scale(1);box-shadow:0 0 0 10px hsla(0,0%,100%,0)}to{transform:scale(.95);box-shadow:0 0 0 0 hsla(0,0%,100%,0)}}@keyframes pulse-505b85d4{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(255,82,82,.7)}70%{transform:scale(1);box-shadow:0 0 0 10px hsla(0,0%,100%,0)}to{transform:scale(.95);box-shadow:0 0 0 0 hsla(0,0%,100%,0)}}.audioTimer[data-v-505b85d4]{background:var(--timer-background);padding:5px 20px;color:var(--font-color);border-radius:5%;font-size:var(--font-size);font-weight:700;margin:0 0 0 5px}.deleteAudio[data-v-505b85d4]{background-color:darkred;color:#fff;padding:5px;border-radius:50px;width:30px;height:30px;border:none;font-weight:700}.deleteAudio[data-v-505b85d4]:disabled{background-color:#db7093}.pointer[data-v-505b85d4]{cursor:pointer}",""]),o["default"]=n},122:function(e,o,i){"use strict";var t=i(963),r=i(252);function a(e,o,i,t,a,d){const n=(0,r.up)("AudioRecorder");return(0,r.wg)(),(0,r.iD)("div",null,[(0,r.Wm)(n,{timer:!0,"timer-color":"#333","timer-font-size":1.2,"timer-background":"#eee","audio-width":200,onAudioFile:d.myAudioFile},null,8,["timer-font-size","onAudioFile"])])}var d=i(577);const n=e=>((0,r.dD)("data-v-505b85d4"),e=e(),(0,r.Cn)(),e),s=n((()=>(0,r._)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[(0,r._)("path",{fill:"#FFF",d:"M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"}),(0,r._)("path",{d:"M0 0h24v24H0z",fill:"none"})],-1))),u=[s],l=n((()=>(0,r._)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},[(0,r._)("path",{d:"M0 0h24v24H0z",fill:"none"}),(0,r._)("path",{d:"M6 6h12v12H6z",fill:"#FFF"})],-1))),c=[l],h={ref:"audio",class:"audio audioStyle"},p=n((()=>(0,r._)("audio",{controls:"controls",class:"audioStyle"},null,-1))),f=[p],m={class:"audioTimer",ref:"audioTimer"},v=["disabled"];function b(e,o,i,a,n,s){return(0,r.wg)(),(0,r.iD)("div",{class:"audioControls",style:(0,d.j5)(s.cssProps)},[(0,r._)("div",null,[n.recordAudioState?(0,r.kq)("",!0):((0,r.wg)(),(0,r.iD)("div",{key:0,title:"Start recording",onClick:o[0]||(o[0]=e=>("denied"===n.permissionStatus||!1===n.audioIsPlaying)&&s.recordAudio()),class:(0,d.C_)(["ar-icon","denied"===n.permissionStatus||n.audioIsPlaying?"recorder-start-error":"recorder-start pointer"])},u,2)),n.recordAudioState?((0,r.wg)(),(0,r.iD)("div",{key:1,title:"Stop recording",onClick:o[1]||(o[1]=(...e)=>s.stopRecordAudio&&s.stopRecordAudio(...e)),class:"ar-icon recorder-stop pointer"},c)):(0,r.kq)("",!0)]),(0,r.wy)((0,r._)("div",h,f,512),[[t.F8,n.audioFile&&!n.recordAudioState]]),(0,r.wy)((0,r._)("div",null,[(0,r._)("span",m,null,512)],512),[[t.F8,n.recordAudioState&&i.timer]]),(0,r.wy)((0,r._)("div",null,[(0,r._)("button",{title:"Delete Audio",disabled:n.audioIsPlaying,onClick:o[2]||(o[2]=(...e)=>s.deleteAudioFile&&s.deleteAudioFile(...e)),class:"deleteAudio pointer"}," X ",8,v)],512),[[t.F8,n.audioFile&&!n.recordAudioState]])],4)}var g={name:"AudioRecorder",props:{timer:{type:Boolean,default:!0},timerColor:{type:String,default:"#000"},timerFontSize:{type:Number,default:1},timerBackground:{type:String,default:"#ccc"},audioWidth:{type:Number,default:200}},mounted(){this.checkPermission()},data(){return{permissionStatus:null,recorder:null,audioIsPlaying:!1,audioFile:null,audioType:"audio/x-wav",audioFileName:"audio.wav",uploadedAudioFile:null,recordAudioState:!1,initialTime:Date.now()}},methods:{async checkPermission(){const e=await navigator.permissions.query({name:"microphone"});this.permissionStatus=e.state},clearAudio(){const e=this.$refs.audioTimer;this.initialTime=Date.now(),e.innerText=""},checkAudioTime(){const e=this.$refs.audioTimer,o=Date.now()-this.initialTime,i=this.convertAudioTime(o);e.innerHTML=`${i}`},convertAudioTime(e){const o=Math.floor(e/1e3),i=Math.floor(o/60),t=o-60*i,r=t<10?`0${t}`:t;return`${i}:${r}`},recordAudio(){this.clearAudio();try{const e=navigator.mediaDevices.getUserMedia({audio:!0}),o=[];e.then((e=>{this.recorder=new MediaRecorder(e),this.recorder.ondataavailable=e=>{if(o.push(e.data),"inactive"===this.recorder.state){const e=new Blob(o,{type:this.audioType});this.audioFile=URL.createObjectURL(e),this.uploadedAudioFile=e;const{audio:i}=this.$refs;i.innerHTML="";const t=document.createElement("audio");t.setAttribute("controls","controls"),t.setAttribute("style",`width: ${this.audioWidth}px`),i.appendChild(t),t.innerHTML=`<source src="${this.audioFile}" type="${this.audioType}" />`,t.onplay=()=>{this.audioIsPlaying=!0},t.onpause=()=>{this.audioIsPlaying=!1},t.onended=()=>{this.audioIsPlaying=!1}}},this.recordAudioState=!0,this.audioInterval=setInterval(this.checkAudioTime,500),this.recorder.start()})).catch((e=>{alert(e),console.log(e)}))}catch(e){alert(`Audio error: ${e}`),console.error("Audio error: ",e)}},stopRecordAudio(){clearInterval(this.audioInterval),this.recorder.stop(),this.recordAudioState=!1},deleteAudioFile(){!1===this.recordAudioState&&(this.audioFile=null,this.uploadedAudioFile=null)}},computed:{cssProps(){return{"--font-size":`${this.timerFontSize}em`,"--font-color":this.timerColor,"--timer-background":this.timerBackground,"--audio-width":`${this.audioWidth}px`}}},watch:{uploadedAudioFile(e){this.$emit("audioFile",e)}}},w=(i(704),i(744));const y=(0,w.Z)(g,[["render",b],["__scopeId","data-v-505b85d4"]]);var A=y,x={name:"App",components:{AudioRecorder:A},methods:{myAudioFile(e){console.log("myAudioFile: ",e)}}};const k=(0,w.Z)(x,[["render",a]]);var F=k;(0,t.ri)(F).mount("#app")},704:function(e,o,i){var t=i(639);t.__esModule&&(t=t.default),"string"===typeof t&&(t=[[e.id,t,""]]),t.locals&&(e.exports=t.locals);var r=i(402).Z;r("719d7e28",t,!0,{sourceMap:!1,shadowMode:!1})}},o={};function i(t){var r=o[t];if(void 0!==r)return r.exports;var a=o[t]={id:t,exports:{}};return e[t](a,a.exports,i),a.exports}i.m=e,function(){var e=[];i.O=function(o,t,r,a){if(!t){var d=1/0;for(l=0;l<e.length;l++){t=e[l][0],r=e[l][1],a=e[l][2];for(var n=!0,s=0;s<t.length;s++)(!1&a||d>=a)&&Object.keys(i.O).every((function(e){return i.O[e](t[s])}))?t.splice(s--,1):(n=!1,a<d&&(d=a));if(n){e.splice(l--,1);var u=r();void 0!==u&&(o=u)}}return o}a=a||0;for(var l=e.length;l>0&&e[l-1][2]>a;l--)e[l]=e[l-1];e[l]=[t,r,a]}}(),function(){i.n=function(e){var o=e&&e.__esModule?function(){return e["default"]}:function(){return e};return i.d(o,{a:o}),o}}(),function(){i.d=function(e,o){for(var t in o)i.o(o,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})}}(),function(){i.g=function(){if("object"===typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"===typeof window)return window}}()}(),function(){i.o=function(e,o){return Object.prototype.hasOwnProperty.call(e,o)}}(),function(){i.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){var e={143:0};i.O.j=function(o){return 0===e[o]};var o=function(o,t){var r,a,d=t[0],n=t[1],s=t[2],u=0;if(d.some((function(o){return 0!==e[o]}))){for(r in n)i.o(n,r)&&(i.m[r]=n[r]);if(s)var l=s(i)}for(o&&o(t);u<d.length;u++)a=d[u],i.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return i.O(l)},t=self["webpackChunkjamit_audio_recorder"]=self["webpackChunkjamit_audio_recorder"]||[];t.forEach(o.bind(null,0)),t.push=o.bind(null,t.push.bind(t))}();var t=i.O(void 0,[998],(function(){return i(122)}));t=i.O(t)})();
//# sourceMappingURL=app.9b4ed813.js.map