Engraved score display, chord backing toggle, follow the recording

app/api/transcribe/route.ts

@@ -1,54 +1,62 @@
-import {type Client,handle_file} from '@gradio/client';
-import type {ScoreResult,Download} from '@/lib/types';
-import {prepareAudio} from '@/lib/audio';
-import {authorize} from '@/lib/auth';
-import {ENGINE,asFile,connect,explain} from '@/lib/kiku';
-export const runtime='nodejs';
-const file=(value:unknown)=>asFile(ENGINE,value);
-export async function POST(req:Request){
- const auth=await authorize(req);if(auth.error)return auth.error;
- if(Number(req.headers.get('content-length')||0)>102*1024*1024)return Response.json({error:'Choose an audio file under 100 MB.'},{status:413});
- const form=await req.formData().catch(()=>null);
- const input=form?.get('audio');
- if(!(input instanceof File)||input.size>100*1024*1024||!input.size)
-  return Response.json({error:'Choose an audio file under 100 MB.'},{status:400});
- const enc=new TextEncoder();let cancelJob:(()=>void)|undefined,closed=false,client:Client|undefined;
- const preparation=new AbortController();
- const stream=new ReadableStream({
-  async start(controller){
-   const send=(type:string,data:unknown)=>{if(!closed)controller.enqueue(enc.encode(JSON.stringify({type,data})+'\n'));};
-   const abort=()=>{closed=true;preparation.abort();cancelJob?.();client?.close();};req.signal.addEventListener('abort',abort,{once:true});
-   try{
-    if(req.signal.aborted){abort();return;}
-    send('status','Reading the full recording…');
-    const {audio,duration}=await prepareAudio(input,preparation.signal);
-    if(closed)return;
-    send('status','Connecting to the transcription studio…');
-    client=await connect(ENGINE,auth.session.token,send,preparation.signal);
-    if(req.signal.aborted||closed){client.close();return;}
-    const job=client.submit('/transcribe',[handle_file(audio),0,duration,false,true]);
-    cancelJob=()=>{job.cancel();};let result:ScoreResult|null=null;
-    for await(const event of job){
-     if(closed)break;
-     if(event.type==='status'){
-      if(event.stage==='error')throw new Error(typeof event.message==='string'?event.message:'Conversion failed. Please try again.');
-      const details=event as unknown as {progress_data?:{desc?:string}[];position?:number};
-      send('status',details.progress_data?.find(p=>p.desc)?.desc|| (event.stage==='pending'?'Waiting for an available GPU…':'Listening and writing your score…'));
-     }
-     if(event.type==='data'){
-      const data=event.data as unknown[];
-      if(typeof data[5]==='string'&&data[5].trim()){
-       result={abc:data[5],status:String(data[0]),downloads:Array.isArray(data[4])?data[4].map(file).filter((d):d is Download=>!!d):[],pdf:file(data[2])?.url,audio:file(data[3])?.url};
-      }
-     }
-    }
-    if(!closed){if(!result)throw new Error('No editable score was returned. Try another recording.');send('result',result);}
-   }catch(error){
-    let message=error instanceof Error?error.message:'Conversion could not finish. Please try again.';
-    if(/quota|GPU.*duration|exceeded/i.test(message))message='Your Hugging Face processing allowance is unavailable for this recording. Try a shorter recording or wait for your allowance to reset.';
-    send('error',explain(message).slice(0,600));
-   }finally{client?.close();req.signal.removeEventListener('abort',abort);if(!closed)controller.close();}
-  },cancel(){closed=true;preparation.abort();cancelJob?.();client?.close();}
- });
- return new Response(stream,{headers:{'Content-Type':'application/x-ndjson','Cache-Control':'no-store','X-Accel-Buffering':'no'}});
-}
+import {type Client,handle_file} from '@gradio/client';
+import type {ScoreResult,ScoreTiming,Download} from '@/lib/types';
+import {prepareAudio} from '@/lib/audio';
+import {authorize} from '@/lib/auth';
+import {ENGINE,asFile,connect,explain} from '@/lib/kiku';
+export const runtime='nodejs';
+const file=(value:unknown)=>asFile(ENGINE,value);
+/** The engine's bar timing, if it sent a usable one: rising times, one per bar line. */
+function timing(value:unknown):ScoreTiming|undefined{
+ if(!value||typeof value!=='object')return;
+ const {bpm,bars,clock}=value as Partial<ScoreTiming>;
+ const rising=(list:unknown)=>Array.isArray(list)&&list.length>1&&list.every((v,i)=>Number.isFinite(v)&&(!i||v>list[i-1]));
+ if(typeof bpm!=='number'||!rising(bars)||!rising(clock)||bars!.length!==clock!.length)return;
+ return {bpm,bars:bars!,clock:clock!};
+}
+export async function POST(req:Request){
+ const auth=await authorize(req);if(auth.error)return auth.error;
+ if(Number(req.headers.get('content-length')||0)>102*1024*1024)return Response.json({error:'Choose an audio file under 100 MB.'},{status:413});
+ const form=await req.formData().catch(()=>null);
+ const input=form?.get('audio');
+ if(!(input instanceof File)||input.size>100*1024*1024||!input.size)
+  return Response.json({error:'Choose an audio file under 100 MB.'},{status:400});
+ const enc=new TextEncoder();let cancelJob:(()=>void)|undefined,closed=false,client:Client|undefined;
+ const preparation=new AbortController();
+ const stream=new ReadableStream({
+  async start(controller){
+   const send=(type:string,data:unknown)=>{if(!closed)controller.enqueue(enc.encode(JSON.stringify({type,data})+'\n'));};
+   const abort=()=>{closed=true;preparation.abort();cancelJob?.();client?.close();};req.signal.addEventListener('abort',abort,{once:true});
+   try{
+    if(req.signal.aborted){abort();return;}
+    send('status','Reading the full recording…');
+    const {audio,duration}=await prepareAudio(input,preparation.signal);
+    if(closed)return;
+    send('status','Connecting to the transcription studio…');
+    client=await connect(ENGINE,auth.session.token,send,preparation.signal);
+    if(req.signal.aborted||closed){client.close();return;}
+    const job=client.submit('/transcribe',[handle_file(audio),0,duration,false,false]);
+    cancelJob=()=>{job.cancel();};let result:ScoreResult|null=null;
+    for await(const event of job){
+     if(closed)break;
+     if(event.type==='status'){
+      if(event.stage==='error')throw new Error(typeof event.message==='string'?event.message:'Conversion failed. Please try again.');
+      const details=event as unknown as {progress_data?:{desc?:string}[];position?:number};
+      send('status',details.progress_data?.find(p=>p.desc)?.desc|| (event.stage==='pending'?'Waiting for an available GPU…':'Listening and writing your score…'));
+     }
+     if(event.type==='data'){
+      const data=event.data as unknown[];
+      if(typeof data[5]==='string'&&data[5].trim()){
+       result={abc:data[5],status:String(data[0]),downloads:Array.isArray(data[4])?data[4].map(file).filter((d):d is Download=>!!d):[],pdf:file(data[2])?.url,audio:file(data[3])?.url,timing:timing(data[6])};
+      }
+     }
+    }
+    if(!closed){if(!result)throw new Error('No editable score was returned. Try another recording.');send('result',result);}
+   }catch(error){
+    let message=error instanceof Error?error.message:'Conversion could not finish. Please try again.';
+    if(/quota|GPU.*duration|exceeded/i.test(message))message='Your Hugging Face processing allowance is unavailable for this recording. Try a shorter recording or wait for your allowance to reset.';
+    send('error',explain(message).slice(0,600));
+   }finally{client?.close();req.signal.removeEventListener('abort',abort);if(!closed)controller.close();}
+  },cancel(){closed=true;preparation.abort();cancelJob?.();client?.close();}
+ });
+ return new Response(stream,{headers:{'Content-Type':'application/x-ndjson','Cache-Control':'no-store','X-Accel-Buffering':'no'}});
+}

