Implement lookahead scheduling for playhead

main.js

@@ -258,11 +258,15 @@ const Switch = ({ label, value, onChange, options, darkMode }) => {
   );
 };
 
-const SequencerStep = ({ index, pitch, velocity, onChange, isActive, darkMode }) => {
+const SequencerStep = ({ index, pitch, velocity, onChange, isActive, darkMode, ledRef }) => {
   return (
     <div className={`flex flex-col items-center flex-1 min-w-0 border-r ${darkMode ? 'border-gray-700' : 'border-gray-300'} last:border-0 relative pb-1`}>
       <div className="mb-1 mt-1">
-        <div className={`w-1.5 h-1.5 md:w-2.5 md:h-2.5 rounded-full transition-colors duration-75 ${isActive ? 'led-active' : 'led-inactive'}`}></div>
+        <div
+          ref={ledRef}
+          data-step={index}
+          className={`w-1.5 h-1.5 md:w-2.5 md:h-2.5 rounded-full transition-colors duration-75 ${isActive ? 'led-active' : 'led-inactive'}`}
+        ></div>
       </div>
       <div className="flex flex-col gap-0.5">
         <Knob value={pitch} onChange={(v) => onChange(index, 'pitch', v)} size="sm" label="" darkMode={darkMode} />
@@ -319,11 +323,30 @@ const App = () => {
   const [darkMode, setDarkMode] = useState(false);
   const [currentPresetName, setCurrentPresetName] = useState(window.PRESETS[0].name);
   const fileInputRef = useRef(null);
+  const ledRefs = useRef([]);
+  const scheduledSteps = useRef([]);
+  const rafId = useRef(null);
+  const lastLedIndex = useRef(null);
+  const perfOffsetMs = useRef(null);
 
   const initialParams = { ...window.PRESETS[0].params, delayRate: clampDelay(window.PRESETS[0].params.delayRate ?? window.DEFAULT_PARAMS.delayRate) };
   const [params, setParams] = useState(initialParams);
   const [steps, setSteps] = useState(window.PRESETS[0].steps);
 
+  const setLedState = (index) => {
+    if (!ledRefs.current.length) return;
+    if (lastLedIndex.current !== null && ledRefs.current[lastLedIndex.current]) {
+      ledRefs.current[lastLedIndex.current].classList.remove('led-active');
+      ledRefs.current[lastLedIndex.current].classList.add('led-inactive');
+    }
+    const target = ledRefs.current[index];
+    if (target) {
+      target.classList.add('led-active');
+      target.classList.remove('led-inactive');
+    }
+    lastLedIndex.current = index;
+  };
+
   // Merge with defaults when loading
   const applyPatch = (patch) => {
     const p = patch;
@@ -378,7 +401,25 @@ const App = () => {
     try {
       const node = await window.createJroomzWorkletNode(ctx);
       node.connect(ctx.destination);
-      node.port.onmessage = (e) => { if (e.data.type === 'STEP_CHANGE') setCurrentStep(e.data.step); };
+      node.port.onmessage = (e) => {
+        if (e.data.type === 'STEP_CHANGE') {
+          const ts = ctx.getOutputTimestamp?.();
+          const nowCtx = ts && Number.isFinite(ts.contextTime) ? ts.contextTime : ctx.currentTime;
+          const offsetMs = ts && Number.isFinite(ts.performanceTime) && Number.isFinite(ts.contextTime)
+            ? ts.performanceTime - (ts.contextTime * 1000)
+            : null;
+          if (offsetMs !== null) perfOffsetMs.current = offsetMs;
+
+          const targetCtxTime = Number.isFinite(e.data.time) ? e.data.time : nowCtx;
+          const targetPerfTime = perfOffsetMs.current !== null ? (targetCtxTime * 1000) + perfOffsetMs.current : null;
+
+          scheduledSteps.current.push({ step: e.data.step, ctxTime: targetCtxTime, perfTime: targetPerfTime });
+          scheduledSteps.current.sort((a, b) => {
+            if (a.perfTime !== null && b.perfTime !== null) return a.perfTime - b.perfTime;
+            return a.ctxTime - b.ctxTime;
+          });
+        }
+      };
 
       setAudioCtx(ctx);
       setWorkletNode(node);
@@ -393,6 +434,35 @@ const App = () => {
     }
   };
 
+  useEffect(() => {
+    if (!audioCtx) return;
+    const tick = () => {
+      const ts = audioCtx.getOutputTimestamp ? audioCtx.getOutputTimestamp() : null;
+      const nowCtx = ts && Number.isFinite(ts.contextTime) ? ts.contextTime : audioCtx.currentTime;
+      const nowPerf = ts && Number.isFinite(ts.performanceTime) ? ts.performanceTime : null;
+      if (ts && Number.isFinite(ts.performanceTime) && Number.isFinite(ts.contextTime)) {
+        perfOffsetMs.current = ts.performanceTime - (ts.contextTime * 1000);
+      }
+
+      while (scheduledSteps.current.length) {
+        const evt = scheduledSteps.current.shift();
+        const due = (nowPerf !== null && evt.perfTime !== null)
+          ? evt.perfTime <= nowPerf
+          : evt.ctxTime <= nowCtx;
+        if (!due) {
+          scheduledSteps.current.unshift(evt);
+          break;
+        }
+        setLedState(evt.step);
+        setCurrentStep(evt.step);
+      }
+      rafId.current = requestAnimationFrame(tick);
+    };
+
+    rafId.current = requestAnimationFrame(tick);
+    return () => { if (rafId.current) cancelAnimationFrame(rafId.current); };
+  }, [audioCtx]);
+
   const updateParam = (id, value) => {
     const newValue = id === 'delayRate' ? clampDelay(value) : value;
     setParams(prev => ({ ...prev, [id]: newValue }));
@@ -486,6 +556,7 @@ const App = () => {
     if (!params.run) {
       const nextStep = (currentStep + 1) % 8;
       setCurrentStep(nextStep);
+      setLedState(nextStep);
       if (workletNode) workletNode.port.postMessage({ type: 'SET_STEP', payload: { step: nextStep } });
     }
   };
@@ -569,6 +640,7 @@ const App = () => {
                       onChange={updateStep}
                       isActive={currentStep === i}
                       darkMode={darkMode}
+                      ledRef={(el) => { ledRefs.current[i] = el; if (el && lastLedIndex.current === null && currentStep === i) setLedState(i); }}
                     />
                   ))}
                 </div>

synth-engine.js

@@ -388,6 +388,7 @@
 
           let stepChanged = false;
           let newStepIndex = -1;
+          let stepSampleIndex = -1;
 
           for (let i = 0; i < channelL.length; i++) {
               let trigger = false;
@@ -396,7 +397,7 @@
                   if (this.sequencer.clockPhase >= 1.0) {
                       this.sequencer.clockPhase -= 1.0;
                       this.sequencer.currentStep = (this.sequencer.currentStep + 1) % 8;
-                      trigger = true; stepChanged = true; newStepIndex = this.sequencer.currentStep;
+                      trigger = true; stepChanged = true; newStepIndex = this.sequencer.currentStep; stepSampleIndex = i;
                   }
               }
 
@@ -483,7 +484,10 @@
               channelR[i] = Math.tanh(finalR * boost);
           }
 
-          if (stepChanged) { this.port.postMessage({ type: 'STEP_CHANGE', step: newStepIndex }); }
+          if (stepChanged) {
+              const eventTime = currentTime + (stepSampleIndex >= 0 ? (stepSampleIndex / this.fs) : 0);
+              this.port.postMessage({ type: 'STEP_CHANGE', step: newStepIndex, time: eventTime });
+          }
           return true;
       }
   }