mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-08 17:37:24 +08:00
74 lines
24 KiB
JavaScript
74 lines
24 KiB
JavaScript
import{g as M,n as P,h as v,d as Y,r as x,o as J,b as K,c as I,e as D,f as $,w as B,O as j,i as F,j as O,l as T,t as N,v as U,u as S}from"./index.js";import{d as Q}from"./vue-tippy.esm-browser.js";var Z=globalThis&&globalThis.__awaiter||function(h,t,e,i){function n(s){return s instanceof e?s:new e(function(o){o(s)})}return new(e||(e=Promise))(function(s,o){function a(r){try{l(i.next(r))}catch(c){o(c)}}function d(r){try{l(i.throw(r))}catch(c){o(c)}}function l(r){r.done?s(r.value):n(r.value).then(a,d)}l((i=i.apply(h,t||[])).next())})};function tt(h,t){return Z(this,void 0,void 0,function*(){const e=new AudioContext({sampleRate:t});return e.decodeAudioData(h).finally(()=>e.close())})}function et(h){const t=h[0];if(t.some(e=>e>1||e<-1)){const e=t.length;let i=0;for(let n=0;n<e;n++){const s=Math.abs(t[n]);s>i&&(i=s)}for(const n of h)for(let s=0;s<e;s++)n[s]/=i}return h}function it(h,t){return typeof h[0]=="number"&&(h=[h]),et(h),{duration:t,length:h[0].length,sampleRate:h[0].length/t,numberOfChannels:h.length,getChannelData:e=>h==null?void 0:h[e],copyFromChannel:AudioBuffer.prototype.copyFromChannel,copyToChannel:AudioBuffer.prototype.copyToChannel}}const X={decode:tt,createBuffer:it};var G=globalThis&&globalThis.__awaiter||function(h,t,e,i){function n(s){return s instanceof e?s:new e(function(o){o(s)})}return new(e||(e=Promise))(function(s,o){function a(r){try{l(i.next(r))}catch(c){o(c)}}function d(r){try{l(i.throw(r))}catch(c){o(c)}}function l(r){r.done?s(r.value):n(r.value).then(a,d)}l((i=i.apply(h,t||[])).next())})};function st(h,t,e){var i,n;return G(this,void 0,void 0,function*(){const s=yield fetch(h,e);{const o=(i=s.clone().body)===null||i===void 0?void 0:i.getReader(),a=Number((n=s.headers)===null||n===void 0?void 0:n.get("Content-Length"));let d=0;const l=(r,c)=>G(this,void 0,void 0,function*(){if(r)return;d+=(c==null?void 0:c.length)||0;const p=Math.round(d/a*100);return t(p),o==null?void 0:o.read().then(({done:f,value:u})=>l(f,u))});o==null||o.read().then(({done:r,value:c})=>l(r,c))}return s.blob()})}const nt={fetchBlob:st};class H{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),n=this.on(t,()=>{i(),n()});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 rt extends H{constructor(t){super(),t.media?this.media=t.media:this.media=document.createElement("audio"),t.mediaControls&&(this.media.controls=!0),t.autoplay&&(this.media.autoplay=!0),t.playbackRate!=null&&this.onceMediaEvent("canplay",()=>{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 n=e instanceof Blob?URL.createObjectURL(e):t;this.media.src=n,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)}}function ot(h,t,e,i,n=5){let s=()=>{};if(!h)return s;const o=a=>{if(a.button===2)return;a.preventDefault(),a.stopPropagation();let d=a.clientX,l=a.clientY,r=!1;const c=u=>{u.preventDefault(),u.stopPropagation();const m=u.clientX,g=u.clientY;if(r||Math.abs(m-d)>=n||Math.abs(g-l)>=n){const{left:w,top:_}=h.getBoundingClientRect();r||(r=!0,e==null||e(d-w,l-_)),t(m-d,g-l,m-w,g-_),d=m,l=g}},p=u=>{r&&(u.preventDefault(),u.stopPropagation())},f=()=>{r&&(i==null||i()),s()};document.addEventListener("pointermove",c),document.addEventListener("pointerup",f),document.addEventListener("pointerleave",f),document.addEventListener("click",p,!0),s=()=>{document.removeEventListener("pointermove",c),document.removeEventListener("pointerup",f),document.removeEventListener("pointerleave",f),setTimeout(()=>{document.removeEventListener("click",p,!0)},10)}};return h.addEventListener("pointerdown",o),()=>{s(),h.removeEventListener("pointerdown",o)}}class W extends H{constructor(t,e){super(),this.timeouts=[],this.isScrolling=!1,this.audioData=null,this.resizeObserver=null,this.isDragging=!1,this.options=t;let i;if(typeof t.container=="string"?i=document.querySelector(t.container):t.container instanceof HTMLElement&&(i=t.container),!i)throw new Error("Container not found");this.parent=i;const[n,s]=this.initHtml();i.appendChild(n),this.container=n,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"),e&&s.appendChild(e),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:n}=this.scrollContainer,s=e/i,o=(e+n)/i;this.emit("scroll",s,o)});const t=this.createDelay(100);this.resizeObserver=new ResizeObserver(()=>{t(()=>this.reRender())}),this.resizeObserver.observe(this.scrollContainer)}initDrag(){ot(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 audio {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
: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"),n=e.getContext("2d").createLinearGradient(0,0,0,e.height),s=1/(t.length-1);return t.forEach((o,a)=>{const d=a*s;n.addColorStop(d,o)}),n}renderBarWaveform(t,e,i,n){const s=t[0],o=t[1]||t[0],a=s.length,{width:d,height:l}=i.canvas,r=l/2,c=window.devicePixelRatio||1,p=e.barWidth?e.barWidth*c:1,f=e.barGap?e.barGap*c:e.barWidth?p/2:0,u=e.barRadius||0,m=d/(p+f)/a,g=u&&"roundRect"in i?"roundRect":"rect";i.beginPath();let w=0,_=0,y=0;for(let E=0;E<=a;E++){const b=Math.round(E*m);if(b>w){const z=Math.round(_*r*n),q=Math.round(y*r*n),A=z+q||1;let L=r-z;e.barAlign==="top"?L=0:e.barAlign==="bottom"&&(L=l-A),i[g](w*(p+f),L,p,A,u),w=b,_=0,y=0}const C=Math.abs(s[E]||0),k=Math.abs(o[E]||0);C>_&&(_=C),k>y&&(y=k)}i.fill(),i.closePath()}renderLineWaveform(t,e,i,n){const s=o=>{const a=t[o]||t[0],d=a.length,{height:l}=i.canvas,r=l/2,c=i.canvas.width/d;i.moveTo(0,r);let p=0,f=0;for(let u=0;u<=d;u++){const m=Math.round(u*c);if(m>p){const w=Math.round(f*r*n)||1,_=r+w*(o===0?-1:1);i.lineTo(p,_),p=m,f=0}const g=Math.abs(a[u]||0);g>f&&(f=g)}i.lineTo(p,r)};i.beginPath(),s(0),s(1),i.fill(),i.closePath()}renderWaveform(t,e,i){if(i.fillStyle=this.convertColorValues(e.waveColor),e.renderFunction){e.renderFunction(t,i);return}let n=e.barHeight||1;if(e.normalize){const s=Array.from(t[0]).reduce((o,a)=>Math.max(o,Math.abs(a)),0);n=s?1/s:1}if(e.barWidth||e.barGap||e.barAlign){this.renderBarWaveform(t,e,i,n);return}this.renderLineWaveform(t,e,i,n)}renderSingleCanvas(t,e,i,n,s,o,a,d){const l=window.devicePixelRatio||1,r=document.createElement("canvas"),c=t[0].length;r.width=Math.round(i*(o-s)/c),r.height=n*l,r.style.width=`${Math.floor(r.width/l)}px`,r.style.height=`${n}px`,r.style.left=`${Math.floor(s*i/l/c)}px`,a.appendChild(r);const p=r.getContext("2d");this.renderWaveform(t.map(m=>m.slice(s,o)),e,p);const f=r.cloneNode();d.appendChild(f);const u=f.getContext("2d");r.width>0&&r.height>0&&u.drawImage(r,0,0),u.globalCompositeOperation="source-in",u.fillStyle=this.convertColorValues(e.progressColor),u.fillRect(0,0,r.width,r.height)}renderChannel(t,e,i){const n=document.createElement("div"),s=this.getHeight();n.style.height=`${s}px`,this.canvasWrapper.style.minHeight=`${s}px`,this.canvasWrapper.appendChild(n);const o=n.cloneNode();this.progressWrapper.appendChild(o);const{scrollLeft:a,scrollWidth:d,clientWidth:l}=this.scrollContainer,r=t[0].length,c=r/d;let p=Math.min(W.MAX_CANVAS_WIDTH,l);if(e.barWidth||e.barGap){const b=e.barWidth||.5,C=e.barGap||b/2,k=b+C;p%k!==0&&(p=Math.floor(p/k)*k)}const f=Math.floor(Math.abs(a)*c),u=Math.floor(f+p*c),m=u-f,g=(b,C)=>{this.renderSingleCanvas(t,e,i,s,Math.max(0,b),Math.min(C,r),n,o)},w=this.createDelay(),_=this.createDelay(),y=(b,C)=>{g(b,C),b>0&&w(()=>{y(b-m,C-m)})},E=(b,C)=>{g(b,C),C<r&&_(()=>{E(b+m,C+m)})};y(f,u),u<r&&E(u,u+m)}render(t){this.timeouts.forEach(a=>a.timeout&&clearTimeout(a.timeout)),this.timeouts=[],this.canvasWrapper.innerHTML="",this.progressWrapper.innerHTML="",this.wrapper.style.width="";const e=window.devicePixelRatio||1,i=this.scrollContainer.clientWidth,n=Math.ceil(t.duration*(this.options.minPxPerSec||0));this.isScrolling=n>i;const s=this.options.fillParent&&!this.isScrolling,o=(s?i:n)*e;if(this.wrapper.style.width=s?"100%":`${n}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 a=0;a<t.numberOfChannels;a++){const d=Object.assign(Object.assign({},this.options),this.options.splitChannels[a]);this.renderChannel([t.getChannelData(a)],d,o)}else{const a=[t.getChannelData(0)];t.numberOfChannels>1&&a.push(t.getChannelData(1)),this.renderChannel(a,this.options,o)}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:n,scrollWidth:s}=this.scrollContainer,o=s*t,a=i/2,d=e&&this.options.autoCenter&&!this.isDragging?a:i;if(o>n+d||o<n)if(this.options.autoCenter&&!this.isDragging){const l=a/20;o-(n+a)>=l&&o<n+i?this.scrollContainer.scrollLeft+=l:this.scrollContainer.scrollLeft=o-a}else this.isDragging?this.scrollContainer.scrollLeft=o<n?o-10:o-i+10:this.scrollContainer.scrollLeft=o;{const{scrollLeft:l}=this.scrollContainer,r=l/s,c=(l+i)/s;this.emit("scroll",r,c)}}renderProgress(t,e){isNaN(t)||(this.progressWrapper.style.width=`${t*100}%`,this.cursor.style.left=`${t*100}%`,this.cursor.style.marginLeft=Math.round(t*100)===100?`-${this.options.cursorWidth}px`:"",this.isScrolling&&this.options.autoScroll&&this.scrollIntoView(t,e))}}W.MAX_CANVAS_WIDTH=4e3;class at extends H{constructor(){super(...arguments),this.unsubscribe=()=>{}}start(){this.unsubscribe=this.on("tick",()=>{requestAnimationFrame(()=>{this.emit("tick")})}),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}}var R=globalThis&&globalThis.__awaiter||function(h,t,e,i){function n(s){return s instanceof e?s:new e(function(o){o(s)})}return new(e||(e=Promise))(function(s,o){function a(r){try{l(i.next(r))}catch(c){o(c)}}function d(r){try{l(i.throw(r))}catch(c){o(c)}}function l(r){r.done?s(r.value):n(r.value).then(a,d)}l((i=i.apply(h,t||[])).next())})};const lt={waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interact:!0,autoScroll:!0,autoCenter:!0,sampleRate:8e3};class V extends rt{static create(t){return new V(t)}constructor(t){var e,i;super({media:t.media,mediaControls:t.mediaControls,autoplay:t.autoplay,playbackRate:t.audioRate}),this.plugins=[],this.decodedData=null,this.subscriptions=[],this.options=Object.assign({},lt,t),this.timer=new at;const n=t.media?void 0:this.getMediaElement();this.renderer=new W(this.options,n),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)}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("emptied",()=>{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",t*this.getDuration()),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)})}setOptions(t){this.options=Object.assign({},this.options,t),this.renderer.setOptions(this.options),t.audioRate&&this.setPlaybackRate(t.audioRate),t.mediaControls!=null&&(this.getMediaElement().controls=t.mediaControls)}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}loadAudio(t,e,i,n){return R(this,void 0,void 0,function*(){if(this.emit("load",t),this.isPlaying()&&this.pause(),this.decodedData=null,!e&&!i){const s=o=>this.emit("loading",o);e=yield nt.fetchBlob(t,s,this.options.fetchParams)}if(this.setSrc(t,e),i)n=(yield Promise.resolve(n||this.getDuration()))||(yield new Promise(s=>{this.onceMediaEvent("loadedmetadata",()=>s(this.getDuration()))}))||(yield Promise.resolve(0)),this.decodedData=X.createBuffer(i,n);else if(e){const s=yield e.arrayBuffer();this.decodedData=yield X.decode(s,this.options.sampleRate)}this.emit("decode",this.getDuration()),this.decodedData&&this.renderer.render(this.decodedData),this.emit("ready",this.getDuration())})}load(t,e,i){return R(this,void 0,void 0,function*(){yield this.loadAudio(t,void 0,e,i)})}loadBlob(t,e,i){return R(this,void 0,void 0,function*(){yield this.loadAudio("blob",t,e,i)})}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(t),this.emit("zoom",t)}getDecodedData(){return this.decodedData}exportPeaks({channels:t=1,maxLength:e=8e3,precision:i=1e4}={}){if(!this.decodedData)throw new Error("The audio has not been decoded yet");const n=Math.min(t,this.decodedData.numberOfChannels),s=[];for(let o=0;o<n;o++){const a=this.decodedData.getChannelData(o),d=Math.min(a.length,e),l=a.length/d,r=[];for(let c=0;c<d;c++){const p=Math.round(c*l),f=a[p];r.push(Math.round(f*i)/i)}s.push(r)}return s}getDuration(){let t=super.getDuration()||0;return(t===0||t===1/0)&&this.decodedData&&(t=this.decodedData.duration),t}toggleInteraction(t){this.options.interact=t}seekTo(t){const e=this.getDuration()*t;this.setTime(e)}playPause(){return R(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 ct={xmlns:"http://www.w3.org/2000/svg",width:"40",height:"40",class:"icon",viewBox:"0 0 1024 1024"},ht=v("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),dt=[ht];function ut(h,t){return M(),P("svg",ct,dt)}const pt={render:ut},ft={xmlns:"http://www.w3.org/2000/svg",width:"40",height:"40",class:"icon",viewBox:"0 0 1024 1024"},mt=v("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),vt=[mt];function gt(h,t){return M(),P("svg",ft,vt)}const yt={render:gt},bt={xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",class:"icon",viewBox:"0 0 1024 1024"},wt=v("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),_t=v("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),Ct=v("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),Et=v("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),Mt=[wt,_t,Ct,Et];function Tt(h,t){return M(),P("svg",bt,Mt)}const xt={render:Tt},St={xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",class:"icon",viewBox:"0 0 1024 1024"},kt=v("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),Pt=v("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),Rt=v("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),Wt=v("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),Lt=[kt,Pt,Rt,Wt];function Dt(h,t){return M(),P("svg",St,Lt)}const $t={render:Dt};const Bt={class:"card-header"},Ot={class:"font-medium"},Ht=v("span",{class:"text-[red]"}," （温馨提示：音频默认最大声音，播放时请调低电脑声音，以免影响到您） ",-1),Vt={class:"w-8/12 !m-auto !mt-[20px]","element-loading-background":"transparent"},zt={class:"flex justify-between"},At=v("span",{class:"text-[#81888f]"},"00:00",-1),It={class:"text-4xl mt-2"},jt={class:"text-[#81888f]"},Ft={class:"flex mt-2 w-[180px] justify-around m-auto"},Xt=Y({name:"Wavesurfer",__name:"index",setup(h){const t=Q,e=x(!0),i=x(null),n=x(),s=x(),o=x(),a=x(),d=x(!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},r=`${l}audio/海阔天空.mp3`;function c(){i.value=V.create({container:n.value,height:"auto",waveColor:"rgb(200, 0, 200)",progressColor:"rgb(100, 0, 100)",cursorColor:"rgb(64, 158, 255)",cursorWidth:4,url:r}),i.value.on("decode",()=>e.value=!1),i.value.on("ready",()=>{if(!i.value)return;const{decodedData:p}=i.value;o.value=p.duration;const{m:f,s:u}=j(p.duration);s.value=`${f}:${u}`,i.value.setTime(p.duration/2)}),i.value.on("timeupdate",p=>{if(p>o.value)return;const{m:f,s:u}=j(p);a.value=`${f}:${u}`}),i.value.on("play",()=>d.value=!0),i.value.on("pause",()=>d.value=!1)}return J(c),K(()=>{i.value&&(i.value.destroy(),i.value=null)}),(p,f)=>{const u=I("el-link"),m=I("el-card"),g=D("longpress"),w=D("motion-pop"),_=D("loading");return M(),$(m,{shadow:"never"},{header:B(()=>[v("div",Bt,[v("span",Ot,[F(" 音频可视化，采用开源的 "),O(u,{href:"https://wavesurfer-js.org/",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:B(()=>[F(" wavesurfer.js ")]),_:1}),Ht])])]),default:B(()=>[T((M(),P("div",Vt,[v("div",{ref_key:"wavesurferRef",ref:n},null,512),T(v("div",zt,[At,v("h1",It,N(a.value),1),v("span",jt,N(s.value),1)],512),[[U,s.value]]),T(v("div",Ft,[T(O(S($t),{class:"cursor-pointer"},null,512),[[S(t),{content:"快退（可长按）",placement:"bottom",animation:"scale"}],[g,()=>{var y;return(y=i.value)==null?void 0:y.skip(-1)},"0:100"]]),T((M(),P("div",{class:"cursor-pointer",onClick:f[0]||(f[0]=y=>{var E;return(E=i.value)==null?void 0:E.playPause()})},[d.value?T((M(),$(S(pt),{key:0},null,512)),[[w]]):T((M(),$(S(yt),{key:1},null,512)),[[w]])])),[[S(t),{content:d.value?"暂停":"播放",placement:"bottom",animation:"scale"}]]),T(O(S(xt),{class:"cursor-pointer"},null,512),[[S(t),{content:"快进（可长按）",placement:"bottom",animation:"scale"}],[g,()=>{var y;return(y=i.value)==null?void 0:y.skip(1)},"0:100"]])],512),[[U,s.value]])])),[[_,e.value]])]),_:1})}}});export{Xt as default};
|