enhanced score player.

web/score-player.css

@@ -27,14 +27,29 @@
 .ls-status.ls-err { color: #c0392b; }
 
 .ls-svg {
-	background: #fffdf2;   /* faint warm/yellow tint behind the score */
+	background: #fff;
 	display: inline-block;
 	min-width: 100%;
+	position: relative;    /* anchor for the absolutely-positioned playback cursor */
+}
+/* faint warm/yellow tint behind the score while generating */
+.ls-svg.ls-generating-bg {
+	background: #fffdf2;
 }
 .ls-svg svg {
 	max-width: 100%;
 	height: auto;
 }
+/* Playback cursor: a vertical line tracking the currently-sounding note. */
+.ls-cursor {
+	position: absolute;
+	width: 2px;
+	background: rgba(124, 92, 255, 0.85);
+	pointer-events: none;
+	z-index: 5;
+	display: none;
+	transition: left 0.06s linear;
+}
 /* Verovio draws everything with stroke|fill="currentColor", which resolves to the
    computed `color`. We can't rely on inheritance from a container `color`: Gradio's
    `.prose * { color: var(--body-text-color) }` sets color DIRECTLY on every

web/score-player.js

@@ -46,6 +46,7 @@
 
 	const HIGHLIGHT_THROTTLE_MS = 50;
 	let lastHighlightUpdate = 0;
+	let lastAutoScroll = 0;
 
 	function log (msg) { console.log('[LilyScore]', msg); }
 
@@ -99,6 +100,8 @@
 		if (!svg) return;
 		els.svg.innerHTML = '';
 		els.svg.appendChild(document.importNode(svg, true));
+		// re-attach the playback cursor (innerHTML reset above removed it)
+		if (els.cursor) { els.cursor.style.display = 'none'; els.svg.appendChild(els.cursor); }
 	}
 
 	function setStatus (text, kind) {
@@ -275,12 +278,57 @@
 				if (!state.highlighted.has(id)) { const el = document.getElementById(id); if (el) el.classList.add('ls-hl'); }
 			});
 			state.highlighted = now;
+			// move the playback cursor to the first currently-sounding note
+			const ids = res.notes || [];
+			if (ids.length) updateCursor(ids[0]);
 		} catch (e) { /* ignore */ }
 	}
 
+	// Position the vertical cursor at a note element, spanning its system's height.
+	function updateCursor (noteId) {
+		if (!els.cursor || !els.svg) return;
+		const note = document.getElementById(noteId);
+		if (!note) { els.cursor.style.display = 'none'; return; }
+		const sysOrStaff = note.closest('.system') || note.closest('.staff');
+		const boxRect = els.svg.getBoundingClientRect();
+		const noteRect = note.getBoundingClientRect();
+		const x = noteRect.left + noteRect.width / 2 - boxRect.left;
+		let top = 0, height = boxRect.height;
+		if (sysOrStaff) {
+			const sr = sysOrStaff.getBoundingClientRect();
+			top = sr.top - boxRect.top;
+			height = sr.height;
+		}
+		els.cursor.style.left = x + 'px';
+		els.cursor.style.top = top + 'px';
+		els.cursor.style.height = height + 'px';
+		els.cursor.style.display = 'block';
+		// keep the cursor in view while playing
+		scrollCursorIntoView(noteRect, boxRect);
+	}
+
+	// Auto-scroll the preview so the cursor stays visible (throttled, gentle).
+	function scrollCursorIntoView (noteRect, boxRect) {
+		if (!els.preview) return;
+		const now = performance.now();
+		if (now - lastAutoScroll < 300) return;
+		const pr = els.preview.getBoundingClientRect();
+		const above = noteRect.top < pr.top + 60;
+		const below = noteRect.bottom > pr.bottom - 60;
+		if (!above && !below) return;
+		lastAutoScroll = now;
+		const target = els.preview.scrollTop + (noteRect.top - pr.top) - els.preview.clientHeight * 0.35;
+		els.preview.scrollTo({ top: Math.max(0, target), behavior: 'smooth' });
+	}
+
+	function hideCursor () {
+		if (els.cursor) els.cursor.style.display = 'none';
+	}
+
 	function clearHighlights () {
 		state.highlighted.forEach(function (id) { const el = document.getElementById(id); if (el) el.classList.remove('ls-hl'); });
 		state.highlighted = new Set();
+		hideCursor();
 	}
 
 	// ---- transport UI -------------------------------------------------------
@@ -323,6 +371,8 @@
 		const wrap = document.createElement('div'); wrap.className = 'ls-preview';
 		const status = document.createElement('div'); status.className = 'ls-status';
 		const svgBox = document.createElement('div'); svgBox.className = 'ls-svg';
+		const cursor = document.createElement('div'); cursor.className = 'ls-cursor';
+		svgBox.appendChild(cursor);
 		wrap.appendChild(status); wrap.appendChild(svgBox);
 
 		// transport bar
@@ -336,7 +386,7 @@
 
 		root.appendChild(wrap); root.appendChild(player);
 
-		els.root = root; els.svg = svgBox; els.preview = wrap; els.status = status; els.player = player;
+		els.root = root; els.svg = svgBox; els.preview = wrap; els.status = status; els.player = player; els.cursor = cursor;
 		els.playBtn = player.querySelector('.ls-play');
 		els.pauseBtn = player.querySelector('.ls-pause');
 		els.stopBtn = player.querySelector('.ls-stop');
@@ -352,13 +402,27 @@
 			const r = els.progress.getBoundingClientRect();
 			seekTo(state.duration * ((e.clientX - r.left) / r.width));
 		});
-		// click a note in the score -> seek there
+		// click in the score -> seek to the nearest note/rest. We don't rely on the
+		// click target (elementFromPoint often lands on the bare <svg> between
+		// noteheads, or on a staff line): instead find the .note/.chord/.rest whose
+		// on-screen box is closest to the click, then seek to its time.
 		els.svg.addEventListener('click', function (e) {
-			if (!state.toolkit || state.generating) return;
-			const t = e.target.closest && e.target.closest('.note, .chord, .rest');
-			if (!t || !t.id) return;
-			const time = state.toolkit.getTimeForElement(t.id);
-			if (typeof time === 'number') seekTo(time);
+			if (!state.toolkit || state.generating || !state.midiData) return;
+			const svg = els.svg.querySelector('svg');
+			if (!svg) return;
+			const cands = svg.querySelectorAll('.note, .chord, .rest, .mRest');
+			let best = null, bestD = Infinity;
+			for (var i = 0; i < cands.length; i++) {
+				if (!cands[i].id) continue;
+				const r = cands[i].getBoundingClientRect();
+				const dx = e.clientX - (r.left + r.width / 2);
+				const dy = e.clientY - (r.top + r.height / 2);
+				const d = dx * dx + dy * dy;
+				if (d < bestD) { bestD = d; best = cands[i]; }
+			}
+			if (!best) return;
+			const time = state.toolkit.getTimeForElement(best.id);
+			if (typeof time === 'number' && !isNaN(time) && time >= 0) seekTo(time);
 		});
 
 		initVerovio();   // warm up early
@@ -375,6 +439,8 @@
 			flag = !!flag;
 			if (flag === state.generating) return;
 			state.generating = flag;
+			// faint yellow score background only while generating
+			if (els.svg) els.svg.classList.toggle('ls-generating-bg', flag);
 			if (flag) { stop(); }
 			updatePlayerVisibility();
 		},