Replace diagnostic panels with an interactive MIDI piano roll

README.md

@@ -14,10 +14,16 @@ models:
 
 # Speaking MIDI
 
-An interactive demonstration of **fixed-timbre inverse synthesis**: approximate speech or other audio using only Grand Piano MIDI notes. Upload/record audio, or generate a voice from text with Qwen3-TTS, then compare the source, a spectral-peak baseline, and optimized piano playback. Download the actual MIDI and inspect aligned spectrograms and a velocity-colored piano roll.
+An interactive demonstration of **fixed-timbre inverse synthesis**: approximate speech or other audio using only Grand Piano MIDI notes. Upload/record audio, or generate a voice from text with Qwen3-TTS, then listen to the source and play the resulting MIDI in an interactive piano roll. Download the actual MIDI from the same result.
 
 English and Chinese examples are available instantly through the two example buttons. They contain about eight seconds of speech each and use the full refinement algorithm. New jobs default to a smaller search budget for responsive CPU experimentation. The technique approximates spectral structure; it does not guarantee intelligible words or perform conventional melody transcription.
 
+## MIDI player
+
+The demo centers on a piano roll inspired by the interaction design of `klstudio/app/views/midi-player.vue`: horizontal note blocks, active-note highlighting, a playback cursor, click-to-seek, and automatic scrolling at higher zoom. Controls provide play/pause, restart, a seek slider, playback speed, and zoom; left/right arrows on the roll seek by one second. Loading another result stops the previous playback.
+
+The displayed notes are decoded directly from the exported MIDI. Playback uses the corresponding FluidSynth Grand Piano render, with the audio clock driving the cursor and highlights; it does not substitute a different browser synthesizer. The render includes release tails, while note blocks show MIDI key-hold durations. The browser receives a self-contained audio-and-note payload and needs no external JavaScript or sound library. Spectrogram, static roll, baseline player, and metric panels have been removed from the demo interface; research diagnostics remain in the generated files.
+
 ## Poetry voice examples
 
 Five ready-made Qwen VoiceDesign recordings cover Chinese and English public-domain poetry: Li Bai’s **Quiet Night Thoughts**, Meng Haoran’s **Spring Dawn**, Wang Zhihuan’s **On the Stork Tower**, the opening couplet of Shakespeare’s **Sonnet 18**, and the first stanza of Blake’s **The Tyger**. Select an example to load and listen to its recording, then press **Generate piano MIDI**. Selection switches to audio mode and sets the fitting window to 12 seconds. These are speech inputs; their MIDI is generated on demand. Text, authorship, durations, and generation provenance are available in [the poetry examples](examples/poetry/README.md).
@@ -51,7 +57,7 @@ $$
 
 Here $F$ is band-magnitude analysis, $y$ is the normalized target, $M$ is MIDI, and $S$ is the fixed piano renderer. The quick setting runs dictionary search and global velocity refinement; it skips the per-note sweep. The baseline rounds strong spectral peaks to piano pitches and separately calibrates global velocity.
 
