From 0bec13ababa7bba4c9adb8e702d8b744c8438f9c Mon Sep 17 00:00:00 2001 From: Me Here Date: Thu, 4 Jun 2026 14:11:24 -0500 Subject: [PATCH] midi-out: 24-PPQN clock + Start/Stop; shared src/midiout.js; mirror into editor.html - Extract MIDI-out into a shared partial src/midiout.js (one copy, no drift); both editors @BUILD:include it. The page wires three transport hooks: midiOutStart(t0) in start(), midiOutStop() in stop(), midiOutClock(ahead) at end of scheduler(); engine.js calls onMeterHit() per hit. - Clock-out: a "clock" checkbox (default on) appears with the port picker. When on: MIDI Start (0xFA) at the downbeat, 24-PPQN clock (0xF8) scheduled across the audio look-ahead window (timestamped, tracks tempo/ramp, stays tight), Stop (0xFC) on stop. Guarded against starve-looping at extreme tempos. - Mirror the feature into editor.html (PM_E-1): header .devctrl pills, the include, _wireMidi port refresh, transport hooks, listener, and the _isDevicePort fix (recognizes PM_G-1 Grid etc.). Conformance suite still green. Co-Authored-By: Claude Opus 4.8 (1M context) --- editor.html | 28 ++++++++++++++++--- pm_e-2.html | 51 +++++------------------------------ src/midiout.js | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 103 insertions(+), 49 deletions(-) create mode 100644 src/midiout.js diff --git a/editor.html b/editor.html index c596e6c..30bcb13 100644 --- a/editor.html +++ b/editor.html @@ -257,6 +257,11 @@ .menu button { text-align:left; } /* embed mode: drop the header + legend, keep the editor */ [data-embed] .appheader, [data-embed] .kbd-legend { display:none !important; } + /* device-link badge + MIDI-out controls in the header — matching pills (state via colour in JS) */ + .devctrl{ font:inherit; font-size:12px; line-height:1.5; padding:3px 10px; border-radius:7px; + border:1px solid var(--edge); background:transparent; color:var(--muted); + white-space:nowrap; cursor:pointer; } + .devctrl:hover{ border-color:var(--muted); } @@ -272,7 +277,13 @@

PM_E‑1 PolyMeter Editor

