https://bbqe.com/assets/WaveformLyricsEditor-Bjus6rvx.js

1import{B as at,a1 as ot}from"./vant-CZulu4jr.js";import{y as c,a as M,l as fe,G as $,z as nt,N as rt,o as p,b as g,f as v,B as H,q as J,s as K,g as lt,e as b,F as ae,A as oe,n as Le,j as ne,as as it,a$ as st,aZ as ut}from"./@vue-D9xbwlZ0.js";import{u as ct}from"./wavesurfer.js-Bj61Jc10.js";import{d as dt}from"./index-2Qbqp-EK.js";import"./@vant-CSEsJz4Q.js";import"./pinia-BwGp-MR6.js";import"./pinia-plugin-persist-J3Q2VqHx.js";import"./vue-router-Cqy5GhA5.js";import"./@nutui-o3oov2Pk.js";import"./axios-DoV8TWY5.js";import"./crypto-js-BM4NBvQ2.js";import"./mitt-DJ65BbbF.js";const he=Y=>(st("data-v-62155a82"),Y=Y(),ut(),Y),vt={key:0,class:"karaoke-waveeditor"},mt={class:"karaoke-waveeditor__toolbar"},ft={key:0,class:"karaoke-waveeditor__file"},ht={class:"karaoke-waveeditor__controls"},pt={class:"karaoke-waveeditor__zoom-label"},gt=["x1","y1","y2","stroke","stroke-width"],wt=["y","width"],yt=["y"],_t={class:"karaoke-waveeditor__playhead-time"},xt={class:"karaoke-waveeditor__lyrics"},St=["onClick"],Mt=["onPointerdown"],Dt=it('<svg class="drag-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-v-62155a82><circle cx="8" cy="6" r="2" fill="currentColor" data-v-62155a82></circle><circle cx="16" cy="6" r="2" fill="currentColor" data-v-62155a82></circle><circle cx="8" cy="12" r="2" fill="currentColor" data-v-62155a82></circle><circle cx="16" cy="12" r="2" fill="currentColor" data-v-62155a82></circle><circle cx="8" cy="18" r="2" fill="currentColor" data-v-62155a82></circle><circle cx="16" cy="18" r="2" fill="currentColor" data-v-62155a82></circle></svg>',1),Tt=[Dt],Lt={class:"lyric-block__content"},kt={class:"word__content"},zt=["onPointerdown"],Et=he(()=>v("div",{class:"word-divider__handle"},null,-1)),Wt=[Et],Ct=["onPointerdown"],Pt=he(()=>v("div",{class:"resize-icon"},"⬍",-1)),It=[Pt],bt=["onPointerdown"],$t=he(()=>v("div",{class:"resize-icon"},"⬍",-1)),Bt=[$t],ke=180,Ft=.1,Rt=1200,O=160,At=100,Nt={__name:"WaveformLyricsEditor",props:{audioUrl:{type:String,default:""},lyricLines:{type:Array,required:!0},scoreLines:{type:Array,required:!0},minDuration:{type:Number,default:120},selectedIndex:{type:Number,default:null}

1,snapToGrid:{type:Boolean,default:!0},gridInterval:{type:Number,default:10}},emits:["update:selectedIndex"],setup(Y,{expose:ze,emit:Ee}){const l=Y,re=Ee,w=c(null),B=c(null),d=c(null),h=c(ke),m=c(new Set),D=c(!1),W=c(!1),L=c(!1),le=c(!1),k=c(0),ie=c(0),F=c(600),se=c(!1),z=c(!1),ue=c(!1),_=c(null),j=c(null),C=c(null),Q=c(0),P=c(0),I=c(0),Z=c(null),T=c(new Map),R=c([]),ce=c(!1),de=c(!0),N=c(!1),ve=c(!1);let x=null,pe=0;const We=M(()=>!!l.audioUrl),E=c(!1),V=c(0),S=M(()=>{const e=h.value/1e3;return e<=0?.001:e}),Ce=M(()=>{const e=k.value||0;return Math.max(e*h.value,F.value,1)}),ge=M(()=>{if(!l.audioUrl)return"";const e=l.audioUrl.split("/");return e[e.length-1]}),Pe=M(()=>{const e=h.value/ke;return e>=1,"".concat(Math.round(e*100),"%")}),Ie=M(()=>{const e=V.value*1e3;return l.lyricLines.findIndex(n=>{const o=n.startTime||0,a=o+(n.lineDuration||l.minDuration);return e>=o&&e<a})}),we=M(()=>V.value*h.value),be=M(()=>{const e=V.value,n=Math.floor(e/60),o=Math.floor(e%60),a=Math.floor(e%1*1e3);return"".concat(n,":").concat(o.toString().padStart(2,"0"),".").concat(a.toString().padStart(3,"0"))}),$e=M(()=>[{text:W.value?"✓ 联动":"联动",value:"link",className:W.value?"menu-active":""},{text:D.value?"✓ 多选":"多选",value:"multiSelect",className:D.value?"menu-active":""},{text:L.value?"✓ 波形增强":"波形增强",value:"waveformEnhance",className:L.value?"menu-active":""},{text:"💾 保存",value:"save",className:"menu-save"}]);function Be(e){switch(e.value){case"link":Qe();break;case"multiSelect":Ke();break;case"waveformEnhance":et();break;case"save":ye(),se.value=!1;break}}function Fe(){l.lyricLines.length===l.scoreLines.length&&l.lyricLines.forEach((e,n)=>{const o=l.scoreLines[n];o&&(o.startTime=e.startTime,o.lineDuration=e.lineDuration,e.words&&o.words&&e.words.length===o.words.length&&e.words.forEach((a,t)=>{const r=o.words[t];r&&(r.wordStart=a.wordStart,r.wordDuration=a.wordDuration)}))})}function ye(){Fe(),re("save"),ce.value=!1}function Re(){return ce.value}const _e=M(()=>l.lyricLines.map((e,n)=>{const o=e.startTime||0,a=Math.max(e.lineDuration||l.minDuration,l.minDuration),t=(e.words||[]).map(s=>{var u;return{text:(u=s.text)!=null?u:"",start:Number(s.wordStart)||0,duration:Math.max(Number(s.wordDuration)||l.minDuration,1)}}),i=t.map(s=>s.text).join("").trim()||"歌词";return{index:n,start:o,duration:a,end:o+a,label:i,words:t}})),Ae=M(()=>{const n=Math.max(0,ie.value-500),o=ie.value+F.value+500;return _e.value.filter(a=>{const t=a.start*S.value;return t+a.duration*S.value>=n&&t<=o})}),Ne=M(()=>{const e=[],n=k.value||0;if(!n)return e;const o=S.value,a=h.value;let t=500,r=1e3,i=5e3;a>=500?(t=50,r=100,i=500):a>=300?(t=100,r=500,i=1e3):a>=150?(t=500,r=1e3,i=5e3):a>=80?(t=1e3,r=5e3,i=1e4):(t=2e3,r=1e4,i=3e4);const s=n*1e3;for(let u=0;u<=s;u+=t){const f=u*o;let y="minor",A=null;if(u%i===0){y="major";const X=u/1e3,U=Math.floor(X/60),me=X%60;i<1e3?A="".concat(U,":").concat(me.toFixed(2).padStart(5,"0")):(i<1e4,A="".concat(U,":").concat(Math.floor(me).toString().padStart(2,"0")))}else u%r===0&&(y="medium");e.push({time:u,y:f,type:y,label:A})}return e.length>0,e});function Ue(e){const n=e.start*S.value,o=Math.max(e.duration*S.value,28);return{top:"".concat(n,"px"),height:"".concat(o,"px")}}function He(e,n){const a=n.reduce((r,i)=>r+(i.duration||0),0)*S.value,t=Math.max((e.duration||0)*S.value,12);return{top:"".concat(a,"px"),height:"".concat(t,"px")}}function Oe(e){const o=e.reduce((a,t)=>a+(t.duration||0),0)*S.value;return{top:"".concat(o,"px")}}function xe(e,n,o){if(!e||e.length===0||!n||n.length===0)return;const a=Math.round(n.reduce((i,s)=>i+s.wordDuration,0));if(a===0)return;o=Math.round(o);const t=o/a;let r=0;e.forEach((i,s)=>{var y;const u=((y=n[s])==null?void 0:y.wordDuration)||0;let f=Math.round(u*t);s===e.length-1&&(f=Math.round(o-r)),f=Math.max(Math.round(f),50),i.wordStart=r,i.wordDuration=f,r+=f})}function Ye(e){return D.value?m.value.has(e):l.selectedIndex===e}function je(e){ie.value=e.target.scrollTop,!ve.value&&E.value&&de.value&&(N.value=!0,x&&clearTimeout(x),x=setTimeout(()=>{N.value=!1},3e3))}function Ze(e,n){if(ue.value){ue.value=!1;return}if(D.value)m.value.has(e.index)?m.value.delete(e.index):m.value.add(e.index),m.value=new Set(m.value);else{re("update:selectedIndex",e.index);const o=l.lyricLines[e.index];if(o&&d.value&&k.value>0){const a=o.startTime/(k.value*1e3);d.value.seekTo(a),E.value&&d.value.pause(),N.value=!1,x&&(clearTimeout(x),x=null),$(()=>{te()})}}}function Ve(e){if(!d.value||!k.value)return;const n=e.currentTarget.getBoundingClientRect(),t=(e.clientY-n.top)/h.value/k.value;d.value.seekTo(t),N.value=!1,x&&(clearTimeout(x),x=null),$(()=>{te()})}function Ge(e,n){if(n.preventDefault(),n.stopPropagation(),z.value=!0,_.value=e.index,C.value="move",Q.value=n.clientY,P.value=e.start,I.value=e.duration,D.value?m.value.has(e.index)||(m.value.add(e.index),m.value=new Set(m.value)):re("update:selectedIndex",e.index),T.value.clear(),D.value&&m.value.size>1)m.value.forEach(o=>{const a=l.lyricLines[o];a&&T.value.set(o,{startTime:a.startTime,duration:a.lineDuration})});else if(W.value){const o=l.lyricLines.length-e.index;for(let a=e.index;a<l.lyricLines.length;a++){const t=l.lyricLines[a];t&&T.value.set(a,{startTime:t.startTime,duration:t.lineDuration})}}else T.value.set(e.index,{startTime:e.start,duration:e.duration});document.addEventListener("pointermove",G),document.addEventListener("pointerup",q)}function Se(e,n,o){o.preventDefault(),o.stopPropagation(),z.value=!0,_.value=e.index,C.value=n==="top"?"resize-top":"resize-bottom",Q.value=o.clientY,P.value=e.start,I.value=e.duration;const a=l.lyricLines[e.index];if(a&&a.words?R.value=a.words.map(t=>({wordDuration:t.wordDuration,wordStart:t.wordStart,text:t.text})):R.value=[],T.value.clear(),T.value.set(e.index,{startTime:e.start,duration:e.duration}),W.value&&n==="bottom")for(let t=e.index+1;t<l.lyricLines.length;t++){const r=l.lyricLines[t];r&&T.value.set(t,{startTime:r.startTime,duration:r.lineDuration})}document.addEventListener("pointermove",G),document.addEventListener("pointerup",q)}function qe(e,n,o){o.preventDefault(),o.stopPropagation(),z.value=!0,_.value=e.index,j.value=n,C.value="word-divider",Q.value=o.clientY;const a=e.words[n],t=e.words[n+1];!a||!t||(P.value=a.duration,I.value=t.duration,document.addEventListener("pointermove",G),document.addEventListener("pointerup",q))}function G(e){if(!z.value||_.value===null)return;const n=e.clientY-Q.value,o=n/S.value;Math.abs(n)>3&&(ue.value=!0);const a=l.lyricLines[_.value];if(a){if(ce.value=!0,C.value==="word-divider"){if(j.value===null||!a.words)return;const t=j.value,r=t+1,i=a.words[t],s=a.words[r];if(!i||!s)return;let u=Math.round(P.value+o),f=Math.round(I.value-o);

1const y=Math.max(l.minDuration,50),A=Math.round(P.value+I.value);u<y?(u=y,f=A-y):f<y&&(f=y,u=A-y),i.wordDuration=Math.round(u),s.wordDuration=Math.round(f);let X=0;a.words.forEach(U=>{U.wordStart=X,X+=U.wordDuration});return}if(C.value==="move"){let t=Math.max(0,P.value+o);l.snapToGrid?(t=Math.round(t/l.gridInterval)*l.gridInterval,Z.value=t*S.value):Z.value=null,D.value&&m.value.size>1?m.value.forEach(r=>{const i=l.lyricLines[r],s=T.value.get(r);i&&s&&(i.startTime=Math.round(Math.max(0,s.startTime+o)),i.lineDuration=Math.round(s.duration))}):W.value?T.value.forEach((r,i)=>{const s=l.lyricLines[i];s&&(s.startTime=Math.round(Math.max(0,r.startTime+o)),s.lineDuration=Math.round(r.duration))}):(a.startTime=Math.round(t),a.lineDuration=Math.round(I.value))}else if(C.value==="resize-top"){const t=Math.max(0,P.value+o),r=P.value+I.value,i=t,s=Math.max(l.minDuration,r-i);if(a.words&&a.words.length>0&&R.value.length>0&&xe(a.words,R.value,s),a.startTime=Math.round(i),a.lineDuration=Math.round(s),W.value&&_.value>0){const u=l.lyricLines[_.value-1];u&&(u.lineDuration=Math.round(Math.max(l.minDuration,i-u.startTime)))}}else if(C.value==="resize-bottom"){const t=Math.max(l.minDuration,I.value+o);if(a.words&&a.words.length>0&&R.value.length>0&&xe(a.words,R.value,t),a.lineDuration=Math.round(t),W.value&&_.value<l.lyricLines.length-1){const i=a.startTime+t-(P.value+I.value);for(let s=_.value+1;s<l.lyricLines.length;s++){const u=l.lyricLines[s],f=T.value.get(s);u&&f&&(u.startTime=Math.round(Math.max(0,f.startTime+i)),u.lineDuration=Math.round(f.duration))}}}}}function q(){z.value=!1,_.value=null,j.value=null,C.value=null,Z.value=null,T.value.clear(),R.value=[],document.removeEventListener("pointermove",G),document.removeEventListener("pointerup",q)}function Me(e){const n=_e.value[e];if(!n||!w.value)return;const o=n.start*S.value,a=n.duration*S.value,t=w.value.clientHeight,r=o-t/2+a/2;w.value.scrollTo({top:Math.max(0,r),behavior:"smooth"})}function Xe(){h.value=Math.min(h.value*1.2,Rt),De()}function Je(){h.value=Math.max(h.value/1.2,Ft),De()}function De(){if(d.value&&le.value)try{d.value.zoom(h.value),$(()=>{if(B.value&&k.value>0){const e=k.value*h.value;B.value.style.setProperty("--waveform-length","".concat(e,"px"))}})}catch(e){}}function Ke(){D.value=!D.value,D.value||m.value.clear()}function Qe(){W.value=!W.value}function et(){if(L.value=!L.value,d.value&&l.audioUrl){const e=d.value.getCurrentTime(),n=E.value;ee(),$(()=>{Te(),d.value&&l.audioUrl&&d.value.load(l.audioUrl).then(()=>{e>0&&d.value.setTime(e),n&&d.value.play()})})}}function tt(){d.value&&(E.value?d.value.pause():d.value.play())}function Te(){if(B.value)try{const e=h.value,n={container:B.value,waveColor:L.value?"#00D9FF":"#4A9EFF",progressColor:L.value?"#FF6B00":"#FFD700",cursorColor:"transparent",barWidth:L.value?.8:1,barGap:L.value?.3:.5,barRadius:0,barAlign:"bottom",height:O,normalize:L.value,fillParent:!1,barHeight:L.value?1.2:1,minPxPerSec:e,interact:!1,hideScrollbar:!0,autoCenter:!1,backend:"WebAudio",pixelRatio:window.devicePixelRatio||1},o=ct.create(n);o.on("ready",()=>{le.value=!0,k.value=o.getDuration(),$(()=>{try{o.zoom(h.value)}catch(a){}if(B.value){const a=k.value*h.value;B.value.style.setProperty("--waveform-length","".concat(a,"px"))}})}),o.on("error",a=>{}),o.on("play",()=>{E.value=!0,$(()=>{de.value&&!N.value&&te()})}),o.on("pause",()=>{E.value=!1}),o.on("finish",()=>{E.value=!1}),o.on("timeupdate",a=>{V.value=a}),d.value=o}catch(e){}}function ee(){if(d.value){try{d.value.destroy()}catch(e){}d.value=null}le.value=!1}fe(()=>l.audioUrl,e=>{e?$(()=>{ee(),Te(),d.value&&d.value.load(e)}):ee()},{immediate:!0}),fe(()=>l.selectedIndex,e=>{e!=null&&!z.value&&$(()=>Me(e))}),fe([V,E],()=>{if(E.value&&de.value&&!N.value&&!z.value){const e=Date.now();e-pe>At&&(pe=e,te())}});function te(){if(!w.value)return;const e=we.value,n=w.value.scrollTop,o=F.value/2,a=e-n,t=F.value*.2,r=F.value*.8;let i=!1,s=n;if((a<t||a>r)&&(i=!0,s=e-o),i){ve.value=!0;const u=Math.max(0,s);w.value.scrollTop=u,setTimeout(()=>{ve.value=!1},50)}}return nt(()=>{w.value&&(F.value=w.value.clientHeight);const e=new ResizeObserver(()=>{w.value&&(F.value=w.value.clientHeight)});w.value&&e.observe(w.value),rt(()=>{e.disconnect(),ee(),document.removeEventListener("pointermove",G),document.removeEventListener("pointerup",q),x&&(clearTimeout(x),x=null)})}),ze({scrollToBlock:Me,checkUnsavedChanges:Re,handleSave:ye}),(e,n)=>{const o=at,a=ot;return We.value?(p(),g("div",vt,[v("div",mt,[ge.value?(p(),g("div",ft,H(ge.value),1)):J("",!0),v("div",ht,[K(o,{size:"small",icon:E.value?"pause-circle-o":"play-circle-o",round:"",type:"primary",plain:"",onClick:tt},null,8,["icon"]),K(o,{size:"small",icon:"minus",round:"",type:"primary",plain:"",onClick:Je}),v("span",pt,H(Pe.value),1),K(o,{size:"small",icon:"plus",round:"",type:"primary",plain:"",onClick:Xe}),K(a,{show:se.value,"onUpdate:show":n[0]||(n[0]=t=>se.value=t),placement:"bottom-end",theme:"dark",actions:$e.value,onSelect:Be},{reference:lt(()=>[K(o,{size:"small",icon:"ellipsis",round:"",type:"primary",plain:""})]),_:1},8,["show","actions"])])]),v("div",{class:"karaoke-waveeditor__scroll",ref_key:"scrollContainerRef",ref:w,onScroll:je},[v("div",{class:"karaoke-waveeditor__track",style:b({height:Ce.value+"px"})},[v("div",{ref_key:"waveformHostRef",ref:B,class:"karaoke-waveeditor__waveform",style:b({width:"".concat(O,"px")})},null,4),v("div",{class:"karaoke-waveeditor__waveform-click",style:b({width:"".concat(O,"px")}),onClick:Ve},null,4),(p(),g("svg",{class:"karaoke-waveeditor__timeline",style:b({width:"".concat(O,"px")})},[v("rect",{x:"0",y:"0",width:O,height:"100%",fill:"rgba(25, 35, 55, 0.5)"}),(p(!0),g(ae,null,oe(Ne.value,t=>(p(),g("g",{key:t.time},[v("line",{x1:t.type==="major"?0:t.type==="medium"?15:25,y1:t.y,x2:O,y2:t.y,stroke:t.type==="major"?"rgba(255,220,100,0.7)":t.type==="medium"?"rgba(255,255,255,0.5)":"rgba(255,255,255,0.25)","stroke-width":t.type==="major"?2:t.type==="medium"?1.5:1},null,8,gt),t.label?(p(),g("rect",{key:0,x:2,y:t.y-15,width:t.label.length>5?60:50,height:"14",fill:"rgba(0, 0, 0, 0.7)",rx:"2"},null,8,wt)):J("",!0),t.label?(p(),g("text",{key:1,x:6,y:t.y-5,fill:"#FFF","font-size":"11","font-weight":"bold","text-anchor":"start",style:{"text-shadow":"1px 1px 2px rgba(0,0,0,0.8)"}},H(t.label),9,yt)):J("",!0)]))),128))],4)),v("div",{class:"karaoke-waveeditor__playhead",style:b({top:we.value+"px"})},[v("span",_t,H(be.value),1)],4),v("div",xt,[(p(!0),g(ae,null,oe(Ae.value,t=>(p(),g("div",{key:t.index,class:Le(["karaoke-waveeditor__lyric-block",{"is-active":t.index===Ie.value,"is-selected":Ye(t.index),"is-dragging":z.value&&(_.value===t.index||D.value&&m.value.has(t.index))}]),style:b(Ue(t)),onClick:r=>Ze(t)},[v("div",{class:"lyric-block__drag-handle",onPointerdown:ne(r=>Ge(t,r),["stop"]),title:"拖动移动整块"},Tt,40,Mt),v("div",Lt,H(t.label),1),(p(!0),g(ae,null,oe(t.words,(r,i)=>(p(),g("div",{key:"".concat(t.index,"-").concat(i),class:"lyric-block__word",style:b(He(r,t.words.slice(0,i)))},[v("div",kt,H(r.text),1)],4))),128)),(p(!0),g(ae,null,oe(t.words.length-1,r=>(p(),g("div",{key:"".concat(t.index,"-divider-").concat(r),class:Le(["lyric-block__word-divider",{"is-dragging":z.value&&_.value===t.index&&j.value===r-1&&C.value==="word-divider"}

1]),style:b(Oe(t.words.slice(0,r))),onPointerdown:ne(i=>qe(t,r-1,i),["stop"])},Wt,46,zt))),128)),v("div",{class:"lyric-block__resize-top",onPointerdown:ne(r=>Se(t,"top",r),["stop"]),title:"调整开始时间"},It,40,Ct),v("div",{class:"lyric-block__resize-bottom",onPointerdown:ne(r=>Se(t,"bottom",r),["stop"]),title:"调整结束时间"},Bt,40,bt)],14,St))),128)),z.value&&Z.value?(p(),g("div",{key:0,class:"karaoke-waveeditor__snap-indicator",style:b({top:Z.value+"px"})},null,4)):J("",!0)])],4)],544)])):J("",!0)}}},Qt=dt(Nt,[["__scopeId","data-v-62155a82"]]);export{Qt as default};