-All four spectrogram panels use the same color scale. Metrics compare the input-length interval; audio includes a 0.5-second release tail. Log-band MAE is the optimization target, while spectral convergence is reported separately and need not improve. Neither metric measures speech intelligibility. Magnitude addition is only an approximation because real notes interact in phase, which motivates the renderer refinement step.
+Saved diagnostic spectrograms use the same color scale for all four panels. Recorded metrics compare the input-length interval; audio includes a 0.5-second release tail. Log-band MAE is the optimization target, while spectral convergence is reported separately and need not improve. Neither metric measures speech intelligibility. Magnitude addition is only an approximation because real notes interact in phase, which motivates the renderer refinement step.
 
 The fitting core is vendored from [Speaking MIDI](https://github.com/k-l-lambda/speaking-midi/tree/932f8eb), with a portable SoundFont path and an optional quick-refinement flag. See that project for full experiments, derivations, and reproducible demo provenance.
 

VALIDATION.md

@@ -20,3 +20,7 @@ Actual hosted API checks passed on 2026-10-01:
 - Text → speech → MIDI: `Hello, piano.`, English, the requested female voice description, followed by fitting a 0.5-second prefix with 20 search iterations; completed in 8.6 seconds. Speech used the decorated ZeroGPU function; MIDI fitting used CPU.
 
 These timings are the app's reported job durations, excluding client upload/download and queue transit. They validate short jobs, not the maximum 12-second/full-refinement configuration. The hosted PyTorch configuration error is resolved. No subscription or dedicated paid hardware was requested.
+
+## Interactive MIDI player (2026-10-02)
+
+The demo now shows source audio and an interactive piano roll instead of diagnostic tabs. Seven backend tests passed, including real CPU fitting and the ZeroGPU dispatch test. Browser checks passed for playback and pause, click and keyboard seeking, zoom and scrolling, replacing a playing example, removal of diagnostic tabs, and mobile layout. No JavaScript errors were observed in those checks. The player decodes note events from the downloaded MIDI and synchronizes them to that MIDI's Grand Piano audio render.

app.py

@@ -13,6 +13,7 @@ os.environ.setdefault('MPLBACKEND', 'Agg')
 import gradio as gr
 import numpy as np
 import soundfile as sf
+from player import player_component, player_payload
 
 ROOT = Path(__file__).resolve().parent
 VOICE = '一位温柔自信的年轻女性，声音清晰，语气亲切，表达轻快而富有感染力。'
@@ -66,27 +67,9 @@ def prepare_audio(path, out, seconds):
     return len(audio) / rate
 
 
-def piano_roll(directory):
-    import matplotlib.pyplot as plt
-    from matplotlib.patches import Rectangle
-    notes = json.loads((directory / 'refined.json').read_text())
-    fig, ax = plt.subplots(figsize=(11, 3))
-    for note in notes:
-        ax.add_patch(Rectangle((note['start'], note['pitch']-.4), note['duration'], .8,
-                              color=plt.cm.viridis(note['velocity']/127)))
-    duration = sf.info(directory / 'target.wav').duration
-    ax.set(xlim=(0, duration), ylim=(35,109), xlabel='Seconds', ylabel='MIDI pitch',
-           title=f'{len(notes)} piano notes · color indicates velocity')
-    ax.grid(alpha=.15); fig.tight_layout()
-    path = directory / 'piano-roll.png'; fig.savefig(path, dpi=130); plt.close(fig)
-    return str(path)
-
-
 def result(directory, status):
-    metrics = json.loads((directory / 'metrics.json').read_text())
-    return (status, str(directory/'target.wav'), str(directory/'baseline.wav'),
-            str(directory/'refined.wav'), str(directory/'spectrogram.png'),
-            (str(directory/'piano-roll.png') if (directory/'piano-roll.png').exists() else piano_roll(directory)), str(directory/'refined.mid'), metrics['results'])
+    return (status, str(directory/'target.wav'), player_payload(directory),
+            str(directory/'refined.mid'))
 
 
 def run(mode, audio, text, language, description, seconds, budget, refine, progress=gr.Progress()):
@@ -98,7 +81,7 @@ def run(mode, audio, text, language, description, seconds, budget, refine, progr
         if old.is_dir() and time.time() - old.stat().st_mtime > 86400:
             shutil.rmtree(old)
     directory = Path(tempfile.mkdtemp(prefix='job-', dir=RUNS))
-    empty = (None,) * 7
+    empty = (None, '', None)
     started = time.monotonic()
     if mode == 'Text → speech → MIDI':
         if not text.strip() or len(text) > 300 or not description.strip() or len(description) > 600:
@@ -119,14 +102,14 @@ def run(mode, audio, text, language, description, seconds, budget, refine, progr
         audio = str(directory/'speech.wav')
     duration = prepare_audio(audio, directory/'input.wav', seconds)
     yield (f'2/4 · Analyzing the first {duration:.2f} s and building piano templates.',
-           str(directory/'input.wav'), None, None, None, None, None, None)
+           str(directory/'input.wav'), '', None)
     progress(.3, desc='Fitting piano note templates; then checking the real synthesizer')
     command = ['-m', 'speaking_midi', str(directory/'input.wav'), '--out', str(directory),
                '--soundfont', str(ROOT/'assets/gm.sf3'), '--max-notes', str(int(budget))]
     if not refine:
         command.append('--skip-local-refinement')
     worker(command, directory/'fit.log')
-    progress(.95, desc='Drawing spectrograms and MIDI piano roll')
+    progress(.95, desc='Preparing the MIDI player')
     yield result(directory, f'4/4 · Complete in {time.monotonic()-started:.1f} s on {DEVICE}. '
                  + ('Full renderer refinement.' if refine else 'Quick fit with global velocity refinement.'))
 
@@ -137,7 +120,7 @@ def example(language):
 
 def build_ui():
     with gr.Blocks(title='Speaking MIDI') as demo:
-        gr.Markdown('# Speaking MIDI\nTurn a voice into piano notes. Compare the sound, inspect the spectrum, and download the MIDI.\n'
+        gr.Markdown('# Speaking MIDI\nTurn a voice into piano notes. Listen to your voice on piano, follow the notes, and download the MIDI.\n'
                     'This is experimental sound approximation: words may become difficult to understand.')
         with gr.Row():
             english = gr.Button('Listen to English example')
@@ -160,8 +143,7 @@ def build_ui():
             with gr.Column(scale=2):
                 status = gr.Markdown('Choose an example or create a new fit.')
                 source = gr.Audio(label='1 · Source used for fitting', interactive=False)
-                baseline = gr.Audio(label='2 · Simple spectral-peak baseline', interactive=False)
-                piano = gr.Audio(label='3 · Optimized piano MIDI rendered with Grand Piano', interactive=False)
+                player = player_component(gr)
                 midi = gr.File(label='Download MIDI', interactive=False)
         poetry = json.loads((ROOT/'examples/poetry/prompts.json').read_text())
         gr.Examples(
@@ -173,18 +155,11 @@ def build_ui():
         )
         selected_text = gr.Textbox(label='Selected text', interactive=False, lines=2)
         text.change(lambda value: value, text, selected_text, queue=False)
-        with gr.Tabs():
-            with gr.Tab('Spectrogram comparison'):
-                spectrum = gr.Image(label='Shared scale · source / baseline / dictionary / optimized', interactive=False)
-            with gr.Tab('MIDI piano roll'):
-                roll = gr.Image(label='Note timing, pitch and velocity', interactive=False)
-            with gr.Tab('Measurements'):
-                measurements = gr.JSON(label='Lower log-band MAE is better; this does not measure intelligibility')
         gr.Markdown('**How it works:** synthesize 657 piano templates → match weighted spectral bands → '
                     'choose discrete notes → re-render MIDI → reduce measured spectral error. '
                     '[Algorithm and experiments](https://github.com/k-l-lambda/speaking-midi) · '
                     '[Qwen3-TTS](https://huggingface.co/Qwen/Qwen3-TTS-12Hz-1.7B-VoiceDesign)')
-        outputs = [status, source, baseline, piano, spectrum, roll, midi, measurements]
+        outputs = [status, source, player, midi]
         mode.change(lambda value: (gr.update(visible=value=='Audio → MIDI'), gr.update(visible=value!='Audio → MIDI')),
                     mode, [audio, speech_controls], queue=False)
         submit.click(run, [mode,audio,text,language,description,seconds,budget,refine], outputs,

deploy.py

@@ -8,7 +8,7 @@ if __name__ == '__main__':
     api.create_repo(repo, repo_type='space', space_sdk='gradio', space_hardware='zero-a10g', exist_ok=True)
     api.add_space_variable(repo, 'INFERENCE_DEVICE', 'zerogpu')
     commit = api.upload_folder(repo_id=repo, repo_type='space', folder_path=Path(__file__).parent,
-        allow_patterns=['app.py', 'zero_tts.py', 'deploy.py', 'README.md', 'VALIDATION.md', 'requirements.txt', 'packages.txt',
+        allow_patterns=['app.py', 'player.py', 'ui/*', 'zero_tts.py', 'deploy.py', 'README.md', 'VALIDATION.md', 'requirements.txt', 'packages.txt',
                         '.gitignore', 'speaking_midi/*.py', 'scripts/*.py', 'tests/*.py',
                         'assets/*', 'examples/**'],
         commit_message='Build CPU-capable Speaking MIDI audio and VoiceDesign demo')

player.py

@@ -0,0 +1,33 @@
+"""Build a browser player payload from the exported MIDI and its exact piano render."""
+import base64
+import json
+from pathlib import Path
+import mido
+import soundfile as sf
+
+UI = Path(__file__).parent / 'ui'
+
+
+def player_payload(directory):
+    directory = Path(directory)
+    clock = 0.0
+    active = {}
+    notes = []
+    for message in mido.MidiFile(directory / 'refined.mid'):
+        clock += message.time
+        if message.type == 'note_on' and message.velocity:
+            active[(message.channel, message.note)] = (clock, message.velocity)
+        elif message.type == 'note_off' or (message.type == 'note_on' and not message.velocity):
+            start, velocity = active.pop((message.channel, message.note))
+            notes.append(dict(pitch=message.note, start=start, duration=clock-start, velocity=velocity))
+    if active:
+        raise ValueError('MIDI contains unterminated notes')
+    wav = directory / 'refined.wav'
+    return json.dumps(dict(notes=notes, duration=sf.info(wav).duration,
+                           audio='data:audio/wav;base64,' + base64.b64encode(wav.read_bytes()).decode()))
+
+
+def player_component(gr):
+    return gr.HTML(value='', html_template=(UI/'player.html').read_text(),
+                   css_template=(UI/'player.css').read_text(),
+                   js_on_load=(UI/'player.js').read_text(), elem_id='midi-player')

tests/test_app.py

@@ -20,8 +20,9 @@ class AppTests(unittest.TestCase):
         events=list(run('Audio → MIDI','examples/en/source.wav','','English','',.5,20,False))
         self.assertEqual(len(events),2)
         self.assertIn('Complete',events[-1][0])
-        for path in events[-1][1:7]: self.assertTrue(Path(path).exists())
-        report=json.loads((Path(events[-1][6]).parent/'metrics.json').read_text())
+        for path in (events[-1][1], events[-1][3]): self.assertTrue(Path(path).exists())
+        self.assertGreater(len(json.loads(events[-1][2])['notes']), 0)
+        report=json.loads((Path(events[-1][3]).parent/'metrics.json').read_text())
         self.assertEqual(report['pursuit']['device'],'cpu')
         self.assertGreater(report['results']['refined']['notes'],0)
     def test_zerogpu_speech_dispatch_keeps_fitting_on_cpu(self):
@@ -31,7 +32,7 @@ class AppTests(unittest.TestCase):
             events = list(run('Text → speech → MIDI', None, 'Hello.', 'English',
                               app.VOICE, .5, 20, False))
         generate.assert_called_once_with('Hello.', 'English', app.VOICE)
-        output = Path(events[-1][6]).parent
+        output = Path(events[-1][3]).parent
         self.assertTrue((output/'speech.wav').exists())
         self.assertFalse((output/'tts.log').exists())
         report = json.loads((output/'metrics.json').read_text())
@@ -40,6 +41,7 @@ class AppTests(unittest.TestCase):
     def test_cached_examples(self):
         for language in ['en','zh']:
             output=example(language)
-            for path in output[1:7]: self.assertTrue(Path(path).exists())
+            for path in (output[1], output[3]): self.assertTrue(Path(path).exists())
+            self.assertTrue(json.loads(output[2])['audio'].startswith('data:audio/wav;base64,'))
 
 if __name__=='__main__': unittest.main()

ui/player.css

@@ -0,0 +1,4 @@
+.player{font:14px system-ui,sans-serif;color:#dce7f7;background:#101b2d;border:1px solid #253651;border-radius:14px;overflow:hidden;min-width:0}
+.player header{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 18px 10px}.player strong{font-size:17px}.subtitle{color:#91a5c2;margin-left:12px;font-size:12px}.note-count{color:#91a5c2;font-size:12px}
+.transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 18px}.player button,.player select{border:1px solid #3b506c;border-radius:7px;background:#24364f;color:#eef5ff;padding:7px 11px;cursor:pointer;font:inherit}.player button:disabled{opacity:.4;cursor:default}.player .play{background:#6ce2b6;color:#102d28;border-color:transparent;min-width:82px;font-weight:650}.clock{font-variant-numeric:tabular-nums;font-size:12px;min-width:90px}.speed-label{margin-left:auto;font-size:12px;color:#b3c5dd}.player select{padding:5px;font-size:12px}.seek{display:block;width:calc(100% - 36px);margin:10px 18px;accent-color:#6ce2b6}.roll-wrap{position:relative;height:300px}.roll{display:block;width:100%;height:300px;touch-action:pan-y;cursor:crosshair}.empty{position:absolute;top:42%;left:60px;right:12px;text-align:center;color:#a5b7ce;pointer-events:none}.player footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;color:#91a5c2;font-size:11px}.player footer label{display:flex;align-items:center;gap:8px}.zoom{width:85px;accent-color:#6ce2b6}.error{margin:0;padding:0 18px 10px;color:#ffb3a9;font-size:12px}.error:empty{display:none}.player :focus-visible{outline:2px solid #84bfff;outline-offset:2px}@media(max-width:480px){.player header,.transport{padding-left:10px;padding-right:10px}.subtitle{display:block;margin:3px 0 0}.player footer{flex-wrap:wrap}.transport{gap:7px}.speed-label{margin-left:0}}
+.player strong{color:#e7f0ff!important}.player .clock{color:#dce7f7!important}.player footer span,.player footer label{color:#a9bed8!important}.player .empty{color:#a5b7ce!important}

ui/player.html

@@ -0,0 +1,13 @@
+<section class="player" aria-label="MIDI piano roll player">
+  <header><div><strong>MIDI piano roll</strong><span class="subtitle">Grand Piano</span></div><span class="note-count">No MIDI loaded</span></header>
+  <div class="transport">
+    <button class="play" disabled aria-label="Play piano MIDI">▶ Play</button>
+    <button class="restart" disabled aria-label="Restart playback">↺</button>
+    <output class="clock" aria-label="Playback time">0:00 / 0:00</output>
+    <label class="speed-label">Speed <select class="speed" aria-label="Playback speed"><option value="0.5">0.5×</option><option value="0.75">0.75×</option><option value="1" selected>1×</option><option value="1.25">1.25×</option><option value="1.5">1.5×</option></select></label>
+  </div>
+  <input class="seek" type="range" min="0" max="1" value="0" step="0.01" disabled aria-label="Playback position">
+  <div class="roll-wrap"><canvas class="roll" tabindex="0" role="img" aria-label="MIDI notes by time and pitch. Click to seek; use left and right arrows to move one second."></canvas><p class="empty">Choose an example or generate piano MIDI to play.</p></div>
+  <footer><span>Click the roll to seek · lit notes are playing</span><label>Zoom <input class="zoom" type="range" min="1" max="4" step="0.25" value="1" aria-label="Piano roll zoom"></label></footer>
+  <p class="error" role="status"></p>
+</section>

ui/player.js

@@ -0,0 +1,105 @@
+// 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();