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