| 12 |
- var e=Object.assign;import{r as t,d as s,c as a,a as n,B as i,S as o,e as l,b as d,P as u,f as r,o as c,g as m,p,h}from"./vendor.e484ff32.js";!function(e=".",t="__import__"){try{self[t]=new Function("u","return import(u)")}catch(s){const a=new URL(e,location),n=e=>{URL.revokeObjectURL(e.src),e.remove()};self[t]=e=>new Promise(((s,i)=>{const o=new URL(e,a);if(self[t].moduleMap[o])return s(self[t].moduleMap[o]);const l=new Blob([`import * as m from '${o}';`,`${t}.moduleMap['${o}']=m;`],{type:"text/javascript"}),d=Object.assign(document.createElement("script"),{type:"module",src:URL.createObjectURL(l),onerror(){i(new Error(`Failed to import: ${e}`)),n(d)},onload(){s(self[t].moduleMap[o]),n(d)}});document.head.appendChild(d)})),self[t].moduleMap={}}}("assets/");var g="_speed-change_12zsw_1",v="_title_12zsw_5",y="_strong_12zsw_11",A="_speed_12zsw_1",f="_slider_12zsw_54",w="_speed-button_12zsw_58",b="_custom-button_12zsw_63";const S=t({speed:90,showHint:!1});var k=s({name:"speed",props:{changed:{type:Function,default:e=>{}},close:{type:Function,default:()=>{}},mode:{type:String},changeMode:{type:Function,default:e=>{}}},setup(t){const s=()=>{S.showHint=!0},l=()=>{S.showHint=!1},d=e=>{S.speed=e,t.changed(S.speed)},u=()=>{S.speed=Math.max(S.speed+1,45),t.changed(S.speed)},r=()=>{S.speed=Math.min(S.speed+1,270),t.changed(S.speed)};return()=>a("div",{class:g},[a("div",{class:A},[a("span",null,[n("速度")]),a("div",null,[a(i,{color:"#14928A",icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAArxJREFUWAnNmM9rE0EUx99MUyjtChU0QsBaj/4LrUJRihS99GDuXotVVNo/oqGKRnr1Hg+96EFStZC2/4JHa4SI8aDgthSaZnzfzc6y2R+6SzazebDZ3Tcz7/vJzM7uvBGU0ma2ts6fnB3dUUSLfMwIohKHwAFrsa/FviYf9YmxqXfNlZVfvaJkv9wumRVfVZa7XbXKtW/wUUjWijpcryGlqLYfrG0nafNfoGJ1Y14psaFIzSUJGFdHkDgQQq23V9f34+rAHwt0r1Yb2/1xuKkUPfpXgLRlQtCLhUuzT9+Uy2dRbSOBZl8/nz6yT2sMsxjVaFAfQ9WnrPHy4f3Hv4OxQkCAse3TA1J0LVg503tBny1rfC4IJf0iGCb0zNBhIMp/GFrQ9DP0AbnPzFCGyS+qr/FIQFPf4+wNGWZTV9Gev9DUtRR0Xc8+r4cwtU0BBHX82g4QXnqDvmeCImnuoQ0GtHGA3DdwmhiZ19UMAt+m447dZoWkn4PMYdyAncmCVZQn3eO7IwADpgJYJHeVsWnu9kTsCSySJ/7l2BqmC5ilwC+iEq9hQnbrylV6dvM2laxzobJBHC37Dz35+J4+fP0SCgMWzDK9uOqrMAwYCOAPInaMlaRiiyk07gaLFEJ8j1JGt6J7szY9ZFFxwSIuVCufSKmFqArGfULs8neNmsaFYwTBgiHbiSk37magupyQk29ZGdlB3tZB2iTdvKmRNw3rN8DifO2RN+UNpBl42Hp28WVlP681EXK2nw/X5kHi9BAukMThnIf5tT0grGmRxJkGgqZeT0PbA8INMkokcbg2YdCCpl/Le4a0c6QSRUAhk0RGOcyeQuyorBX6fUMGBwxQ3JVL3DDzZwoxETuYQveUfYmidgTPI7MdEwIblQ2rIJizpcfZgZMc8BqYZ0VoS483Er7xm7eO72TaLb2/eIEQffhmTlwAAAAASUVORK5CYII=",type:"primary",size:"mini",round:!0,disabled:45==S.speed,onClick:u},null),a(o,{class:f,max:270,min:45,barHeight:"4px",buttonSize:"18px",modelValue:S.speed,"onUpdate:modelValue":d,step:"1",activeColor:"#14928A",onChange:d,onDragStart:s,onDragEnd:l},e({},(()=>a("div",{class:b},[a("span",null,[S.speed]),a("div",{class:v},[a("span",{class:y},[S.speed])])])))),a(i,{color:"#14928A",icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAvRJREFUWAnNWM9rFDEUTtIt1HYOClplwVIQBf+FSkXBClIvHtx7jxYXEW3xT5BWEVnptff14KW9dAXFxf4DHjyIUFaoWgU9TGuh7cb3pZshM5tpE6bT2QeZySTvfe+b/H7hzFNGFhZObe9tTkrGJiiNcMbKBIEEWaeydSprUWoM9A0tt6an/+xXuT3Jzk2GX83fabdllbTHKZXcrNgu6TWF4LWN+zNvXGwOJTRcm7siJZ+TTI65AKbpcMZXOZezG9XZj2k6KE8ldLde73v/c+25lOzBQQC+dZyzl9fOjj56Xans2WythEYXX5zcDHfqRGbCZpS1jEg1hoL+ytrUw79JrC5CIBOGO6tMsstJ5SP95uxzEPSPJUkJ0wm6CS3jQ2bywkX2aeqeSsg7C/0wfMGnaRMj1BkzXt307PpNdi4IVELeRzAk4NO0iQjtzyb/AXz6xGCEZ+ajwkMymDTwrdUiQpjauvC436ZvRQiLXtZ1JstPwDc4AEMR6qzAWTAz22oOAnsToWE7KFrGwUVst7duExPXvSlP0iVwEdRUXtM8T0bgImg3O5+nEy9s4lKivaNMZ5guwaqLhc53bflVnenCMgt+/9tij9+tsOWvX8xilQcXzDJ9uIopPL16w5tMDCDlAz8I7BQpC0mSUnnsxeAiOOffbZ6ffHjL0LxHLcAEtk3ApYQzMFVeSiqgj239nNRLjpkztfmkivM3uAgaSC1ni5wVwQVdZm+/nJ3b4IlQQwyIwSWqRHRQtOwibBKduKlZNBvy3wQXtdsjbiqakOagCCGIQ9xUFCn41oGkIgQiCOIKI2T4jgghokQQ50vKXDzNvCsOfJrRbEQIAIgoEcS5gkEPG+WPMFQJeR+BL/g0bWjqx6WnAkVQQySJiNK3peK/dfAXsG1RK6xiXaZhQIqa8hYZeo8pjZH2BiawkyG01u/qMl2h3z1zHaMJ6XfPXFhpQvqtrvQoOlDBAZ2BqYlx4tSnTnWlR5cV32jlbWCf9L3S+w/vDiyY+XWPKwAAAABJRU5ErkJggg==",type:"primary",size:"mini",round:!0,disabled:270==S.speed,onClick:r},null)])]),a(i,{onClick:t.close,block:!0,round:!0,color:"#14928A",class:w},{default:()=>[n("确认")]})])},methods:{resetSpeed(){S.speed=90,this.changed(90)}}});const C=new l;class E{constructor(e){this.audios={},this.status="init",this.speed=90,this.muted=!1,this.audio=null,this.event=C,this.audio=null,this.audios={};for(const t of e){const e=new Audio(t);this.audios[t]=e,this.audio||(this.audio=e)}e.length&&(this.status="pause"),this.event.on("allWaiting",(()=>{this.hasWaitng()&&this.event.emit("waiting")})),this.event.on("allPlaying",(()=>{this.hasWaitng()||this.event.emit("playing")})),this.syncEvent()}hasWaitng(){let e=!1;for(const t of Object.values(this.audios))if("waiting"===t.dataset.status){e=!0;break}return e}syncEvent(){for(const e of Object.values(this.audios))e.addEventListener("play",(e=>{this.event.emit("play",e),this.play()})),e.addEventListener("pause",(e=>{this.event.emit("play",e),this.pause()})),e.addEventListener("waiting",(t=>{e.dataset.status="waiting",this.event.emit("allWaiting")})),e.addEventListener("playing",(t=>{e.dataset.status="",this.event.emit("allPlaying")})),e.addEventListener("ended",(e=>{this.event.emit("ended")}))}play(){Object.values(this.audios).map((e=>e.play())),this.status="play"}pause(){Object.values(this.audios).map((e=>e.pause())),this.status="pause"}setMute(e,t){t?this.audios[t]&&(this.audios[t].muted=e):(this.muted=e,Object.values(this.audios).map((t=>t.muted=e)))}setSpeed(e,t){t?this.audios[t]&&(this.audios[t].playbackRate=e):(this.speed=e,Object.values(this.audios).map((t=>t.playbackRate=e)))}setCurrentTime(e){Object.values(this.audios).map((t=>t.currentTime=e))}toggleMute(e){e?this.audios[e]&&(this.audios[e].muted=!this.audios[e].muted):(Object.values(this.audios).map((e=>e.muted=!this.muted)),this.muted=!this.muted)}togglePlay(){"pause"===this.status?this.play():"play"===this.status&&this.pause()}}const I=e=>e<10?"0"+e:e,M=e=>{const t=e%60,s=e/60;return I(Math.floor(s))+":"+I(Math.floor(t))};class T{constructor(){this.currentNote=null,this.el=document.createElement("div"),this.init()}init(){this.el.id="section-hint"+Math.floor(1e5*Math.random()),this.hide(),document.body.appendChild(this.el)}showForElement(e){this.currentNote=e;const{x:t,y:s,width:a,height:n,context:i}=e.sourceMeasure.verticalMeasureList[0].stave;this.el.style.position="absolute",this.el.style.top=i.element.offsetTop+s+"px",this.el.style.left=t+"px",this.el.style.width=a+"px",this.el.style.height=n+"px",this.el.style.backgroundColor="#01C1B5",this.el.style.opacity="0.12"}hide(){this.el.style.display="none"}show(){this.el.style.display=""}destroy(){this.currentNote=null,this.el.remove()}}var z="_player_125ld_1",Q="_times_125ld_14",R="_margin10_125ld_36",U="_badge_125ld_39",O="_mode-button_125ld_56";const j=d(null),F=(e,t)=>{let s=0;for(let a=0;a<e.length;a++){if(!(t>=e[a].time))break;s=a}return s},N={background:"https://daya.ks3-cn-beijing.ksyun.com/202012/SJEAbBz.mp3",music:"https://daya.ks3-cn-beijing.ksyun.com/202012/SJEBRO6.mp3"};var _=s({name:"player",props:{osmd:Object,times:Array},setup(e){var s,n;const l=t({audiosInstance:new E(Object.values(N)),currentTime:M(0),duration:M(0),currentTimeNum:0,durationNum:0,playState:"pause",loading:!1,speedShow:!1,speed:90,mode:"background",isFirstPlay:!0}),d=e=>{l.mode=e;const t="background"===e?"music":"background";l.audiosInstance.setMute(!0,N[t]),l.audiosInstance.setMute(!1,N[e])};let r=new T;const c=()=>{e.osmd.cursor.reset(),e.osmd.cursor.hide(),r.destroy(),r=new T,r.hide(),l.audiosInstance.pause(),m(0),j.value&&j.value.resetSpeed()};null==(s=l.audiosInstance.audio)||s.addEventListener("loadedmetadata",(e=>{l.duration=M(e.target.duration),l.durationNum=e.target.duration})),l.audiosInstance.event.on("waiting",(()=>{l.loading=!0})),l.audiosInstance.event.on("playing",(()=>{l.loading=!1})),l.audiosInstance.event.on("play",(()=>{l.playState=l.audiosInstance.status,d(l.mode)}),!1),l.audiosInstance.event.on("pause",(()=>{l.playState=l.audiosInstance.status}),!1),l.audiosInstance.event.on("ended",c,!1),window.addEventListener("resize",(()=>{const t=F(e.times,l.currentTimeNum);setTimeout((()=>{r.showForElement(e.times[t].noteElement)}),300)})),null==(n=l.audiosInstance.audio)||n.addEventListener("timeupdate",(t=>{if(l.audiosInstance.audio){l.currentTimeNum=t.target.currentTime,l.currentTime=M(t.target.currentTime);const s=F(e.times,l.audiosInstance.audio.currentTime);l.currentTimeNum+.3>=e.times[s].time&&(e.osmd.cursor.show(),r.show()),e.times[s]&&e.times[s].noteElement&&r.showForElement(e.times[s].noteElement),e.times[s]&&e.times[s].noteElement.sourceMeasure.verticalMeasureList[0].vfVoices&& (e.times[s].noteElement),((e,t)=>{let s=0;for(e.cursor.reset();s<t;)s++,!1!==e.cursor.hidden?e.cursor.show():e.cursor.next()})(e.osmd,s)}}));const m=e=>{l.currentTimeNum=e,l.currentTime=M(e),l.audiosInstance.setCurrentTime(e),l.playState=l.audiosInstance.status},p=e=>{const t=Math.min(e,l.durationNum);m(t)};return()=>a("div",{class:z},[a(i,{icon:"play"===l.playState?"./assets/pause.5945dc85.svg":"./assets/play.8126fbe8.svg",loading:l.loading,onClick:()=>{l.isFirstPlay=!1,l.audiosInstance.togglePlay(),l.playState=l.audiosInstance.status}},null),a("div",{class:Q},[a("span",null,[l.currentTime]),a(o,{disabled:l.isFirstPlay,min:0,max:l.durationNum,modelValue:l.currentTimeNum,"onUpdate:modelValue":p,step:1,onChange:p,activeColor:"#14928A"},null),a("span",null,[l.duration])]),a(i,{class:O,disabled:l.isFirstPlay,icon:"background"===l.mode?"./assets/background.2740ad6f.svg":"./assets/music.b14142b5.svg",onClick:()=>d("background"===l.mode?"music":"background")},null),a("div",{class:R},[a(i,{icon:"./assets/replay.5d29554b.svg",disabled:l.isFirstPlay,onClick:()=>c()},null)]),a("div",{class:U,onClick:()=>l.speedShow=!0},[a(i,{icon:"./assets/setting.d94f0146.svg"},null),a("span",null,[l.speed])]),a(u,{round:!0,closeable:!0,style:"height: '2rem'",teleport:"body",closeOnPopstate:!0,show:l.speedShow,onClickCloseIcon:()=>l.speedShow=!1},{default:()=>[a(k,{ref:j,close:()=>l.speedShow=!1,changed:e=>{l.speed=e,l.audiosInstance.setSpeed(e/90)},mode:l.mode,changeMode:d},null)]})])}});var x="_container_1apec_1";const J=d(null),L=d(null),B=d(null),X=t({osmd:{},times:[],scoreData:null,loading:!0});var G=s({name:"SheetMusic",setup:()=>((async()=>{try{const e=await m.get("./Fundamental-Level 1 - 4Flute.xml");await X.osmd.load(e),await X.osmd.render(),X.loading=!1,X.times=(e=>{e.cursor.reset();const t=e.cursor.iterator,s=[];for(;!t.endReached;){for(const e of t.currentVoiceEntries)for(const a of e.notes)a&&s.push({note:a.halfTone+12,time:4*t.currentTimeStamp.realValue*(60/90)+5,realValue:t.currentTimeStamp.realValue,noteElement:a});t.moveToNext()}return s})(X.osmd), (X.osmd)}catch(e){}})(),()=>a("div",{class:x,ref:L},[X.loading?a(r,{row:16},null):null,a("div",{ref:J},null),a(_,{ref:B,osmd:X.osmd,times:X.times},null)])),mounted(){X.osmd=new c.OpenSheetMusicDisplay(J.value,{followCursor:!0,autoResize:!0,drawingParameters:"compacttight"})}});const V=document.getElementById("loading");(async()=>{await p(Promise.resolve(),300),null==V||V.classList.remove("show")})();h(s({setup:()=>()=>a(G,null,null)})).mount("#app");
|
