vue-files-preview-inno/lib/packages/preview/supports/audio-preview/index.vue2.js

A tool for previewing files such as doc, excel, pdf, image, markdown, txt, audio, and video and so on.

"use strict";const e=require("vue"),D=require("../../utils/utils.js"),S={class:"audio-preview music-container flex flex-column flex-align"},W={class:"audio-container flex-align"},A={class:"flex-column",style:{"margin-left":"0.5rem"}},H={style:{"font-size":"1.6rem",color:"#999"}},z={class:"mp3Box"},$=["src"],M={class:"cvs-container"},P={ref:"canvasRef"},T=e.defineComponent({__name:"index",props:{file:{default:()=>null},url:{default:()=>null},name:{default:()=>null}},emits:["rendered","error"],setup(w,{emit:V}){const h=w,u=V,{proxy:i}=e.getCurrentInstance(),y=e.ref(),g=e.ref(),C=e.ref(),r=e.ref(),a=e.ref(),s=e.ref(!1),l=e.ref(),o=e.ref(),v=e.ref("Wavy"),_=e.ref(null);function B(){y.value=i.$refs.audioRef,g.value=i.$refs.ulRef,C.value=i.$refs.containerRef,r.value=i.$refs.canvasRef,a.value=r.value.getContext("2d")}const b=e.computed(()=>{var t;return(t=C.value)==null?void 0:t.clientHeight});e.computed(()=>{var t;return(t=g.value.children[0])==null?void 0:t.clientHeight}),e.computed(()=>{var t;return((t=g.value)==null?void 0:t.clientHeight)-b.value});function k(){r.value.width=window.innerWidth*devicePixelRatio,r.value.height=300}function q(){y.value.onplay=()=>{if(s.value)return;const t=new AudioContext,n=t.createMediaElementSource(y.value);l.value=t.createAnalyser(),l.value.fftSize=512,o.value=new Uint8Array(l.value.frequencyBinCount),n.connect(l.value),l.value.connect(t.destination),s.value=!0}}function R(){requestAnimationFrame(R);const{width:t,height:n}=r.value;if(a.value.clearRect(0,0,t,n),!!s.value&&o.value){l.value&&l.value.getByteFrequencyData(o.value);const p=o.value.length,d=t/p;a.value.fillStyle="skyblue",o.value.forEach((c,E)=>{const f=c/255*n,N=E*d,m=n-f;a.value.fillRect(N,m,d,f)})}}function x(){requestAnimationFrame(x);const{width:t,height:n}=r.value;if(a.value.clearRect(0,0,t,n),!!s.value&&o.value){l.value&&l.value.getByteFrequencyData(o.value);const p=o.value.length,d=t*1/p;let c=0;a.value.beginPath(),a.value.strokeStyle="skyblue",o.value.forEach((E,f)=>{const m=E/255*n/2;f===0?a.value.moveTo(c,m):a.value.lineTo(c,m),c+=d}),a.value.lineTo(t,n/2),a.value.stroke()}}function F(){v.value=v.value==="Columnar"?"Wavy":"Columnar",v.value=="Columnar"?R():x()}return e.watch(()=>h.file,t=>{t&&D.getFileRenderByFile(t).then(n=>{_.value=n,u("rendered")}).catch(n=>{u("error",n)})},{immediate:!0}),e.watch(()=>h.url,t=>{t&&!h.file&&D.getFileRenderByUrl(t).then(n=>{_.value=n,u("rendered")}).catch(n=>{u("error",n)})},{immediate:!0}),e.onMounted(()=>{B(),q(),k(),x()}),(t,n)=>(e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("div",W,[e.createElementVNode("div",A,[e.createElementVNode("div",H,e.toDisplayString(w.name),1)]),e.createElementVNode("div",z,[e.createElementVNode("audio",{ref:"audioRef",controls:"",src:_.value,crossorigin:"anonymous"},null,8,$)]),e.createElementVNode("div",null,[e.createElementVNode("button",{class:"mode-btn",onClick:F},e.toDisplayString(v.value),1)])]),e.createElementVNode("div",M,[e.createElementVNode("canvas",P,null,512)])]))}});module.exports=T;
//# sourceMappingURL=index.vue2.js.map