- ◎ connect device + ◎ connect device + + +
@@ -543,6 +554,7 @@ function scheduler() { } // Boundary reached → swap to the new segment seamlessly (scheduler keeps running). if (pendingSwitch && masterBeatTime >= pendingSwitch.atTime - 1e-9) performCutover(pendingSwitch); + midiOutClock(ahead); // schedule 24-PPQN MIDI clock ticks across the same look-ahead window } /* ========================================================================= @@ -555,10 +567,12 @@ function start() { const t0 = audioCtx.currentTime + 0.08; for (const m of meters) { m.tick = 0; m.nextTime = t0; m.vq = []; m.vqPtr = 0; m.currentStep = -1; m.currentBar = 0; } masterBeat = 0; masterBeatTime = t0; muteWindows = []; + midiOutStart(t0); // MIDI clock Start (if MIDI out + clock on) schedulerTimer = setInterval(scheduler, LOOKAHEAD_MS); scheduler(); syncStartBtn(); } function stop() { + midiOutStop(); // MIDI clock Stop (if MIDI out + clock on) state.running = false; clearInterval(schedulerTimer); schedulerTimer = null; pendingSwitch = null; segBarCount = 0; // drop any armed switch so it can't fire on next start @@ -1217,10 +1231,14 @@ async function loadFromDevice() { let _midiAccess = null, _midiOn = false, _midiFlash = 0, _midiBeat = 0, _saveCb = null, _verCb = null; function _midiInputs() { return _midiAccess ? [..._midiAccess.inputs.values()] : []; } function _midiOutputs() { return _midiAccess ? [..._midiAccess.outputs.values()] : []; } -function _isDevicePort(p) { // recognise PM_K-1 (Pico) and PM_X-1 (Pimoroni Explorer RP2350) USB-MIDI ports; +function _isDevicePort(p) { // recognise the PM devices' USB-MIDI ports by name; const n = (p.name || "").toLowerCase(); // anything unrecognised triggers a broadcast to all outputs - bad for ACK routing. return n.includes("pico") || n.includes("circuitpython") || n.includes("usb_midi") || - n.includes("pimoroni") || n.includes("explorer") || n.includes("rp2350") || n.includes("varasys"); + n.includes("pimoroni") || n.includes("explorer") || n.includes("rp2350") || n.includes("varasys") || + // native Rust firmware enumerates as e.g. "PM_G-1 Grid" / "PM_K-1" / "PM_X-1" (VARASYS / PolyMeter) + n.includes("pm_g") || n.includes("pm_k") || n.includes("pm_x") || + n.includes("pm-g") || n.includes("pm-k") || n.includes("pm-x") || + n.includes("grid") || n.includes("polymeter"); } function _send(bytes) { // send only to the PM_K-1 (not loopback ports like "Midi Through", which just echo) const outs = _midiOutputs(), dev = outs.filter(_isDevicePort); @@ -1236,7 +1254,7 @@ async function _ensureMidi() { // MIDI access WITH SysEx (needed to send/ _midiAccess.onstatechange = _wireMidi; _wireMidi(); return true; } -function _wireMidi() { for (const inp of _midiInputs()) inp.onmidimessage = onDeviceMidi; updateMidiBtn(); updateDevBadge(); } +function _wireMidi() { for (const inp of _midiInputs()) inp.onmidimessage = onDeviceMidi; updateMidiBtn(); updateDevBadge(); populateMidiOutPorts(); } function updateDevBadge() { // header badge: lights green while a PM_K-1 / PM_X-1 is connected over USB-MIDI const el = $("devBadge"); if (!el) return; const dev = _midiAccess ? [..._midiOutputs(), ..._midiInputs()].filter(_isDevicePort) : []; @@ -1281,6 +1299,7 @@ async function toggleDeviceAudio() { ? "Device audio ON.\nMIDI input(s): " + names.join(", ") + "\nPress play on the device — the button pulses green per note." : "Armed, but no MIDI input yet. Plug in the PM_K-1 (CircuitPython firmware) — it connects automatically."); } +/*@BUILD:include:src/midiout.js@*/ function _queryDeviceVersion() { // ask the device its firmware version (SysEx 0x02 -> reply 0x03) return new Promise((res) => { _verCb = res; _send([0xF0, 0x7D, 0x02, 0xF7]); setTimeout(() => { if (_verCb) { _verCb = null; res(null); } }, 1500); }); } @@ -1630,6 +1649,7 @@ $("saveDeviceBtn").addEventListener("click", () => { $("trayMenu").hidden = true $("loadDeviceBtn").addEventListener("click", () => { $("trayMenu").hidden = true; loadFromDevice(); }); $("updateFwBtn").addEventListener("click", () => { $("trayMenu").hidden = true; updateFirmware(); }); $("midiBtn").addEventListener("click", toggleDeviceAudio); +$("midiOutBtn").addEventListener("click", toggleMidiOut); $("devBadge").addEventListener("click", () => { _ensureMidi().then(updateDevBadge); }); $("clearLogBtn").addEventListener("click", () => { $("trayMenu").hidden = true; clearLog(); }); $("resetAllBtn").addEventListener("click", () => { $("trayMenu").hidden = true; resetAll(); }); diff --git a/pm_e-2.html b/pm_e-2.html index d1b99cc..5adb9f4 100644 --- a/pm_e-2.html +++ b/pm_e-2.html @@ -301,6 +301,8 @@ + @@ -587,6 +589,7 @@ function scheduler() { } // Boundary reached → swap to the new segment seamlessly (scheduler keeps running). if (pendingSwitch && masterBeatTime >= pendingSwitch.atTime - 1e-9) performCutover(pendingSwitch); + midiOutClock(ahead); // schedule 24-PPQN MIDI clock ticks across the same look-ahead window } /* ========================================================================= @@ -599,10 +602,12 @@ function start() { const t0 = audioCtx.currentTime + 0.08; for (const m of meters) { m.tick = 0; m.nextTime = t0; m.vq = []; m.vqPtr = 0; m.currentStep = -1; m.currentBar = 0; } masterBeat = 0; masterBeatTime = t0; muteWindows = []; + midiOutStart(t0); // MIDI clock Start (if MIDI out + clock on) schedulerTimer = setInterval(scheduler, LOOKAHEAD_MS); scheduler(); syncStartBtn(); } function stop() { + midiOutStop(); // MIDI clock Stop (if MIDI out + clock on) state.running = false; clearInterval(schedulerTimer); schedulerTimer = null; pendingSwitch = null; segBarCount = 0; // drop any armed switch so it can't fire on next start @@ -1294,51 +1299,7 @@ async function toggleDeviceAudio() { ? "Device audio ON.\nMIDI input(s): " + names.join(", ") + "\nPress play on the device — the button pulses green per note." : "Armed, but no MIDI input yet. Plug in the PM_K-1 (CircuitPython firmware) — it connects automatically."); } -/* MIDI OUT: send the groove as GM drum notes to a chosen output port, to drive external gear - (a drum module / e-kit). Hooks engine.js's per-hit `onMeterHit`, scheduled in sync with audio. */ -const SOUND_GM = { - kick:36, kick808:36, kick909:36, snare:38, snare808:38, snare909:38, - clap:39, clap808:39, clap909:39, rim:37, - hatClosed:42, hat808:42, hat909:42, hatOpen:46, openHat808:46, - ride:51, ride909:51, crash:49, crash909:49, - tomLow:41, tom808:45, tomMid:45, tomHigh:48, tambourine:54, - cowbell:56, cowbell808:56, woodblock:76, jamblock:76, claves:75, beep:37, -}; -let _midiOutOn = false; -function _midiOutTarget() { - const sel = $("midiOutSel"); if (!sel) return null; - return _midiOutputs().find((o) => o.id === sel.value) || null; -} -function populateMidiOutPorts() { - const sel = $("midiOutSel"); if (!sel) return; - const outs = _midiOutputs(), prev = sel.value; - sel.innerHTML = outs.length - ? outs.map((o) => ``).join("") - : ``; - if (outs.some((o) => o.id === prev)) sel.value = prev; // keep prior choice - else { const ext = outs.find((o) => !_isDevicePort(o)); sel.value = ((ext || outs[0] || {}).id) || ""; } // prefer external gear -} -// engine.js calls this per scheduled hit (sound name, audio-context time, level 1/2/3) -function onMeterHit(sound, time, lvl) { - if (!_midiOutOn) return; - const out = _midiOutTarget(); if (!out) return; - const note = SOUND_GM[sound]; if (note == null) return; - const vel = lvl === 2 ? 112 : lvl === 3 ? 45 : 90; // accent / ghost / normal - const ts = (audioCtx ? performance.now() + (time - audioCtx.currentTime) * 1000 : performance.now()); - try { out.send([0x99, note, vel], ts); out.send([0x89, note, 0], ts + 60); } catch (_) {} // note-on, then off (ch10) -} -function updateMidiOutBtn() { - const b = $("midiOutBtn"), sel = $("midiOutSel"); if (!b) return; - if (_midiOutOn) { b.style.color = "#7ab8ff"; b.style.borderColor = "#7ab8ff"; if (sel) sel.hidden = false; } - else { b.style.color = "var(--muted)"; b.style.borderColor = "var(--edge)"; if (sel) sel.hidden = true; } -} -async function toggleMidiOut() { - if (_midiOutOn) { _midiOutOn = false; updateMidiOutBtn(); return; } - if (!(await _ensureMidi())) return alert("Driving external MIDI gear needs the Web MIDI API — use Chrome, Edge, or Firefox."); - populateMidiOutPorts(); - if (!_midiOutputs().length) return alert("No MIDI output ports found. Connect your drum module / e-kit (USB-MIDI) and try again."); - _midiOutOn = true; updateMidiOutBtn(); -} +/*@BUILD:include:src/midiout.js@*/ function _queryDeviceVersion() { // ask the device its firmware version (SysEx 0x02 -> reply 0x03) return new Promise((res) => { _verCb = res; _send([0xF0, 0x7D, 0x02, 0xF7]); setTimeout(() => { if (_verCb) { _verCb = null; res(null); } }, 1500); }); } diff --git a/src/midiout.js b/src/midiout.js new file mode 100644 index 0000000..22abc6e --- /dev/null +++ b/src/midiout.js @@ -0,0 +1,73 @@ +/* MIDI OUT — send the groove as MIDI to external gear (a drum module / e-kit), in sync with + playback, plus an optional 24-PPQN MIDI clock + Start/Stop so the gear's tempo locks to the editor. + Shared by editor.html + pm_e-2.html (one copy → no drift). + + Relies on page globals: $, audioCtx, state, _midiOutputs(), _ensureMidi(), _isDevicePort(). + The page wires three transport hooks: midiOutStart(t0) in start(), midiOutStop() in stop(), + midiOutClock(aheadTime) at the end of scheduler(); engine.js calls onMeterHit() per scheduled hit. */ +const SOUND_GM = { + kick: 36, kick808: 36, kick909: 36, snare: 38, snare808: 38, snare909: 38, + clap: 39, clap808: 39, clap909: 39, rim: 37, + hatClosed: 42, hat808: 42, hat909: 42, hatOpen: 46, openHat808: 46, + ride: 51, ride909: 51, crash: 49, crash909: 49, + tomLow: 41, tom808: 45, tomMid: 45, tomHigh: 48, tambourine: 54, + cowbell: 56, cowbell808: 56, woodblock: 76, jamblock: 76, claves: 75, beep: 37, +}; +let _midiOutOn = false, _midiClkNext = 0; + +function _midiOutTarget() { + const sel = $("midiOutSel"); if (!sel) return null; + return _midiOutputs().find((o) => o.id === sel.value) || null; +} +function populateMidiOutPorts() { + const sel = $("midiOutSel"); if (!sel) return; + const outs = _midiOutputs(), prev = sel.value; + sel.innerHTML = outs.length + ? outs.map((o) => ``).join("") + : ``; + if (outs.some((o) => o.id === prev)) sel.value = prev; // keep prior choice + else { const ext = outs.find((o) => !_isDevicePort(o)); sel.value = ((ext || outs[0] || {}).id) || ""; } // prefer external gear +} +// schedule `bytes` at audio-context time `audioTime`, converted to the Web-MIDI (performance.now) clock +function _midiOutSendAt(bytes, audioTime) { + const out = _midiOutTarget(); if (!out) return; + const ts = (typeof audioCtx !== "undefined" && audioCtx) + ? performance.now() + (audioTime - audioCtx.currentTime) * 1000 : performance.now(); + try { out.send(bytes, ts); } catch (_) {} +} +// engine.js per-hit hook: GM drum Note-On (ch10) at the hit's audio time, then a Note-Off 60 ms later +function onMeterHit(sound, time, lvl) { + if (!_midiOutOn) return; + const note = SOUND_GM[sound]; if (note == null) return; + const vel = lvl === 2 ? 112 : lvl === 3 ? 45 : 90; // accent / ghost / normal + _midiOutSendAt([0x99, note, vel], time); + _midiOutSendAt([0x89, note, 0], time + 0.06); +} +function _clockOn() { const c = $("midiClkChk"); return _midiOutOn && !!c && c.checked; } +function midiOutStart(t0) { if (_clockOn()) { _midiOutSendAt([0xFA], t0); _midiClkNext = t0; } } // MIDI Start +function midiOutStop() { + if (_clockOn() && typeof audioCtx !== "undefined" && audioCtx) _midiOutSendAt([0xFC], audioCtx.currentTime); // MIDI Stop +} +// schedule 24-PPQN clock ticks up to `aheadTime` (called from the page's look-ahead scheduler) +function midiOutClock(aheadTime) { + if (!_clockOn() || !state.running || typeof audioCtx === "undefined" || !audioCtx) return; + const tickDur = (60 / state.bpm) / 24; + let guard = 0; + while (_midiClkNext < aheadTime && guard++ < 512) { _midiOutSendAt([0xF8], _midiClkNext); _midiClkNext += tickDur; } + if (_midiClkNext < aheadTime) _midiClkNext = aheadTime; // never starve-loop if tickDur is tiny +} +function updateMidiOutBtn() { + const b = $("midiOutBtn"), sel = $("midiOutSel"), clk = $("midiClkWrap"); if (!b) return; + b.style.color = _midiOutOn ? "#7ab8ff" : "var(--muted)"; + b.style.borderColor = _midiOutOn ? "#7ab8ff" : "var(--edge)"; + if (sel) sel.hidden = !_midiOutOn; + if (clk) clk.hidden = !_midiOutOn; +} +async function toggleMidiOut() { + if (_midiOutOn) { midiOutStop(); _midiOutOn = false; updateMidiOutBtn(); return; } + if (!(await _ensureMidi())) return alert("Driving external MIDI gear needs the Web MIDI API — use Chrome, Edge, or Firefox."); + populateMidiOutPorts(); + if (!_midiOutputs().length) return alert("No MIDI output ports found. Connect your drum module / e-kit (USB-MIDI) and try again."); + _midiOutOn = true; updateMidiOutBtn(); + if (state.running && typeof audioCtx !== "undefined" && audioCtx) midiOutStart(audioCtx.currentTime + 0.05); // armed mid-play → Start now +}