components/OriginalAudioPlayer.tsx

@@ -1,18 +1,25 @@
-'use client';
-import {useEffect,useRef,useState} from 'react';
-import {Pause,Play,Volume2} from 'lucide-react';
-const clock=(s:number)=>`${Math.floor(s/60)}:${String(Math.floor(s%60)).padStart(2,'0')}`;
-export default function OriginalAudioPlayer({src,onPlay,scorePlaying}:{src:string;onPlay:()=>void;scorePlaying:boolean}){
- const ref=useRef<HTMLAudioElement>(null);
- const [playing,setPlaying]=useState(false),[time,setTime]=useState(0),[duration,setDuration]=useState(0),[volume,setVolume]=useState(1),[error,setError]=useState('');
- useEffect(()=>{if(scorePlaying)ref.current?.pause();},[scorePlaying]);
- return <section className="original-audio original-player" aria-label="Original recording">
-  <div className="original-player-heading"><strong>Original recording</strong><span>Your uploaded audio</span></div>
-  <audio ref={ref} src={src} preload="metadata" onLoadedMetadata={()=>{const d=ref.current?.duration||0;setDuration(Number.isFinite(d)?d:0);if(ref.current)ref.current.volume=volume;}} onDurationChange={()=>{const d=ref.current?.duration||0;if(Number.isFinite(d))setDuration(d);}} onTimeUpdate={()=>setTime(ref.current?.currentTime||0)} onPlay={()=>{setPlaying(true);onPlay();}} onPause={()=>setPlaying(false)} onEnded={()=>setPlaying(false)} onError={()=>setError('The original audio could not be loaded.')}/>
-  <div className="original-player-controls">
-   <button className="transport-icon" aria-label={playing?'Pause original recording':'Play original recording'} onClick={async()=>{if(!ref.current)return;if(playing)ref.current.pause();else try{await ref.current.play();}catch{setError('The original audio could not be played.');}}}>{playing?<Pause size={19}/>:<Play size={19}/>}</button>
-   <span className="audio-time">{clock(time)}</span><input type="range" aria-label="Original recording position" aria-valuetext={`${clock(time)} of ${clock(duration)}`} min="0" max={duration||1} step=".1" value={Math.min(time,duration||1)} disabled={!duration} onChange={e=>{const value=Number(e.target.value);if(ref.current)ref.current.currentTime=value;setTime(value);}}/><span className="audio-time">{clock(duration)}</span>
-   <label className="original-volume"><Volume2 size={17}/><input aria-label="Original recording volume" type="range" min="0" max="1" step=".05" value={volume} onChange={e=>{const v=Number(e.target.value);setVolume(v);if(ref.current)ref.current.volume=v;}}/></label>
-  </div>{error&&<p role="alert">{error}</p>}
- </section>;
-}
+'use client';
+import {useEffect,useRef,useState} from 'react';
+import {Pause,Play,Volume2} from 'lucide-react';
+const clock=(s:number)=>`${Math.floor(s/60)}:${String(Math.floor(s%60)).padStart(2,'0')}`;
+/** `onPosition` gets the playing time every frame, and on seeks, so the score can follow along. */
+export default function OriginalAudioPlayer({src,onPlay,scorePlaying,onPosition}:{src:string;onPlay:()=>void;scorePlaying:boolean;onPosition?:(seconds:number)=>void}){
+ const ref=useRef<HTMLAudioElement>(null);
+ const [playing,setPlaying]=useState(false),[time,setTime]=useState(0),[duration,setDuration]=useState(0),[volume,setVolume]=useState(1),[error,setError]=useState('');
+ useEffect(()=>{if(scorePlaying)ref.current?.pause();},[scorePlaying]);
+ const follow=useRef(onPosition);follow.current=onPosition;
+ useEffect(()=>{
+  if(!playing)return;
+  let frame=0;const tick=()=>{if(ref.current)follow.current?.(ref.current.currentTime);frame=requestAnimationFrame(tick);};
+  frame=requestAnimationFrame(tick);return()=>cancelAnimationFrame(frame);
+ },[playing]);
+ return <section className="original-audio original-player" aria-label="Original recording">
+  <div className="original-player-heading"><strong>Original recording</strong><span>{onPosition?'The score follows along as it plays':'Your uploaded audio'}</span></div>
+  <audio ref={ref} src={src} preload="metadata" onLoadedMetadata={()=>{const d=ref.current?.duration||0;setDuration(Number.isFinite(d)?d:0);if(ref.current)ref.current.volume=volume;}} onDurationChange={()=>{const d=ref.current?.duration||0;if(Number.isFinite(d))setDuration(d);}} onTimeUpdate={()=>setTime(ref.current?.currentTime||0)} onPlay={()=>{setPlaying(true);onPlay();}} onPause={()=>setPlaying(false)} onEnded={()=>setPlaying(false)} onError={()=>setError('The original audio could not be loaded.')}/>
+  <div className="original-player-controls">
+   <button className="transport-icon" aria-label={playing?'Pause original recording':'Play original recording'} onClick={async()=>{if(!ref.current)return;if(playing)ref.current.pause();else try{await ref.current.play();}catch{setError('The original audio could not be played.');}}}>{playing?<Pause size={19}/>:<Play size={19}/>}</button>
+   <span className="audio-time">{clock(time)}</span><input type="range" aria-label="Original recording position" aria-valuetext={`${clock(time)} of ${clock(duration)}`} min="0" max={duration||1} step=".1" value={Math.min(time,duration||1)} disabled={!duration} onChange={e=>{const value=Number(e.target.value);if(ref.current)ref.current.currentTime=value;setTime(value);follow.current?.(value);}}/><span className="audio-time">{clock(duration)}</span>
+   <label className="original-volume"><Volume2 size={17}/><input aria-label="Original recording volume" type="range" min="0" max="1" step=".05" value={volume} onChange={e=>{const v=Number(e.target.value);setVolume(v);if(ref.current)ref.current.volume=v;}}/></label>
+  </div>{error&&<p role="alert">{error}</p>}
+ </section>;
+}

