2023-07-12 18:27:40 +08:00

70 lines
22 KiB
JavaScript

import{o as E,c as P,a as g,d as Y,r as M,b as J,e as K,f as j,g as W,h as $,w as V,O as F,i as U,j as O,k as x,t as q,v as X,u as D}from"./index.js";import{d as Q}from"./vue-tippy.esm-browser.js";function T(c,t,e,i){return new(e||(e=Promise))(function(s,a){function n(h){try{l(i.next(h))}catch(o){a(o)}}function r(h){try{l(i.throw(h))}catch(o){a(o)}}function l(h){var o;h.done?s(h.value):(o=h.value,o instanceof e?o:new e(function(u){u(o)})).then(n,r)}l((i=i.apply(c,t||[])).next())})}const G={decode:function(c,t){return T(this,void 0,void 0,function*(){const e=new AudioContext({sampleRate:t}),i=e.decodeAudioData(c);return i.finally(()=>e.close()),i})},createBuffer:function(c,t){return typeof c[0]=="number"&&(c=[c]),function(e){const i=e[0];if(i.some(s=>s>1||s<-1)){const s=i.length;let a=0;for(let n=0;n<s;n++){const r=Math.abs(i[n]);r>a&&(a=r)}for(const n of e)for(let r=0;r<s;r++)n[r]/=a}}(c),{duration:t,length:c[0].length,sampleRate:c[0].length/t,numberOfChannels:c.length,getChannelData:e=>c==null?void 0:c[e],copyFromChannel:AudioBuffer.prototype.copyFromChannel,copyToChannel:AudioBuffer.prototype.copyToChannel}}},Z={fetchBlob:function(c,t){return T(this,void 0,void 0,function*(){return fetch(c,t).then(e=>e.blob())})}};class z{constructor(){this.listeners={}}on(t,e){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),s=this.on(t,()=>{i(),s()});return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach(i=>i(...e))}}class tt extends z{constructor(t){super(),t.media?this.media=t.media:this.media=document.createElement("audio"),t.autoplay&&(this.media.autoplay=!0),t.playbackRate!=null&&(this.media.playbackRate=t.playbackRate)}onMediaEvent(t,e,i){return this.media.addEventListener(t,e,i),()=>this.media.removeEventListener(t,e)}onceMediaEvent(t,e){return this.onMediaEvent(t,e,{once:!0})}getSrc(){return this.media.currentSrc||this.media.src||""}revokeSrc(){const t=this.getSrc();t.startsWith("blob:")&&URL.revokeObjectURL(t)}setSrc(t,e){if(this.getSrc()===t)return;this.revokeSrc();const i=e instanceof Blob?URL.createObjectURL(e):t;this.media.src=i,this.media.load()}destroy(){this.media.pause(),this.revokeSrc(),this.media.src="",this.media.load()}play(){return this.media.play()}pause(){this.media.pause()}isPlaying(){return this.media.currentTime>0&&!this.media.paused&&!this.media.ended}setTime(t){this.media.currentTime=t}getDuration(){return this.media.duration}getCurrentTime(){return this.media.currentTime}getVolume(){return this.media.volume}setVolume(t){this.media.volume=t}getMuted(){return this.media.muted}setMuted(t){this.media.muted=t}getPlaybackRate(){return this.media.playbackRate}setPlaybackRate(t,e){e!=null&&(this.media.preservesPitch=e),this.media.playbackRate=t}getMediaElement(){return this.media}setSinkId(t){return this.media.setSinkId(t)}}class R extends z{constructor(t){let e;if(super(),this.timeouts=[],this.isScrolling=!1,this.audioData=null,this.resizeObserver=null,this.isDragging=!1,this.options=t,typeof t.container=="string"?e=document.querySelector(t.container):t.container instanceof HTMLElement&&(e=t.container),!e)throw new Error("Container not found");this.parent=e;const[i,s]=this.initHtml();e.appendChild(i),this.container=i,this.scrollContainer=s.querySelector(".scroll"),this.wrapper=s.querySelector(".wrapper"),this.canvasWrapper=s.querySelector(".canvases"),this.progressWrapper=s.querySelector(".progress"),this.cursor=s.querySelector(".cursor"),this.initEvents()}initEvents(){this.wrapper.addEventListener("click",e=>{const i=this.wrapper.getBoundingClientRect(),s=(e.clientX-i.left)/i.width;this.emit("click",s)}),this.initDrag(),this.scrollContainer.addEventListener("scroll",()=>{const{scrollLeft:e,scrollWidth:i,clientWidth:s}=this.scrollContainer,a=e/i,n=(e+s)/i;this.emit("scroll",a,n)});const t=this.createDelay(100);this.resizeObserver=new ResizeObserver(()=>{t(()=>this.reRender())}),this.resizeObserver.observe(this.scrollContainer)}initDrag(){(function(t,e,i,s,a=5){let n=()=>{};if(!t)return n;const r=l=>{if(l.button===2)return;l.preventDefault(),l.stopPropagation();let h=l.clientX,o=l.clientY,u=!1;const p=v=>{v.preventDefault(),v.stopPropagation();const b=v.clientX,C=v.clientY;if(u||Math.abs(b-h)>=a||Math.abs(C-o)>=a){const{left:w,top:_}=t.getBoundingClientRect();u||(u=!0,i==null||i(h-w,o-_)),e(b-h,C-o,b-w,C-_),h=b,o=C}},f=v=>{u&&(v.preventDefault(),v.stopPropagation())},m=()=>{u&&(s==null||s()),n()};document.addEventListener("pointermove",p),document.addEventListener("pointerup",m),document.addEventListener("pointerleave",m),document.addEventListener("click",f,!0),n=()=>{document.removeEventListener("pointermove",p),document.removeEventListener("pointerup",m),document.removeEventListener("pointerleave",m),setTimeout(()=>{document.removeEventListener("click",f,!0)},10)}};t.addEventListener("pointerdown",r)})(this.wrapper,(t,e,i)=>{this.emit("drag",Math.max(0,Math.min(1,i/this.wrapper.clientWidth)))},()=>this.isDragging=!0,()=>this.isDragging=!1)}getHeight(){return this.options.height==null?128:isNaN(Number(this.options.height))?this.options.height==="auto"&&this.parent.clientHeight||128:Number(this.options.height)}initHtml(){const t=document.createElement("div"),e=t.attachShadow({mode:"open"});return e.innerHTML=`
<style>
:host {
user-select: none;
}
:host .scroll {
overflow-x: auto;
overflow-y: hidden;
width: 100%;
position: relative;
touch-action: none;
}
:host .noScrollbar {
scrollbar-color: transparent;
scrollbar-width: none;
}
:host .noScrollbar::-webkit-scrollbar {
display: none;
-webkit-appearance: none;
}
:host .wrapper {
position: relative;
overflow: visible;
z-index: 2;
}
:host .canvases {
min-height: ${this.getHeight()}px;
}
:host .canvases > div {
position: relative;
}
:host canvas {
display: block;
position: absolute;
top: 0;
image-rendering: pixelated;
}
:host .progress {
pointer-events: none;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 0;
height: 100%;
overflow: hidden;
}
:host .progress > div {
position: relative;
}
:host .cursor {
pointer-events: none;
position: absolute;
z-index: 5;
top: 0;
left: 0;
height: 100%;
border-radius: 2px;
}
</style>
<div class="scroll" part="scroll">
<div class="wrapper">
<div class="canvases"></div>
<div class="progress" part="progress"></div>
<div class="cursor" part="cursor"></div>
</div>
</div>
`,[t,e]}setOptions(t){this.options=t,this.reRender()}getWrapper(){return this.wrapper}getScroll(){return this.scrollContainer.scrollLeft}destroy(){var t;this.container.remove(),(t=this.resizeObserver)===null||t===void 0||t.disconnect()}createDelay(t=10){const e={};return this.timeouts.push(e),i=>{e.timeout&&clearTimeout(e.timeout),e.timeout=setTimeout(i,t)}}convertColorValues(t){if(!Array.isArray(t))return t||"";if(t.length<2)return t[0]||"";const e=document.createElement("canvas"),i=e.getContext("2d").createLinearGradient(0,0,0,e.height),s=1/(t.length-1);return t.forEach((a,n)=>{const r=n*s;i.addColorStop(r,a)}),i}renderBars(t,e,i){if(i.fillStyle=this.convertColorValues(e.waveColor),e.renderFunction)return void e.renderFunction(t,i);const s=t[0],a=t[1]||t[0],n=s.length,r=window.devicePixelRatio||1,{width:l,height:h}=i.canvas,o=h/2,u=e.barHeight||1,p=e.barWidth?e.barWidth*r:1,f=e.barGap?e.barGap*r:e.barWidth?p/2:0,m=e.barRadius||0,v=l/(p+f)/n;let b=1;if(e.normalize){b=0;for(let d=0;d<n;d++){const k=Math.abs(s[d]);k>b&&(b=k)}}const C=o/b*u,w=m&&"roundRect"in i?"roundRect":"rect";i.beginPath();let _=0,S=0,y=0;for(let d=0;d<=n;d++){const k=Math.round(d*v);if(k>_){const H=Math.round(S*C),N=H+Math.round(y*C)||1;let L=o-H;e.barAlign==="top"?L=0:e.barAlign==="bottom"&&(L=h-N),i[w](_*(p+f),L,p,N,m),_=k,S=0,y=0}const A=Math.abs(s[d]||0),I=Math.abs(a[d]||0);A>S&&(S=A),I>y&&(y=I)}i.fill(),i.closePath()}renderSingleCanvas(t,e,i,s,a,n,r,l){const h=window.devicePixelRatio||1,o=document.createElement("canvas"),u=t[0].length;o.width=Math.round(i*(n-a)/u),o.height=s*h,o.style.width=`${Math.floor(o.width/h)}px`,o.style.height=`${s}px`,o.style.left=`${Math.floor(a*i/h/u)}px`,r.appendChild(o);const p=o.getContext("2d");this.renderBars(t.map(v=>v.slice(a,n)),e,p);const f=o.cloneNode();l.appendChild(f);const m=f.getContext("2d");o.width>0&&o.height>0&&m.drawImage(o,0,0),m.globalCompositeOperation="source-in",m.fillStyle=this.convertColorValues(e.progressColor),m.fillRect(0,0,o.width,o.height)}renderWaveform(t,e,i){const s=document.createElement("div"),a=this.getHeight();s.style.height=`${a}px`,this.canvasWrapper.style.minHeight=`${a}px`,this.canvasWrapper.appendChild(s);const n=s.cloneNode();this.progressWrapper.appendChild(n);const{scrollLeft:r,scrollWidth:l,clientWidth:h}=this.scrollContainer,o=t[0].length,u=o/l;let p=Math.min(R.MAX_CANVAS_WIDTH,h);if(e.barWidth||e.barGap){const y=e.barWidth||.5,d=y+(e.barGap||y/2);p%d!=0&&(p=Math.floor(p/d)*d)}const f=Math.floor(Math.abs(r)*u),m=Math.floor(f+p*u),v=m-f,b=(y,d)=>{this.renderSingleCanvas(t,e,i,a,Math.max(0,y),Math.min(d,o),s,n)},C=this.createDelay(),w=this.createDelay(),_=(y,d)=>{b(y,d),y>0&&C(()=>{_(y-v,d-v)})},S=(y,d)=>{b(y,d),d<o&&w(()=>{S(y+v,d+v)})};_(f,m),m<o&&S(m,m+v)}render(t){this.timeouts.forEach(r=>r.timeout&&clearTimeout(r.timeout)),this.timeouts=[],this.canvasWrapper.innerHTML="",this.progressWrapper.innerHTML="",this.wrapper.style.width="";const e=window.devicePixelRatio||1,i=this.scrollContainer.clientWidth,s=Math.ceil(t.duration*(this.options.minPxPerSec||0));this.isScrolling=s>i;const a=this.options.fillParent&&!this.isScrolling,n=(a?i:s)*e;if(this.wrapper.style.width=a?"100%":`${s}px`,this.scrollContainer.style.overflowX=this.isScrolling?"auto":"hidden",this.scrollContainer.classList.toggle("noScrollbar",!!this.options.hideScrollbar),this.cursor.style.backgroundColor=`${this.options.cursorColor||this.options.progressColor}`,this.cursor.style.width=`${this.options.cursorWidth}px`,this.options.splitChannels)for(let r=0;r<t.numberOfChannels;r++){const l=Object.assign(Object.assign({},this.options),this.options.splitChannels[r]);this.renderWaveform([t.getChannelData(r)],l,n)}else{const r=[t.getChannelData(0)];t.numberOfChannels>1&&r.push(t.getChannelData(1)),this.renderWaveform(r,this.options,n)}this.audioData=t,this.emit("render")}reRender(){if(!this.audioData)return;const t=this.progressWrapper.clientWidth;this.render(this.audioData);const e=this.progressWrapper.clientWidth;this.scrollContainer.scrollLeft+=e-t}zoom(t){this.options.minPxPerSec=t,this.reRender()}scrollIntoView(t,e=!1){const{clientWidth:i,scrollLeft:s,scrollWidth:a}=this.scrollContainer,n=a*t,r=i/2;if(n>s+(e&&this.options.autoCenter&&!this.isDragging?r:i)||n<s)if(this.options.autoCenter&&!this.isDragging){const l=r/20;n-(s+r)>=l&&n<s+i?this.scrollContainer.scrollLeft+=l:this.scrollContainer.scrollLeft=n-r}else this.isDragging?this.scrollContainer.scrollLeft=n<s?n-10:n-i+10:this.scrollContainer.scrollLeft=n;{const{scrollLeft:l}=this.scrollContainer,h=l/a,o=(l+i)/a;this.emit("scroll",h,o)}}renderProgress(t,e){isNaN(t)||(this.progressWrapper.style.width=100*t+"%",this.cursor.style.left=100*t+"%",this.cursor.style.marginLeft=Math.round(100*t)===100?`-${this.options.cursorWidth}px`:"",this.isScrolling&&this.options.autoScroll&&this.scrollIntoView(t,e))}}R.MAX_CANVAS_WIDTH=4e3;class et extends z{constructor(){super(...arguments),this.unsubscribe=()=>{}}start(){this.unsubscribe=this.on("tick",()=>{requestAnimationFrame(()=>{this.emit("tick")})}),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}}const it={waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interact:!0,autoScroll:!0,autoCenter:!0,sampleRate:8e3};class B extends tt{static create(t){return new B(t)}constructor(t){var e,i;super({media:t.media,autoplay:t.autoplay,playbackRate:t.audioRate}),this.plugins=[],this.decodedData=null,this.duration=null,this.subscriptions=[],this.options=Object.assign({},it,t),this.timer=new et,this.renderer=new R(this.options),this.initPlayerEvents(),this.initRendererEvents(),this.initTimerEvents(),this.initPlugins();const s=this.options.url||((e=this.options.media)===null||e===void 0?void 0:e.currentSrc)||((i=this.options.media)===null||i===void 0?void 0:i.src);s&&this.load(s,this.options.peaks,this.options.duration)}setOptions(t){this.options=Object.assign({},this.options,t),this.renderer.setOptions(this.options),t.audioRate&&this.setPlaybackRate(t.audioRate)}initTimerEvents(){this.subscriptions.push(this.timer.on("tick",()=>{const t=this.getCurrentTime();this.renderer.renderProgress(t/this.getDuration(),!0),this.emit("timeupdate",t),this.emit("audioprocess",t)}))}initPlayerEvents(){this.subscriptions.push(this.onMediaEvent("timeupdate",()=>{const t=this.getCurrentTime();this.renderer.renderProgress(t/this.getDuration(),this.isPlaying()),this.emit("timeupdate",t)}),this.onMediaEvent("play",()=>{this.emit("play"),this.timer.start()}),this.onMediaEvent("pause",()=>{this.emit("pause"),this.timer.stop()}),this.onMediaEvent("ended",()=>{this.emit("finish")}),this.onMediaEvent("seeking",()=>{this.emit("seeking",this.getCurrentTime())}))}initRendererEvents(){this.subscriptions.push(this.renderer.on("click",t=>{this.options.interact&&(this.seekTo(t),this.emit("interaction",this.getCurrentTime()),this.emit("click",t))}),this.renderer.on("scroll",(t,e)=>{const i=this.getDuration();this.emit("scroll",t*i,e*i)}),this.renderer.on("render",()=>{this.emit("redraw")}));{let t;this.subscriptions.push(this.renderer.on("drag",e=>{this.options.interact&&(this.renderer.renderProgress(e),clearTimeout(t),t=setTimeout(()=>{this.seekTo(e)},this.isPlaying()?0:200),this.emit("interaction",e*this.getDuration()),this.emit("drag",e))}))}}initPlugins(){var t;!((t=this.options.plugins)===null||t===void 0)&&t.length&&this.options.plugins.forEach(e=>{this.registerPlugin(e)})}registerPlugin(t){return t.init(this),this.plugins.push(t),this.subscriptions.push(t.once("destroy",()=>{this.plugins=this.plugins.filter(e=>e!==t)})),t}getWrapper(){return this.renderer.getWrapper()}getScroll(){return this.renderer.getScroll()}getActivePlugins(){return this.plugins}load(t,e,i){return T(this,void 0,void 0,function*(){this.isPlaying()&&this.pause(),this.decodedData=null,this.duration=null,this.emit("load",t);const s=e?void 0:yield Z.fetchBlob(t,this.options.fetchParams);if(this.setSrc(t,s),this.duration=i||this.getDuration()||(yield new Promise(a=>{this.onceMediaEvent("loadedmetadata",()=>a(this.getDuration()))}))||0,e)this.decodedData=G.createBuffer(e,this.duration);else if(s){const a=yield s.arrayBuffer();this.decodedData=yield G.decode(a,this.options.sampleRate),this.duration!==0&&this.duration!==1/0||(this.duration=this.decodedData.duration)}this.emit("decode",this.duration),this.decodedData&&this.renderer.render(this.decodedData),this.emit("ready",this.duration)})}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(t),this.emit("zoom",t)}getDecodedData(){return this.decodedData}getDuration(){return this.duration!==null?this.duration:super.getDuration()}toggleInteraction(t){this.options.interact=t}seekTo(t){const e=this.getDuration()*t;this.setTime(e)}playPause(){return T(this,void 0,void 0,function*(){return this.isPlaying()?this.pause():this.play()})}stop(){this.pause(),this.setTime(0)}skip(t){this.setTime(this.getCurrentTime()+t)}empty(){this.load("",[[0]],.001)}destroy(){this.emit("destroy"),this.plugins.forEach(t=>t.destroy()),this.subscriptions.forEach(t=>t()),this.timer.destroy(),this.renderer.destroy(),super.destroy()}}const st={xmlns:"http://www.w3.org/2000/svg",width:"40",height:"40",class:"icon",viewBox:"0 0 1024 1024"},nt=g("path",{fill:"#409eff",d:"M512 0C229.227 0 0 229.227 0 512s229.227 512 512 512 512-229.227 512-512S794.773 0 512 0zm-33.023 704.742c0 34.191-25.028 62.18-55.617 62.18s-55.618-27.975-55.618-62.18V319.258c0-34.19 25.028-62.18 55.618-62.18s55.617 27.975 55.617 62.18zm170.328 0c0 34.191-25.027 62.18-55.617 62.18s-55.617-27.975-55.617-62.18V319.258c0-34.19 25.027-62.18 55.617-62.18s55.617 27.975 55.617 62.18z"},null,-1),rt=[nt];function ot(c,t){return E(),P("svg",st,rt)}const at={render:ot},lt={xmlns:"http://www.w3.org/2000/svg",width:"40",height:"40",class:"icon",viewBox:"0 0 1024 1024"},ht=g("path",{fill:"#f56c6c",d:"M512 42.667C252.793 42.667 42.667 252.793 42.667 512S252.793 981.333 512 981.333 981.333 771.207 981.333 512 771.207 42.667 512 42.667zM708.547 543.16l-266.667 176A37.333 37.333 0 0 1 384 688V336.033a37.333 37.333 0 0 1 57.893-31.16l266.667 176a37.333 37.333 0 0 1 0 62.32z"},null,-1),ct=[ht];function dt(c,t){return E(),P("svg",lt,ct)}const ut={render:dt},pt={xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",class:"icon",viewBox:"0 0 1024 1024"},mt=g("path",{fill:"#409EFF",d:"M515.5 91.5C747.4 91.5 936 280.1 936 512S747.4 932.5 515.5 932.5 95 743.9 95 512 283.6 91.5 515.5 91.5m0-87C235.2 4.5 8 231.7 8 512s227.2 507.5 507.5 507.5S1023 792.3 1023 512 795.8 4.5 515.5 4.5z"},null,-1),vt=g("path",{fill:"#81888f",d:"m337.7 450.8 84.1 61.2-84.1 61.2V450.8m-28.8-115c-30.1 0-58.2 23.8-58.2 58.1v236.2c0 34.3 28.1 58.1 58.2 58.1 11.5 0 23.3-3.5 33.9-11.2l162.4-118.1c31.9-23.2 31.9-70.7 0-93.8L342.8 347c-10.6-7.7-22.4-11.2-33.9-11.2z"},null,-1),gt=g("path",{fill:"#81888f",d:"m529.1 450.8 84.1 61.2-84.1 61.2V450.8m-28.8-115c-30.1 0-58.2 23.8-58.2 58.1v236.2c0 34.3 28.1 58.1 58.2 58.1 11.5 0 23.3-3.5 33.9-11.2l162.4-118.1c31.9-23.2 31.9-70.7 0-93.8L534.2 347c-10.6-7.7-22.4-11.2-33.9-11.2z"},null,-1),ft=g("path",{fill:"#81888f",d:"M736.8 367c-24 0-43.5 19.5-43.5 43.5v203c0 24 19.5 43.5 43.5 43.5s43.5-19.5 43.5-43.5v-203c0-24-19.5-43.5-43.5-43.5z"},null,-1),yt=[mt,vt,gt,ft];function bt(c,t){return E(),P("svg",pt,yt)}const wt={render:bt},_t={xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",class:"icon",viewBox:"0 0 1024 1024"},Ct=g("path",{fill:"#409EFF",d:"M512 90.3c231.9 0 420.5 188.6 420.5 420.5S743.9 931.3 512 931.3 91.5 742.7 91.5 510.8 280.1 90.3 512 90.3m0-87C231.7 3.3 4.5 230.5 4.5 510.8s227.2 507.5 507.5 507.5 507.5-227.2 507.5-507.5S792.3 3.3 512 3.3z"},null,-1),Et=g("path",{fill:"#81888f",d:"M689.8 449.7V572l-84.1-61.2 84.1-61.1m28.8-115.1c-11.5 0-23.3 3.5-33.9 11.2L522.3 463.9c-31.9 23.2-31.9 70.6 0 93.8l162.4 118.1c10.6 7.7 22.4 11.2 33.9 11.2 30.1 0 58.2-23.8 58.2-58.1V392.7c0-34.3-28.1-58.1-58.2-58.1z"},null,-1),xt=g("path",{fill:"#81888f",d:"M498.4 449.7V572l-84.1-61.2 84.1-61.1m28.8-115.1c-11.5 0-23.3 3.5-33.9 11.2L330.9 463.9c-31.9 23.2-31.9 70.6 0 93.8l162.4 118.1c10.6 7.7 22.4 11.2 33.9 11.2 30.1 0 58.2-23.8 58.2-58.1V392.7c0-34.3-28.1-58.1-58.2-58.1z"},null,-1),St=g("path",{fill:"#81888f",d:"M290.7 365.8c-24 0-43.5 19.5-43.5 43.5v203c0 24 19.5 43.5 43.5 43.5s43.5-19.5 43.5-43.5v-203c0-24-19.5-43.5-43.5-43.5z"},null,-1),Dt=[Ct,Et,xt,St];function Mt(c,t){return E(),P("svg",_t,Dt)}const Pt={render:Mt};const kt={class:"card-header"},Tt={class:"font-medium"},Rt=g("span",{class:"text-[red]"}," (温馨提示:音频默认最大声音,播放时请调低电脑声音,以免影响到您) ",-1),Lt={class:"w-8/12 !m-auto !mt-[20px]","element-loading-background":"transparent"},Wt={class:"flex justify-between"},$t=g("span",{class:"text-[#81888f]"},"00:00",-1),Vt={class:"text-4xl mt-2"},Ot={class:"text-[#81888f]"},zt={class:"flex mt-2 w-[180px] justify-around m-auto"},It=Y({name:"Wavesurfer",__name:"index",setup(c){const t=Q,e=M(!0),i=M(null),s=M(),a=M(),n=M(),r=M(!1),{VITE_PUBLIC_PATH:l}={VITE_PORT:"8848",VITE_HIDE_HOME:"false",VITE_PUBLIC_PATH:"/vue-pure-admin/",VITE_ROUTER_HISTORY:"hash",VITE_CDN:"false",VITE_COMPRESSION:"none",BASE_URL:"/vue-pure-admin/",MODE:"production",DEV:!1,PROD:!0,SSR:!1},h=`${l}audio/海阔天空.mp3`;function o(){i.value=B.create({container:s.value,height:"auto",waveColor:"rgb(200, 0, 200)",progressColor:"rgb(100, 0, 100)",cursorColor:"rgb(64, 158, 255)",cursorWidth:4,url:h}),i.value.on("decode",()=>e.value=!1),i.value.on("ready",()=>{const{duration:u}=i.value,{m:p,s:f}=F(u);a.value=`${p}:${f}`,i.value.setTime(u/2)}),i.value.on("timeupdate",u=>{const{m:p,s:f}=F(u);n.value=`${p}:${f}`}),i.value.on("play",()=>r.value=!0),i.value.on("pause",()=>r.value=!1)}return J(o),K(()=>{i.value&&(i.value.destroy(),i.value=null)}),(u,p)=>{const f=j("el-link"),m=j("el-card"),v=W("longpress"),b=W("motion-pop"),C=W("loading");return E(),$(m,{shadow:"never"},{header:V(()=>[g("div",kt,[g("span",Tt,[U(" 音频可视化,采用开源的 "),O(f,{href:"https://wavesurfer-js.org/",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:V(()=>[U(" wavesurfer.js ")]),_:1}),Rt])])]),default:V(()=>[x((E(),P("div",Lt,[g("div",{ref_key:"wavesurferRef",ref:s},null,512),x(g("div",Wt,[$t,g("h1",Vt,q(n.value),1),g("span",Ot,q(a.value),1)],512),[[X,a.value]]),x(g("div",zt,[x(O(D(Pt),{class:"cursor-pointer"},null,512),[[D(t),{content:"快退(可长按)",placement:"bottom",animation:"scale"}],[v,()=>{var w;return(w=i.value)==null?void 0:w.skip(-1)},"0:100"]]),x((E(),P("div",{class:"cursor-pointer",onClick:p[0]||(p[0]=w=>{var _;return(_=i.value)==null?void 0:_.playPause()})},[r.value?x((E(),$(D(at),{key:0},null,512)),[[b]]):x((E(),$(D(ut),{key:1},null,512)),[[b]])])),[[D(t),{content:r.value?"暂停":"播放",placement:"bottom",animation:"scale"}]]),x(O(D(wt),{class:"cursor-pointer"},null,512),[[D(t),{content:"快进(可长按)",placement:"bottom",animation:"scale"}],[v,()=>{var w;return(w=i.value)==null?void 0:w.skip(1)},"0:100"]])],512),[[X,a.value]])])),[[C,e.value]])]),_:1})}}});export{It as default};