Spaces:
Sleeping
Sleeping
| // Interaction reference: klstudio/app/views/midi-player.vue. | |
| // The renderer's WAV is the playback clock; notes come from the exported MIDI. | |
| let dispose = () => {}; | |
| function mount() { | |
| dispose(); | |
| const root = element.querySelector('.player'); | |
| if (!root) return; | |
| const $ = (s) => root.querySelector(s); | |
| const canvas = $('.roll'), ctx = canvas.getContext('2d'); | |
| const play = $('.play'), seek = $('.seek'), clock = $('.clock'); | |
| const audio = new Audio(); | |
| const listeners = new AbortController(); | |
| let frame = 0, stopped = false, data = null, offset = 0, zoom = 1; | |
| let width = 600, height = 300, low = 36, high = 84; | |
| try { data = props.value ? JSON.parse(props.value) : null; } catch (_) {} | |
| const duration = data ? data.duration : 8; | |
| const notes = data ? data.notes : []; | |
| const left = 46, top = 23, bottom = 10; | |
| const clamp = (n, a, b) => Math.min(b, Math.max(a, n)); | |
| const format = (n) => `${Math.floor(n / 60)}:${Math.floor(n % 60).toString().padStart(2, '0')}`; | |
| const on = (target, type, fn) => target.addEventListener(type, fn, {signal: listeners.signal}); | |
| const span = () => Math.max(duration / zoom, .1); | |
| function follow() { | |
| const time = audio.currentTime; | |
| if (time < offset + span() * .15 || time > offset + span() * .7) | |
| offset = clamp(time - span() * .4, 0, Math.max(0, duration - span())); | |
| } | |
| function draw() { | |
| if (stopped) return; | |
| const time = audio.currentTime; | |
| const scale = (width-left)/span(), row = (height-top-bottom)/(high-low+1); | |
| ctx.clearRect(0,0,width,height); | |
| ctx.fillStyle='#101b2d';ctx.fillRect(0,0,width,height); | |
| const playing = new Set(notes.filter(n=>!audio.paused && n.start<=time && n.start+n.duration>time).map(n=>n.pitch)); | |
| for (let pitch=low;pitch<=high;pitch++) { | |
| const y=top+(high-pitch)*row, black=[1,3,6,8,10].includes(pitch%12); | |
| ctx.fillStyle=black?'#0c1626':'#142136';ctx.fillRect(left,y,width-left,row); | |
| ctx.fillStyle=playing.has(pitch)?'#6ce2b6':black?'#23334a':'#e1e8f2';ctx.fillRect(0,y,left-2,Math.max(.5,row-1)); | |
| if (pitch%12===0) { | |
| ctx.fillStyle=playing.has(pitch)?'#102d28':'#4f627a';ctx.font='10px system-ui';ctx.fillText(`C${Math.floor(pitch/12)-1}`,7,y+Math.max(8,row*.8)); | |
| ctx.strokeStyle='#33425b';ctx.beginPath();ctx.moveTo(left,y+row);ctx.lineTo(width,y+row);ctx.stroke(); | |
| } | |
| } | |
| const step=span()>6?1:.5; | |
| for(let t=Math.ceil(offset/step)*step;t<=offset+span();t+=step) { | |
| const x=left+(t-offset)*scale; | |
| ctx.strokeStyle='#26364d';ctx.beginPath();ctx.moveTo(x,top);ctx.lineTo(x,height-bottom);ctx.stroke(); | |
| ctx.fillStyle='#9bb0ce';ctx.font='10px system-ui';ctx.fillText(`${t.toFixed(step===1?0:1)}s`,x+3,14); | |
| } | |
| ctx.save();ctx.beginPath();ctx.rect(left,top,width-left,height-top);ctx.clip(); | |
| for(const n of notes) { | |
| const x=left+(n.start-offset)*scale,y=top+(high-n.pitch)*row; | |
| const active=!audio.paused && n.start<=time && n.start+n.duration>time; | |
| ctx.fillStyle=active?'#d2ffe6':`hsl(${200-n.velocity*.35} 70% ${42+n.velocity*.15}%)`; | |
| ctx.fillRect(x,y+Math.min(1,row*.1),Math.max(2,n.duration*scale),Math.max(1,row-1)); | |
| if(active){ctx.strokeStyle='#6ce2b6';ctx.strokeRect(x,y,Math.max(2,n.duration*scale),row);} | |
| } | |
| const cursor=left+(time-offset)*scale; | |
| ctx.strokeStyle='#f8bc68';ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(cursor,top);ctx.lineTo(cursor,height);ctx.stroke();ctx.lineWidth=1;ctx.restore(); | |
| canvas.dataset.time=String(time);canvas.dataset.offset=String(offset);canvas.dataset.active=String(playing.size); | |
| clock.textContent=`${format(time)} / ${format(duration)}`; | |
| seek.value=String(time); | |
| } | |
| function animate() { | |
| if(stopped || !element.isConnected) { dispose();return; } | |
| follow();draw(); | |
| if(!audio.paused) frame=requestAnimationFrame(animate); | |
| } | |
| function seekTo(time) {if(!data)return;audio.currentTime=clamp(time,0,duration);follow();draw();} | |
| function resize() { | |
| width=Math.max(180,canvas.clientWidth);const dpr=window.devicePixelRatio||1; | |
| canvas.width=width*dpr;canvas.height=height*dpr;ctx.setTransform(dpr,0,0,dpr,0,0);draw(); | |
| } | |
| play.textContent='▶ Play';play.setAttribute('aria-label','Play piano MIDI'); | |
| play.disabled=true;$('.restart').disabled=true;seek.disabled=true;seek.value='0'; | |
| $('.empty').hidden=false;$('.note-count').textContent='No MIDI loaded'; | |
| $('.speed').value='1';$('.zoom').value='1';$('.error').textContent=''; | |
| if(data) { | |
| if(notes.length){low=Math.max(0,Math.min(...notes.map(n=>n.pitch))-2);high=Math.min(127,Math.max(...notes.map(n=>n.pitch))+2);} | |
| audio.src=data.audio;audio.preload='auto';seek.max=String(duration); | |
| $('.empty').hidden=true;play.disabled=false;$('.restart').disabled=false;seek.disabled=false; | |
| $('.note-count').textContent=`${notes.length} notes`; | |
| } | |
| on(play,'click',async()=>{ | |
| if(!data)return; | |
| if(audio.paused) { | |
| if(audio.ended || audio.currentTime>=duration)seekTo(0); | |
| try{await audio.play();$('.error').textContent='';}catch(_){$('.error').textContent='Playback could not start. Please press Play again.';} | |
| } else audio.pause(); | |
| }); | |
| on(audio,'play',()=>{play.textContent='Ⅱ Pause';play.setAttribute('aria-label','Pause piano MIDI');cancelAnimationFrame(frame);animate();}); | |
| on(audio,'pause',()=>{play.textContent='▶ Play';play.setAttribute('aria-label','Play piano MIDI');cancelAnimationFrame(frame);draw();}); | |
| on(audio,'ended',()=>{cancelAnimationFrame(frame);draw();}); | |
| on(audio,'error',()=>{$('.error').textContent='Unable to load the piano audio.';}); | |
| on($('.restart'),'click',()=>seekTo(0)); | |
| on(seek,'input',()=>seekTo(Number(seek.value))); | |
| on($('.speed'),'change',(e)=>{audio.playbackRate=Number(e.target.value);}); | |
| on($('.zoom'),'input',(e)=>{zoom=Number(e.target.value);offset=clamp(audio.currentTime-span()*.4,0,Math.max(0,duration-span()));draw();}); | |
| on(canvas,'click',(e)=>{const x=e.clientX-canvas.getBoundingClientRect().left;if(x>=left)seekTo(offset+(x-left)/(width-left)*span());}); | |
| on(canvas,'keydown',(e)=>{if(['ArrowLeft','ArrowRight'].includes(e.key)){e.preventDefault();seekTo(audio.currentTime+(e.key==='ArrowRight'?1:-1));}}); | |
| const observer=new ResizeObserver(resize);observer.observe(canvas);resize(); | |
| dispose=()=>{if(stopped)return;stopped=true;listeners.abort();cancelAnimationFrame(frame);observer.disconnect();audio.pause();audio.removeAttribute('src');audio.load();}; | |
| } | |
| watch('value', mount); | |
| mount(); | |