components/ScoreWorkspace.tsx

@@ -1,10 +1,11 @@
 'use client';
-import {useCallback,useEffect,useRef,useState} from 'react';
+import {useCallback,useEffect,useMemo,useRef,useState} from 'react';
 import {ArrowDown,ArrowUp,ChevronDown,Code2,Download,Music2,Pause,Play,Printer,Redo2,Repeat2,RotateCcw,SkipBack,Undo2,Volume2,VolumeX,X} from 'lucide-react';
 import type {NoteTimingEvent,TuneObject} from 'abcjs';
 import type {Source,ScoreResult} from '@/lib/types';
 import OriginalAudioPlayer from '@/components/OriginalAudioPlayer';
 import {prepareScore,SampleCache,type Playback} from '@/lib/score-playback';
+import {engrave} from '@/lib/engrave';
 
 type AbcLibrary=typeof import('abcjs');
 type Selection={start:number;end:number;token:string};
@@ -17,10 +18,14 @@ function save(text:string,name:string,type='text/plain'){
 export default function ScoreWorkspace({result,source,onNew}:{result:ScoreResult;source:Source;onNew:()=>void}){
  const [history,setHistory]=useState([result.abc]),[index,setIndex]=useState(0);
  const abc=history[index],edited=abc!==result.abc;
+ // What is drawn and played: the same notes laid out for reading. Editing by
+ // clicking a note needs the text's own character positions, so it uses the text.
+ const display=useMemo(()=>{if(editingEnabled)return abc;try{return engrave(abc);}catch{return abc;}},[abc]);
  const [codeOpen,setCodeOpen]=useState(false),[selection,setSelection]=useState<Selection|null>(null);
  const [playing,setPlaying]=useState(false),[loading,setLoading]=useState(false),[position,setPosition]=useState(0),[total,setTotal]=useState(0);
  const [speed,setSpeed]=useState(100),[volume,setVolume]=useState(1),[loop,setLoop]=useState(false),[follow,setFollow]=useState(true);
  const instrument=0;
+ const [chords,setChords]=useState(false);
  const [problem,setProblem]=useState(''),[notice,setNotice]=useState(''),[ready,setReady]=useState(false);
  const paper=useRef<HTMLDivElement>(null),scoreScroll=useRef<HTMLDivElement>(null),textarea=useRef<HTMLTextAreaElement>(null);
  const lib=useRef<AbcLibrary|null>(null),tune=useRef<TuneObject|null>(null),audio=useRef<AudioContext|null>(null),gain=useRef<GainNode|null>(null),node=useRef<{stop:()=>void}|null>(null),buffer=useRef<Playback|null>(null);
@@ -63,7 +68,7 @@ export default function ScoreWorkspace({result,source,onNew}:{result:ScoreResult
    const ABC=await import('abcjs');if(revision!==generation.current||!paper.current)return;lib.current=ABC;
    try{
     if(!/\nK:/.test(abc)||!abc.trim())throw new Error('The score needs a K: key field and some notes. Undo or restore the AI score.');
-    const visual=ABC.renderAbc(paper.current,abc,{add_classes:true,selectTypes:['note'],selectionColor:'#cd7815',responsive:'resize',staffwidth:850,paddingtop:30,paddingbottom:40,
+    const visual=ABC.renderAbc(paper.current,display,{add_classes:true,selectTypes:['note'],selectionColor:'#cd7815',responsive:'resize',staffwidth:850,paddingtop:30,paddingbottom:40,
      clickListener:(el,_n,_classes,analysis)=>{if(el.el_type!=='note'||typeof el.startChar!=='number'||typeof el.endChar!=='number')return;
       if(!editingEnabled){const event=timings.current.find(event=>event.elements?.flat().some(element=>element===analysis.selectableElement||analysis.selectableElement?.contains(element)));if(event)seek(event.milliseconds/1000);return;}
       const selected={start:el.startChar,end:el.endChar,token:abc.slice(el.startChar,el.endChar)};setSelection(selected);
@@ -79,7 +84,7 @@ export default function ScoreWorkspace({result,source,onNew}:{result:ScoreResult
     setNotice(visual.warnings?.length?'Some notation could not be read. Check your edit before playing.':'');
    }catch(e){setProblem(e instanceof Error?e.message:'This notation could not be read.');tune.current=null;}
   },180);return()=>clearTimeout(timer);
- },[abc,speed,stop]);
+ },[abc,display,speed,chords,stop]);
  useEffect(()=>{let frame=0;const tick=()=>{if(isPlaying.current&&audio.current){const time=offset.current+audio.current.currentTime-started.current;setPosition(time);mark(time);}frame=requestAnimationFrame(tick);};frame=requestAnimationFrame(tick);return()=>cancelAnimationFrame(frame);},[mark]);
  useEffect(()=>{if(gain.current)gain.current.gain.value=volume;},[volume]);
  useEffect(()=>()=>{generation.current++;stop();gain.current?.disconnect();},[stop]);
@@ -92,14 +97,14 @@ export default function ScoreWorkspace({result,source,onNew}:{result:ScoreResult
   const promise=(async()=>{try{
     setLoading(true);setProblem('');
     if(!audio.current){audio.current=new AudioContext();gain.current=audio.current.createGain();gain.current.gain.value=volumeRef.current;gain.current.connect(audio.current.destination);}
-    const prepared=await prepareScore(audio.current,originalTune,instrument,speed,soundCache.current,()=>rev===generation.current);
+    const prepared=await prepareScore(audio.current,originalTune,instrument,speed,chords,soundCache.current,()=>rev===generation.current);
     if(rev!==generation.current)return;
     buffer.current=prepared;setTotal(prepared.duration);
    }catch(e){if(rev===generation.current)setProblem(e instanceof Error?e.message:'Playback failed. Please try again.');}
    finally{if(rev===generation.current)setLoading(false);if(preparation.current?.revision===rev)preparation.current=null;}
   })();
   preparation.current={revision:rev,promise};return promise;
- },[ready,abc,speed]);
+ },[ready,abc,speed,chords]);
  useEffect(()=>{if(ready)void preparePlayback();},[ready,preparePlayback]);
  async function toggle(){
   if(playing){stop();return;}if(!ready||playRequest.current!==null)return;
@@ -112,6 +117,21 @@ export default function ScoreWorkspace({result,source,onNew}:{result:ScoreResult
   }catch(e){if(rev===generation.current)setProblem(e instanceof Error?e.message:'Playback failed. Please try again.');}
   finally{if(playRequest.current===rev){playRequest.current=null;setStarting(false);}}
  }
+ /**
+  * Light the note the original recording is on. The engine's bar timing says
+  * where each bar starts in the recording, so the score keeps up as the
+  * performance speeds up and slows down. Pressing play on the score then
+  * carries on from that point.
+  */
+ const followRecording=useCallback((seconds:number)=>{
+  const timing=result.timing;if(!timing||isPlaying.current)return;
+  const {bars,clock,bpm}=timing;
+  if(seconds<clock[0]){mark(-1);return;}
+  let i=0;while(i<clock.length-2&&seconds>=clock[i+1])i++;
+  const quarters=Math.min(bars[bars.length-1],bars[i]+(bars[i+1]-bars[i])*(seconds-clock[i])/(clock[i+1]-clock[i]));
+  const at=quarters*60/bpm*100/speed;
+  offset.current=at;setPosition(at);mark(at);
+ },[result.timing,mark,speed]);
  function seek(value:number){const was=isPlaying.current;stop();offset.current=value;setPosition(value);lastEvent.current=-1;mark(value);if(was)startBuffer(value);}
  function noteEdit(action:'up'|'down'|'longer'|'shorter'){
   if(!selection)return;const match=selection.token.match(/^(\s*(?:"[^"]*"\s*)*)([_^=]*)([A-Ga-g])([,']*)(\d*(?:\/\d*)?)(-?)(\s*)$/);
@@ -123,7 +143,7 @@ export default function ScoreWorkspace({result,source,onNew}:{result:ScoreResult
   }else{const [n,d]=length.split('/');let num=Number(n||1),den=d===undefined?1:Number(d||2);if(action==='longer')num*=2;else den*=2;while(num%2===0&&den%2===0){num/=2;den/=2;}length=den===1?(num===1?'':String(num)):`${num===1?'':num}/${den===2?'':den}`;}
   const token=prefix+acc+note+oct+length+tie+suffix;commit(abc.slice(0,selection.start)+token+abc.slice(selection.end));setSelection({...selection,end:selection.start+token.length,token});
  }
- function midi(){if(!lib.current)return;try{const uri=lib.current.synth.getMidiFile(abc,{midiOutputType:'encoded'}) as string;const a=document.createElement('a');a.href=uri;a.download='edited-score.mid';a.click();}catch{setProblem('MIDI export failed. Check the notation.');}}
+ function midi(){if(!lib.current)return;try{const uri=lib.current.synth.getMidiFile(display,{midiOutputType:'encoded',chordsOff:!chords}) as string;const a=document.createElement('a');a.href=uri;a.download='edited-score.mid';a.click();}catch{setProblem('MIDI export failed. Check the notation.');}}
  return <section className={`workspace view-enter ${editingEnabled?'':'read-only-score'}`}>
   <div className="workspace-heading"><div><div className="eyebrow">YOUR MUSIC, ON PAPER</div><h1>{source.title}</h1><p>{source.artist||'Your recording'} <span>·</span> {edited?'Edited score':'Original AI score'}</p></div><button className="new-score-button" onClick={onNew}><span aria-hidden="true">+</span> New score</button></div>
   <div className="transport" aria-label="Score playback controls">
@@ -133,11 +153,11 @@ export default function ScoreWorkspace({result,source,onNew}:{result:ScoreResult
    <button className={`transport-icon ${loop?'active':''}`} onClick={()=>setLoop(!loop)} aria-label="Loop score" aria-pressed={loop} title="Loop"><Repeat2 size={20}/></button>
    <div className="volume"><button className="transport-icon" onClick={()=>setVolume(volume?0:.7)} aria-label={volume?'Mute':'Unmute'}>{volume?<Volume2 size={18}/>:<VolumeX size={18}/>}</button><input aria-label="Volume" type="range" min="0" max="1" step=".05" value={volume} onChange={e=>setVolume(Number(e.target.value))}/></div>
   </div>
-  <div className="under-player"><span>{loading?'Preparing piano sounds…':'Piano playback follows your written score'}</span><div className="playback-options"><label>Speed <select aria-label="Playback speed" value={speed} onChange={e=>{stop();setSpeed(Number(e.target.value));}}><option value="50">0.5×</option><option value="75">0.75×</option><option value="100">1×</option><option value="125">1.25×</option><option value="150">1.5×</option></select></label></div></div>
+  <div className="under-player"><span>{loading?'Preparing piano sounds…':'Piano playback follows your written score'}</span><div className="playback-options"><label title="Adds a bass and chord pattern from the chord names. It is not written in the score."><input type="checkbox" checked={chords} onChange={e=>{stop();setChords(e.target.checked);}}/> Chord backing</label><label>Speed <select aria-label="Playback speed" value={speed} onChange={e=>{stop();setSpeed(Number(e.target.value));}}><option value="50">0.5×</option><option value="75">0.75×</option><option value="100">1×</option><option value="125">1.25×</option><option value="150">1.5×</option></select></label></div></div>
   <div className="score-toolbar"><div className="toolbar-group"><button onClick={undo} disabled={index===0} title="Undo (Ctrl Z)" aria-label="Undo"><Undo2 size={18}/></button><button onClick={redo} disabled={index===history.length-1} title="Redo (Ctrl Shift Z)" aria-label="Redo"><Redo2 size={18}/></button><span className="divider"/><button onClick={()=>{commit(result.abc);setSelection(null);}} disabled={!edited}><RotateCcw size={16}/><span>Restore AI score</span></button></div><div className="toolbar-group"><label className="follow"><input type="checkbox" checked={follow} onChange={e=>setFollow(e.target.checked)}/> Follow notes</label><button className={codeOpen?'chosen':''} onClick={()=>setCodeOpen(!codeOpen)} aria-expanded={codeOpen}><Code2 size={17}/><span>Edit notation</span></button><button onClick={()=>window.print()} title="Print current score" aria-label="Print current score"><Printer size={17}/></button><details className="download-menu"><summary><Download size={17}/><span>Download</span><ChevronDown size={13}/></summary><div><button onClick={()=>save(abc,'score.abc')}>Current score · ABC</button><button onClick={midi}>Current score · MIDI</button>{result.pdf&&<a href={result.pdf} target="_blank" rel="noreferrer">Original AI score · PDF</a>}{result.downloads.find(d=>d.name.endsWith('.zip'))&&<a href={result.downloads.find(d=>d.name.endsWith('.zip'))!.url} target="_blank" rel="noreferrer">Original AI files · ZIP</a>}</div></details></div></div>
   <div className="edit-help"><span>{selection?`Selected: ${selection.token.trim()}`:'Click a note to edit its pitch or length.'}</span>{selection&&<div className="note-actions"><button onClick={()=>noteEdit('down')} aria-label="Lower selected note"><ArrowDown size={14}/></button><button onClick={()=>noteEdit('up')} aria-label="Raise selected note"><ArrowUp size={14}/></button><button onClick={()=>noteEdit('shorter')}>½ length</button><button onClick={()=>noteEdit('longer')}>2× length</button></div>}</div>
   {problem&&<p role="alert" className="error-message">{problem}</p>}{notice&&<p role="status" className="edit-notice">{notice}</p>}
   <div className={`score-layout ${codeOpen?'with-editor':''}`}><div className="score-scroll" ref={scoreScroll}><div className="paper" ref={paper}/></div>{codeOpen&&<aside className="notation-editor"><div><strong>ABC notation</strong><button onClick={()=>setCodeOpen(false)} aria-label="Close notation editor"><X size={16}/></button></div><p>Change notes, rhythm, chords, title, or tempo. Playback updates with your edits.</p><textarea ref={textarea} aria-label="Edit ABC notation" spellCheck={false} value={abc} onChange={e=>commit(e.target.value)}/><span>Undo and redo work here too. Print to save an edited PDF.</span></aside>}</div>
-  {source.audioUrl&&<OriginalAudioPlayer src={source.audioUrl} onPlay={stop} scorePlaying={playing}/>}
+  {source.audioUrl&&<OriginalAudioPlayer src={source.audioUrl} onPlay={stop} scorePlaying={playing} onPosition={result.timing?followRecording:undefined}/>}
  </section>;
 }

lib/engrave.ts

@@ -0,0 +1,242 @@
+/**
+ * Lay out SheetSage2's native score for reading, without changing a note.
+ *
+ * The native dialect writes each bar as one unbroken run, so abcjs beams a
+ * whole bar together and a note that crosses a beat is not split. It always
+ * uses a treble clef, even for a low voice, keeps an Ins staff that is often
+ * all rests, and carries an accidental to that letter in every octave of the
+ * bar, where abcjs reads it for one octave only, so such a note is drawn and
+ * played a semitone off.
+ *
+ * `engrave` reads the native score into notes with the rules of the engine's
+ * abc_tools.py and writes it again grouped by beat, with a clef that fits each
+ * part and accidentals abcjs reads the same way. The result is only for
+ * display and playback; downloads and the editor keep the native text. A score
+ * that is not in the native dialect, such as one edited by hand, throws, and
+ * the caller shows it as written.
+ */
+
+type Meter=[number,number];
+type Note={start:number;units:number;letter:string;octave:number;alt:number;pitch:number};
+type Voice={meter:Meter;key:string;time:number;notes:Note[];chords:[number,string][];keys:[number,string][];pending:{pitch:number;written:number}|null};
+type Bar={start:number;length:number;meter:Meter;key:string;sections:string[]};
+
+const TOKEN=/"([^"\n]*)"|\[K:([^\]\n]+)\]|(\^\^|__|\^|_|=)?([A-Ga-gz])([,']*)(\d*)(-?)/y;
+const NATURAL:Record<string,number>={C:0,D:2,E:4,F:5,G:7,A:9,B:11};
+const ALTER:Record<string,number>={'=':0,'_':-1,'__':-2,'^':1,'^^':2};
+const MARK:Record<number,string>={[-2]:'__',[-1]:'_',0:'=',1:'^',2:'^^'};
+const MAJOR=['Cb','Gb','Db','Ab','Eb','Bb','F','C','G','D','A','E','B','F#','C#'];
+const MINOR=['Abm','Ebm','Bbm','Fm','Cm','Gm','Dm','Am','Em','Bm','F#m','C#m','G#m','D#m','A#m'];
+const VOICE_DEFS=['V: Vocal clef=treble name="Vocal Melody" snm="Vocal"','V: Ins clef=treble name="Ins Melody" snm="Inst."'];
+
+function fail(message:string):never{throw new Error('Not a native score: '+message);}
+
+function signature(key:string){
+ const index=Math.max(MAJOR.indexOf(key),MINOR.indexOf(key));
+ if(index<0)fail(`key ${key}`);
+ const count=index-7,result:Record<string,number>={C:0,D:0,E:0,F:0,G:0,A:0,B:0};
+ for(const letter of (count>0?'FCGDAEB':'BEADGCF').slice(0,Math.abs(count)))result[letter]=count>0?1:-1;
+ return result;
+}
+
+function meterOf(text:string):Meter{
+ const match=/^([1-9]\d*)\/([1-9]\d*)$/.exec(text.trim());
+ if(!match)fail(`meter ${text}`);
+ return [Number(match[1]),Number(match[2])];
+}
+
+function parseBar(body:string,voice:Voice,grid:number,bars:Bar[]|null){
+ const [n,d]=voice.meter,length=n*grid/d;
+ if(!Number.isInteger(length))fail('meter does not fit the grid');
+ const start=voice.time,local:Record<string,number>={};
+ if(bars)bars.push({start,length,meter:voice.meter,key:voice.key,sections:[]});
+ let offset=0;
+ if(body==='Z'){if(voice.pending)fail('tie into a rest');offset=length;}
+ else for(let cursor=0;cursor<body.length;){
+  if(/\s/.test(body[cursor])){cursor++;continue;}
+  TOKEN.lastIndex=cursor;
+  const match=TOKEN.exec(body);
+  if(!match)fail(`token at ${body.slice(cursor,cursor+12)}`);
+  cursor=TOKEN.lastIndex;
+  const [,chord,key,acc,name,marks,count,tie]=match;
+  if(chord!==undefined){voice.chords.push([start+offset,chord]);continue;}
+  if(key!==undefined){signature(key);voice.key=key;voice.keys.push([start+offset,key]);for(const k in local)delete local[k];continue;}
+  const units=Number(count||1);
+  if(offset+units>length)fail('bar too long');
+  if(name==='z'){if(voice.pending)fail('tie into a rest');offset+=units;continue;}
+  const letter=name.toUpperCase(),octave=(name===letter?0:1)+[...marks].filter(c=>c==="'").length-[...marks].filter(c=>c===',').length;
+  const written=60+NATURAL[letter]+12*octave;
+  let alt=local[letter]??signature(voice.key)[letter];
+  if(acc){alt=ALTER[acc];local[letter]=alt;}
+  let pitch=written+alt;
+  if(voice.pending){
+   // An unmarked continuation keeps its tied accidental across a bar line.
+   if(!acc&&written===voice.pending.written)pitch=voice.pending.pitch;
+   if(pitch!==voice.pending.pitch)fail('tie changes pitch');
+   voice.notes[voice.notes.length-1].units+=units;
+  }else voice.notes.push({start:start+offset,units,letter,octave,alt:pitch-written,pitch});
+  voice.pending=tie?{pitch,written}:null;
+  offset+=units;
+ }
+ if(offset!==length)fail('bar too short');
+ voice.time+=length;
+}
+
+function parse(text:string){
+ const lines=text.split(/\r?\n/).filter(line=>line.trim());
+ if(lines.length<12||lines[0]!=='X:1'||!lines[1].startsWith('T:')||!lines[2].startsWith('M:'))fail('header');
+ const unit=/^L:1\/(\d+)$/.exec(lines[3]),tempo=/^Q:1\/4=(\d+)$/.exec(lines[4]);
+ if(!unit||!tempo||lines[5]!==VOICE_DEFS[0]||lines[6]!==VOICE_DEFS[1]||!lines[7].startsWith('K:'))fail('header');
+ const grid=Number(unit[1]),meter=meterOf(lines[2].slice(2)),key=lines[7].slice(2).trim();
+ signature(key);
+ const make=():Voice=>({meter,key,time:0,notes:[],chords:[],keys:[[0,key]],pending:null});
+ const vocal=make(),ins=make(),bars:Bar[]=[];
+ let cursor=8;
+ while(cursor<lines.length){
+  const sections:string[]=[];
+  while(cursor<lines.length&&lines[cursor].startsWith('%')){sections.push(lines[cursor].replace(/^%\s*/,''));cursor++;}
+  if(cursor>=lines.length)fail('section without music');
+  const first=bars.length;
+  for(const [name,voice] of [['Vocal',vocal],['Ins',ins]] as const){
+   if(lines[cursor]?.trim()!=='V: '+name)fail(`expected V: ${name}`);
+   cursor++;
+   while(cursor<lines.length&&/^[MK]:/.test(lines[cursor])){
+    const value=lines[cursor].slice(2).trim();
+    if(lines[cursor][0]==='M')voice.meter=meterOf(value);
+    else{signature(value);voice.key=value;voice.keys.push([voice.time,value]);}
+    cursor++;
+   }
+   const line=lines[cursor++]?.trim();
+   if(!line?.endsWith('|'))fail('music line');
+   for(const raw of line.slice(0,-1).split('|')){
+    const body=raw.trim(),rest=/^Z([2-4])?$/.exec(body);
+    if(!body)fail('empty bar');
+    for(let i=0;i<(rest?Number(rest[1]||1):1);i++)parseBar(rest?'Z':body,voice,grid,name==='Vocal'?bars:null);
+   }
+  }
+  if(vocal.time!==ins.time)fail('voices differ in length');
+  if(bars[first])bars[first].sections=sections;
+ }
+ if(vocal.pending||ins.pending)fail('unresolved tie');
+ // A key change written at the very start of a bar belongs to that bar.
+ for(const bar of bars)bar.key=vocal.keys.filter(([t])=>t<=bar.start).pop()![1];
+ return {header:lines.slice(0,5),grid,bars,vocal,ins};
+}
+
+/** A length abcjs draws as one note: plain or dotted. */
+function drawable(units:number){while(units%2===0)units/=2;return units===1||units===3;}
+
+/**
+ * Split a note or rest so it reads by the beat: one that starts off the beat
+ * stops at the next beat, and in 4/4 nothing but a note from the downbeat
+ * crosses the middle of the bar. Each piece is a plain or dotted value.
+ */
+function pieces(position:number,units:number,beat:number,middle:number){
+ const out:number[]=[];
+ while(units>0){
+  let take=units;
+  if(position%beat)take=Math.min(take,beat-position%beat);
+  else if(middle&&position&&position<middle&&position+take>middle)take=middle-position;
+  while(!drawable(take))take--;
+  out.push(take);position+=take;units-=take;
+ }
+ return out;
+}
+
+/** Treble for most parts, treble-8 (written an octave up) for low voices, bass below that. */
+function clefFor(notes:Note[]){
+ if(!notes.length)return {clef:'treble',shift:0};
+ const sorted=notes.map(note=>note.pitch).sort((a,b)=>a-b),middle=sorted[sorted.length>>1];
+ return middle>=59?{clef:'treble',shift:0}:middle>=47?{clef:'treble-8',shift:1}:{clef:'bass',shift:0};
+}
+
+const noteName=(letter:string,octave:number)=>octave<0?letter+','.repeat(-octave):octave===0?letter:letter.toLowerCase()+"'".repeat(octave-1);
+const count=(units:number)=>units===1?'':String(units);
+const label=(text:string)=>text.charAt(0).toUpperCase()+text.slice(1);
+
+function renderBar(bar:Bar,voice:Voice,grid:number,shift:number,lead:boolean){
+ const end=bar.start+bar.length;
+ const inside=voice.notes.filter(note=>note.start<end&&note.start+note.units>bar.start);
+ const chords=lead?voice.chords.filter(([t])=>t>=bar.start&&t<end):[];
+ const keys=voice.keys.filter(([t])=>t>bar.start&&t<end);
+ const sections=lead?bar.sections:[];
+ if(!inside.length&&!chords.length&&!keys.length&&!sections.length)return 'Z';
+ const [n,d]=bar.meter,compound=d===8&&n%3===0;
+ let beat=compound?3*grid/8:grid/d;
+ if(!Number.isInteger(beat)||beat<1)beat=bar.length;
+ const middle=n===4&&d===4?2*beat:0;
+ const points=new Set([bar.start,end,...chords.map(([t])=>t),...keys.map(([t])=>t)]);
+ for(const note of inside){points.add(Math.max(bar.start,note.start));points.add(Math.min(end,note.start+note.units));}
+ const times=[...points].sort((a,b)=>a-b);
+ // Accidentals are written whenever abcjs (by octave) or the native dialect
+ // (by letter) would otherwise read the note differently.
+ let sig=signature(bar.key);
+ const byOctave=new Map<string,number>(),byLetter=new Map<string,number>();
+ const accidental=(note:Note)=>{
+  const natural=sig[note.letter],id=note.letter+note.octave;
+  const needed=note.alt!==(byOctave.get(id)??natural)||note.alt!==(byLetter.get(note.letter)??natural);
+  byOctave.set(id,note.alt);byLetter.set(note.letter,note.alt);
+  return needed?MARK[note.alt]:'';
+ };
+ const gap=(at:number)=>at>bar.start&&(at-bar.start)%beat===0?' ':'';
+ let out='';
+ for(let i=0;i<times.length-1;i++){
+  const a=times[i],b=times[i+1];
+  out+=gap(a);
+  for(const [t,key] of keys)if(t===a){out+=`[K:${key}]`;sig=signature(key);byOctave.clear();byLetter.clear();}
+  // Chord names first, so a section label stacks above them, not between them and the staff.
+  for(const [t,symbol] of chords)if(t===a)out+=`"${symbol}"`;
+  if(a===bar.start)out+=sections.map(text=>`"^${label(text)}"`).join('');
+  const note=inside.find(item=>item.start<=a&&a<item.start+item.units);
+  let at=a;
+  pieces(a-bar.start,b-a,beat,middle).forEach((units,k)=>{
+   if(k)out+=gap(at);
+   if(!note)out+='z'+count(units);
+   else{
+    // Only a note's first piece carries its accidental. A tied piece keeps the
+    // pitch it is tied from, and abcjs ignores any accidental written on it
+    // when it reads the rest of the bar.
+    const mark=at>note.start?'':accidental(note);
+    const tie=at+units<note.start+note.units?'-':'';
+    out+=mark+noteName(note.letter,note.octave+shift)+count(units)+tie;
+   }
+   at+=units;
+  });
+ }
+ return out;
+}
+
+export function engrave(text:string){
+ const {header,grid,bars,vocal,ins}=parse(text);
+ // Chords and section names ride on the first staff shown.
+ const parts=[vocal.notes.length||!ins.notes.length?{name:'Vocal',voice:vocal}:null,ins.notes.length?{name:'Ins',voice:ins}:null]
+  .filter((part):part is {name:string;voice:Voice}=>!!part);
+ if(parts[0].voice===ins){ins.chords=vocal.chords;}
+ const named=parts.length>1;
+ const defs=parts.map(({name,voice})=>{
+  const {clef}=clefFor(voice.notes);
+  return `V:${name} clef=${clef}`+(named?(name==='Vocal'?' name="Vocal" snm="Vo."':' name="Instrument" snm="Ins."'):'');
+ });
+ const lines=[...header.slice(0,2),`M:${bars[0].meter.join('/')}`,header[3],header[4],...defs,`K:${bars[0].key}`];
+ const rendered=parts.map(({voice},index)=>{
+  const {shift}=clefFor(voice.notes);
+  return bars.map(bar=>renderBar(bar,voice,grid,shift,index===0));
+ });
+ // abcjs lets a key change in one voice's line leak into the next voice's
+ // line, so a line breaks wherever the key or meter changes on a bar line and
+ // every voice's line states its key.
+ for(let first=0;first<bars.length;){
+  let last=first+1;
+  while(last<bars.length&&last-first<4&&!bars[last].sections.length
+   &&bars[last].meter.join()===bars[first].meter.join()&&bars[last].key===bars[first].key)last++;
+  const meterChanged=first>0&&bars[first-1].meter.join()!==bars[first].meter.join();
+  parts.forEach(({name},index)=>{
+   lines.push(`V:${name}`);
+   if(meterChanged)lines.push(`M:${bars[first].meter.join('/')}`);
+   lines.push(`K:${bars[first].key}`);
+   lines.push(rendered[index].slice(first,last).join(' | ')+(last===bars.length?' |]':' |'));
+  });
+  first=last;
+ }
+ return lines.join('\n')+'\n';
+}

lib/score-playback.ts

@@ -1,78 +1,79 @@
-import type {TuneObject} from 'abcjs';
-import {instruments} from './instruments';
-
-type Note={pitch:number;start:number;end:number;volume:number;cents:number};
-export type Playback={duration:number;start:(context:AudioContext,destination:AudioNode,offset:number,onEnd:()=>void)=>{stop:()=>void}};
-
-/** Cache small reusable samples, never a rendered copy of the entire recording. */
-export class SampleCache {
- private samples=new Map<string,AudioBuffer>();
- private pending=new Map<string,Promise<AudioBuffer>>();
- private bytes=0;
- async load(context:AudioContext,bank:string,pitch:number){
-  const key=`${bank}:${pitch}`,cached=this.samples.get(key);
-  if(cached){this.samples.delete(key);this.samples.set(key,cached);return cached;}
-  const pending=this.pending.get(key);if(pending)return pending;
-  const name=['C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B'][pitch%12]+(Math.floor(pitch/12)-1);
-  const request=(async()=>{
-   const response=await fetch(`/soundfonts/${bank}-mp3/${name}.mp3`,{signal:AbortSignal.timeout(15000)});
-   if(!response.ok)throw new Error('Instrument sounds could not load. Please try again.');
-   const sample=await context.decodeAudioData(await response.arrayBuffer());
-   const size=sample.length*sample.numberOfChannels*4;
-   while(this.bytes+size>64*1024*1024&&this.samples.size){
-    const oldest=this.samples.keys().next().value!,value=this.samples.get(oldest)!;
-    this.bytes-=value.length*value.numberOfChannels*4;this.samples.delete(oldest);
-   }
-   this.samples.set(key,sample);this.bytes+=size;return sample;
-  })();
-  this.pending.set(key,request);
-  try{return await request;}finally{this.pending.delete(key);}
- }
-}
-
-export async function prepareScore(context:AudioContext,tune:TuneObject,program:number,speed:number,cache:SampleCache,isCurrent=()=>true):Promise<Playback>{
- const bank=instruments.find(item=>item.program===program)?.sample;
- if(!bank)throw new Error('Unsupported instrument.');
- const sequence=tune.setUpAudio({program}),meter=tune.getMeterFraction();
- const seconds=tune.millisecondsPerMeasure()*100/speed/1000/(meter.den?meter.num/meter.den:1);
- const notes:Note[]=sequence.tracks.flatMap(track=>track.flatMap(event=>{
-  if(event.cmd!=='note'||event.duration<=0)return [];
-  const gap=Math.min(event.gap||0,event.duration*2/3);
-  return [{pitch:event.pitch,start:event.start*seconds,end:(event.start+event.duration-gap)*seconds,volume:event.volume/96,cents:('cents' in event?Number(event.cents):0)||0}];
- })).sort((a,b)=>a.start-b.start);
- const samples=new Map<number,AudioBuffer>();
- const pitches=[...new Set(notes.map(note=>note.pitch))];
- let next=0;
- await Promise.all(Array.from({length:Math.min(8,pitches.length)},async()=>{
-  while(next<pitches.length&&isCurrent()){const pitch=pitches[next++];samples.set(pitch,await cache.load(context,bank,pitch));}
- }));
- if(!isCurrent())throw new Error('Playback selection changed.');
- const duration=sequence.totalDuration*seconds+.2;
- return {duration,start(ctx,destination,offset,onEnd){
-  const origin=ctx.currentTime-offset,active=new Set<AudioBufferSourceNode>();
-  let index=0,stopped=false;
-  while(index<notes.length&&notes[index].end+.2<=offset)index++;
-  const tick=()=>{
-   if(stopped)return;
-   const now=ctx.currentTime,position=now-origin;
-   while(index<notes.length&&notes[index].start<position+1){
-    const note=notes[index++],sample=samples.get(note.pitch)!;
-    const elapsed=Math.max(0,position-note.start),rate=2**(note.cents/1200);
-    if(note.end+.2<=position||elapsed*rate>=sample.duration)continue;
-    const source=ctx.createBufferSource(),envelope=ctx.createGain();
-    source.buffer=sample;source.playbackRate.value=rate;
-    const when=Math.max(now,origin+note.start),end=origin+note.end;
-    envelope.gain.setValueAtTime(note.volume*Math.min(1,Math.max(0,(end+.2-when)/.2)),when);
-    if(end>when)envelope.gain.setValueAtTime(note.volume,end);
-    envelope.gain.linearRampToValueAtTime(0,Math.max(when+.001,end+.2));
-    source.connect(envelope);envelope.connect(destination);active.add(source);
-    source.onended=()=>{active.delete(source);source.disconnect();envelope.disconnect();};
-    source.start(when,elapsed*rate);source.stop(Math.max(when+.001,end+.2));
-   }
-   if(position>=duration){stop();onEnd();}
-  };
-  const timer=setInterval(tick,100);
-  function stop(){stopped=true;clearInterval(timer);for(const source of active){source.stop();}active.clear();}
-  tick();return {stop};
- }};
-}
+import type {TuneObject} from 'abcjs';
+import {instruments} from './instruments';
+
+type Note={pitch:number;start:number;end:number;volume:number;cents:number};
+export type Playback={duration:number;start:(context:AudioContext,destination:AudioNode,offset:number,onEnd:()=>void)=>{stop:()=>void}};
+
+/** Cache small reusable samples, never a rendered copy of the entire recording. */
+export class SampleCache {
+ private samples=new Map<string,AudioBuffer>();
+ private pending=new Map<string,Promise<AudioBuffer>>();
+ private bytes=0;
+ async load(context:AudioContext,bank:string,pitch:number){
+  const key=`${bank}:${pitch}`,cached=this.samples.get(key);
+  if(cached){this.samples.delete(key);this.samples.set(key,cached);return cached;}
+  const pending=this.pending.get(key);if(pending)return pending;
+  const name=['C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B'][pitch%12]+(Math.floor(pitch/12)-1);
+  const request=(async()=>{
+   const response=await fetch(`/soundfonts/${bank}-mp3/${name}.mp3`,{signal:AbortSignal.timeout(15000)});
+   if(!response.ok)throw new Error('Instrument sounds could not load. Please try again.');
+   const sample=await context.decodeAudioData(await response.arrayBuffer());
+   const size=sample.length*sample.numberOfChannels*4;
+   while(this.bytes+size>64*1024*1024&&this.samples.size){
+    const oldest=this.samples.keys().next().value!,value=this.samples.get(oldest)!;
+    this.bytes-=value.length*value.numberOfChannels*4;this.samples.delete(oldest);
+   }
+   this.samples.set(key,sample);this.bytes+=size;return sample;
+  })();
+  this.pending.set(key,request);
+  try{return await request;}finally{this.pending.delete(key);}
+ }
+}
+
+/** `chords` adds abcjs's backing from the chord names: a bass and chord pattern that is not in the notation. */
+export async function prepareScore(context:AudioContext,tune:TuneObject,program:number,speed:number,chords:boolean,cache:SampleCache,isCurrent=()=>true):Promise<Playback>{
+ const bank=instruments.find(item=>item.program===program)?.sample;
+ if(!bank)throw new Error('Unsupported instrument.');
+ const sequence=tune.setUpAudio({program,chordsOff:!chords}),meter=tune.getMeterFraction();
+ const seconds=tune.millisecondsPerMeasure()*100/speed/1000/(meter.den?meter.num/meter.den:1);
+ const notes:Note[]=sequence.tracks.flatMap(track=>track.flatMap(event=>{
+  if(event.cmd!=='note'||event.duration<=0)return [];
+  const gap=Math.min(event.gap||0,event.duration*2/3);
+  return [{pitch:event.pitch,start:event.start*seconds,end:(event.start+event.duration-gap)*seconds,volume:event.volume/96,cents:('cents' in event?Number(event.cents):0)||0}];
+ })).sort((a,b)=>a.start-b.start);
+ const samples=new Map<number,AudioBuffer>();
+ const pitches=[...new Set(notes.map(note=>note.pitch))];
+ let next=0;
+ await Promise.all(Array.from({length:Math.min(8,pitches.length)},async()=>{
+  while(next<pitches.length&&isCurrent()){const pitch=pitches[next++];samples.set(pitch,await cache.load(context,bank,pitch));}
+ }));
+ if(!isCurrent())throw new Error('Playback selection changed.');
+ const duration=sequence.totalDuration*seconds+.2;
+ return {duration,start(ctx,destination,offset,onEnd){
+  const origin=ctx.currentTime-offset,active=new Set<AudioBufferSourceNode>();
+  let index=0,stopped=false;
+  while(index<notes.length&&notes[index].end+.2<=offset)index++;
+  const tick=()=>{
+   if(stopped)return;
+   const now=ctx.currentTime,position=now-origin;
+   while(index<notes.length&&notes[index].start<position+1){
+    const note=notes[index++],sample=samples.get(note.pitch)!;
+    const elapsed=Math.max(0,position-note.start),rate=2**(note.cents/1200);
+    if(note.end+.2<=position||elapsed*rate>=sample.duration)continue;
+    const source=ctx.createBufferSource(),envelope=ctx.createGain();
+    source.buffer=sample;source.playbackRate.value=rate;
+    const when=Math.max(now,origin+note.start),end=origin+note.end;
+    envelope.gain.setValueAtTime(note.volume*Math.min(1,Math.max(0,(end+.2-when)/.2)),when);
+    if(end>when)envelope.gain.setValueAtTime(note.volume,end);
+    envelope.gain.linearRampToValueAtTime(0,Math.max(when+.001,end+.2));
+    source.connect(envelope);envelope.connect(destination);active.add(source);
+    source.onended=()=>{active.delete(source);source.disconnect();envelope.disconnect();};
+    source.start(when,elapsed*rate);source.stop(Math.max(when+.001,end+.2));
+   }
+   if(position>=duration){stop();onEnd();}
+  };
+  const timer=setInterval(tick,100);
+  function stop(){stopped=true;clearInterval(timer);for(const source of active){source.stop();}active.clear();}
+  tick();return {stop};
+ }};
+}

lib/types.ts

@@ -1,6 +1,8 @@
 export type Download = {name:string;url:string};
 export type Source = {title:string;artist?:string;thumbnail?:string;url?:string;audioUrl?:string};
-export type ScoreResult = {abc:string;status:string;downloads:Download[];pdf?:string;audio?:string};
+/** Where each score bar starts: `bars` in quarter notes, `clock` in seconds of the recording. */
+export type ScoreTiming = {bpm:number;bars:number[];clock:number[]};
+export type ScoreResult = {abc:string;status:string;downloads:Download[];pdf?:string;audio?:string;timing?:ScoreTiming};
 export type SongResult = {status:string;audio?:Download;artifacts?:Download;abc:string;seed?:number};
 /** What the engine measured in a take: the grid and chords a band was written to. */
 export type Analysis = {tempo:number;key:string;duration?:number;offset?:number;beats?:number[];chords:{time:number;name:string}[];separated?:boolean;