The latest articles on DEV Community by andy (@b1rdmania). https://dev.to/b1rdmania https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3824014%2F2169b4f6-ec83-4bb0-bd3b-2c2ca053b7a3.jpeg https://dev.to/b1rdmania en andy Sat, 14 Mar 2026 13:32:09 +0000 https://dev.to/b1rdmania/shipping-a-game-boy-wario-synth-from-real-midi-152b https://dev.to/b1rdmania/shipping-a-game-boy-wario-synth-from-real-midi-152b <p> </p> <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__content"> <div class="c-embed__cover"> <a href="https://www.wario.style/" class="c-link align-middle" rel="noopener noreferrer"> <img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.wario.style%2FwarioX.png" height="auto" class="m-0"> </a> </div> <div class="c-embed__body"> <h2 class="fs-xl lh-tight"> <a href="https://www.wario.style/" rel="noopener noreferrer" class="c-link"> Wario Synthesis Engine 8-Bit Midi </a> </h2> <p class="truncate-at-3"> Turn any song into a Game Boy version </p> <div class="color-secondary fs-s flex items-center"> wario.style </div> </div> </div> </div> <br> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/b1rdmania" rel="noopener noreferrer"> b1rdmania </a> / <a href="https://github.com/b1rdmania/motif" rel="noopener noreferrer"> motif </a> </h2> <h3> Wario.Style. Game Boy Midi Synthesis Engine. Search any song. Get the 8-bit Game Boy version. </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">Wario Synthesis Engine 8-Bit Midi</h1> </div> <p><a rel="noopener noreferrer" href="https://github.com/b1rdmania/motif/public/wariosynthlogo.png"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fb1rdmania%2Fmotif%2Fpublic%2Fwariosynthlogo.png" alt="Wario Synth Logo"></a></p> <p>Turn any song into a Game Boy version.</p> <div class="markdown-heading"> <h2 class="heading-element">Live Demo</h2> </div> <p><strong><a href="https://www.wario.style" rel="nofollow noopener noreferrer">www.wario.style</a></strong></p> <div class="markdown-heading"> <h2 class="heading-element">About</h2> </div> <p><strong>WAH!</strong> 🎮</p> <p>Type in literally any song. We'll find a MIDI file somewhere on the internet and absolutely demolish it through a janky homebrew Game Boy sound chip running in your browser.</p> <p>Is it accurate? Sometimes. Is it legal? Probably. Does it slap? <strong>Absolutely.</strong></p> <p>Four glorious channels of chiptune chaos:</p> <ul> <li>🟨 <strong>Pulse 1</strong> — screamy lead melodies</li> <li>🟨 <strong>Pulse 2</strong> — whatever pulse 1 forgot</li> <li>🟩 <strong>Wave</strong> — chunky bass that hits different</li> <li>⬜ <strong>Noise</strong> — percussion (tssss pshhhh)</li> </ul> <p>Zero samples. Zero server audio. Just raw oscillators having the time of their lives.</p> <p><strong><a href="https://www.wario.style" rel="nofollow noopener noreferrer">wario.style</a></strong> ← go make your favorite song worse</p> <p><a rel="noopener noreferrer" href="https://github.com/b1rdmania/motif/public/wario-sprite.png"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fb1rdmania%2Fmotif%2Fpublic%2Fwario-sprite.png" alt="Wario"></a></p> <div class="markdown-heading"> <h2 class="heading-element">Features</h2> </div> <ul> <li> <strong>MIDI search</strong> from BitMidi and other sources</li> <li> <strong>Browser playback</strong> with soundfont piano preview</li> <li> <strong>Wario Synthesis Engine</strong>: procedural Game Boy-style synthesis from parsed MIDI structure</li> <li> <strong>Share links</strong> with dynamic social previews</li> <li>…</li> </ul> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/b1rdmania/motif" rel="noopener noreferrer">View on GitHub</a></div> </div> <p>Built a fun little web app: search a song, find a real MIDI online, load it, then resynthesize it in-browser with a Game Boy-ish synth engine. Fast MVP, lots of edge cases, a surprising amount of “this slaps”.</p> <h3> What we shipped (MVP) </h3> <ul> <li> <strong>MIDI search + ranking</strong> across sources</li> <li><strong>Backend fetch/proxy with SSRF protection</strong></li> <li> <strong>Deterministic MIDI parsing + metadata</strong> (stable, debuggable)</li> <li> <strong>Reliable playback</strong> with Web Audio + iOS “tap to enable audio” UX</li> <li> <strong>Motif / variation mode</strong> (role-mapping: melody/bass/chords/texture → synth layers)</li> </ul> <h3> The feature that derailed us: “Download MP3” </h3> <p>We added an export button that:<br> 1) offline-renders (<code>OfflineAudioContext</code>)<br> 2) encodes MP3 in JS (<code>lamejs</code>)<br> 3) triggers a blob download</p> <p>It used to feel great:</p> <ul> <li>“Rendering audio…”</li> <li>“Encoding MP3…”</li> <li>“MP3 downloaded!”</li> </ul> <p>Then browsers started blocking it.</p> <h4> The real problem </h4> <p>Modern browsers often <strong>silently block downloads that happen after long async work</strong> (render/encode), because the “user gesture” is considered gone. No error, no file, just… nothing.</p> <p>We tried the usual workarounds (and complexity ballooned):</p> <ul> <li>bundle the encoder (avoid CDN globals)</li> <li>two-click “prepare then download”</li> <li>Save File Picker (<code>showSaveFilePicker</code>) where supported</li> <li>pre-open a tab/window on click, then navigate it to the blob</li> </ul> <p>At some point the export UX became the least reliable part of the app, so we <strong>removed the Download MP3 button</strong> instead of shipping something flaky.</p> <h3> What we learned </h3> <ul> <li> <strong>Reliability beats cleverness</strong>: a flaky button poisons trust.</li> <li> <strong>Browser policies are product constraints</strong>: autoplay unlock + download gesture rules define your UX.</li> <li> <strong>Determinism makes iteration fun</strong>: stable parsing/metadata keeps debugging sane.</li> </ul> <h3> How we can level it up next </h3> <ul> <li> <strong>Build our own MIDI library</strong>: crawl/cache “known good” MIDIs, normalize metadata, dedupe, rank by “sounds good in our synth”.</li> <li> <strong>Better musical intelligence</strong> (still lightweight): improved role mapping, basic key/scale heuristics, smarter drum/noise handling.</li> <li> <strong>Bring export back properly</strong>: either <strong>server-side rendering/export</strong> or a deliberate “Save…” flow that’s actually reliable cross-browser.</li> </ul> <p>Still: turning random MIDIs into crunchy Game Boy performances is stupidly fun—and it’s a great playground for audio, MIDI weirdness, and shipping fast.</p> music gamedev