Muro Box N40 simulator — iframe integration demo

1Your music library

Each entry holds a pre-converted .mbp (made with node convert.mjs song.mid --title "…"). On your real page these would come from your own API, with your own auth — the simulator never contacts your servers; this page fetches the bytes and hands them across.

🛠 Dev tools

Every board panel is an independent URL flag — compose them for your context (all default ON). Toggling re-renders the frame with the new URL and re-sends the loaded song. Two ready-made contexts: ?engrave=0 = music-library song visual · ?tour=0&player=0 = pure name-plate preview widget.

ⓘ Hover any button for details. The zip is the code for your servers (MIDI in → .mbp out; the MIDI never leaves your system) — its INTEGRATION.md is the written spec for everything on this page. The copy buttons emit paste-ready snippets pre-configured with the flags toggled above.

3Live message log

Every postMessage crossing the frame boundary, as it happens:

The entire integration

// 1. wait for the frame
{ type:'muro:ready', version:1 }

// 2. fetch .mbp from YOUR api,
//    post the bytes across
frame.contentWindow.postMessage(
  { type:'muro:load-song',
    data: arrayBuffer,
    title: 'Song title' },
  'https://midimusictheory.com')

// 3. the frame answers
{ type:'muro:song-loaded',
  summary:{ name, accepted,
            refused, durationSec } }

// also accepted:
{ type:'muro:stop' }
{ type:'muro:seek', sec }
// no 'play' message — audio needs a
// click INSIDE the frame (browser rule)

// URL layout flags (independent bits,
// compose freely; all default shown):
//   ?tour=0 ?player=0 ?engrave=0
//   ?engrave=0        song visual
//   ?tour=0&player=0  plate preview