Back to list
dev_to 2026年3月14日

実機 MIDI からゲームボーイ「ワリオシンセ」を ship する

Shipping a Game Boy “Wario Synth” from real MIDI

Translated: 2026/3/14 14:01:59
game-boymidi-synthesisweb-audiojavascriptbrowser-policy

Japanese Translation

/\n motif\n \n\nWario Synthesis Engine 8-Bit Midi\n\n曲をゲームボーイバージョンに変換します。\nLive Demo\nwww.wario.style\nAbout\nWAH! 🎮\nただどんな楽曲も入力してください。私たちはインターネット上にあるどこかの MIDI ファイルを見つけ出し、ブラウザ上で動作する不安定なハムブローのゲームボーイサウンドチップを走らせて完全にその曲を解体します。\n正確ですか?時々です。法的ですか?おそらくでしょう。気持ちいいですか?絶対にです。\n4 つの輝くチャネルのチップチューン・カオス:\n🟨 Pulse 1 — 尖ったリードメロディ\n🟨 Pulse 2 — Pulse 1 が忘れた whatever\n🟩 Wave — 重厚で異なる響きを持つベース\n⬜ Noise — ペルカッション(tssss pshhhh)\nサンプルゼロ。サーバーオーディオゼロ。ただ生の振動子が自分の人生を満喫するだけです。\nwario.style ← ご自身の好きな曲を酷くしてください\n\nFeatures\nBitMidi および他のソースからの MIDI 検索\nサウンドフォントピアノプレビュー付きブラウザ再生\nWario Synthesis Engine: 解析された MIDI 構造から生成されたゲームボーイ風のプロシージャルシンセシス\n動的 SNS プレビューを付帯した共有リンク\n…\n\nGitHub で表示\n楽しい小さな Web アプリを構築しました:曲を検索し、インターネット上の実際の MIDI ファイルを見つけ、それをロードし、Game Boy 風のシンセエンジンでブラウザ上で再シンセシスします。速い MVP、多数のエッジケース、「気持ちいい」ことが驚くほど多い。\nMIDI 検索およびソース間ランキング\nSSRF プロテクション付きバックエンドフェッチ/プロキシ\n決定論的な MIDI 解析 + メタデータ(安定、デバッグ可能)\nWeb Audio および iOS「タップでオーディオを有効化」という UX を備えた信頼できる再生\nMotif / variation モード(役割マッピング:メロディ/ベース/和音/テクスチャ → シンセレイヤ)\n追加したエクスポートボタン(\nOfflineAudioContext\nlamejs\n)\nかつては素晴らしかった:\n「オーディオレンダリング中…」\n「MP3 エンコーディング中…」\n「MP3 がダウンロードされました!」\nその後ブラウザはそれをブロックし始めました。\n現代のブラウザは、レンダリング/エンコードなどの長期非同期作業後に発生するダウンロードを静かにブロックすることがよくあるためです。なぜなら「ユーザージェスチャー」は失われたとみなされるからです。エラーなく、ファイルもなし、ただ…何もありません。\n通常のワークアラウンドを試みました(そして複雑性が膨大になりました):\nエンコーダーをバンドル(CDN グローバルを回避)\n2 クリックの「準備してからダウンロード」\nサポートされる場所では Save File Picker(showSaveFilePicker)\nクリック時にタブ/ウィンドウを事前に開き、それを blob にナビゲート\nある時点でエクスポート UX がアプリの最も非信頼的な部分となったため、私たちはフラキーなものを ship する代わりにダウンロード MP3 ボタンを削除しました。\n信頼性が巧みさより上です:フラキーなボタンは信頼を損害します。\nブラウザポリシーは製品制約です:自動再生ロック解除 + ダウンロードジェスチャー規則があなたの UX を定義します。\n決定論性はイテレーションを面白くします:安定した解析/メタデータはデバッグを健全に保ちます。\n独自の MIDI ライブラリを構築:既知の「良い」MIDI をクレール/キャッシュし、メタデータを正規化、デュープ排除、「私たちのシンセで聞こえる」によるランク付け。\nより良い音楽知性(まだ軽量):改善された役割マッピング、基本的なキー/スケール推定、より賢いドラム/ノイズ処理。\n正しくエクスポートを再導入:サーバーサイドレンダリング/エクスポートか、実際にクロスブラウザで信頼性の高い「保存…」フロー。\nそれでも:ランダムな MIDI をカッチカチしたゲームボーイパフォーマンスに変換することは、あまりにも楽しく、オーディオ・MIDI の奇妙さおよび速い ship における優れたプレイグラウンドです。

Original Content

/ motif Wario Synthesis Engine 8-Bit Midi Turn any song into a Game Boy version. Live Demo www.wario.style About WAH! 🎮 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. Is it accurate? Sometimes. Is it legal? Probably. Does it slap? Absolutely. Four glorious channels of chiptune chaos: 🟨 Pulse 1 — screamy lead melodies 🟨 Pulse 2 — whatever pulse 1 forgot 🟩 Wave — chunky bass that hits different ⬜ Noise — percussion (tssss pshhhh) Zero samples. Zero server audio. Just raw oscillators having the time of their lives. wario.style ← go make your favorite song worse Features MIDI search from BitMidi and other sources Browser playback with soundfont piano preview Wario Synthesis Engine: procedural Game Boy-style synthesis from parsed MIDI structure Share links with dynamic social previews … View on GitHub 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”. MIDI search + ranking across sources Backend fetch/proxy with SSRF protection Deterministic MIDI parsing + metadata (stable, debuggable) Reliable playback with Web Audio + iOS “tap to enable audio” UX Motif / variation mode (role-mapping: melody/bass/chords/texture → synth layers) We added an export button that: OfflineAudioContext) lamejs) It used to feel great: “Rendering audio…” “Encoding MP3…” “MP3 downloaded!” Then browsers started blocking it. Modern browsers often silently block downloads that happen after long async work (render/encode), because the “user gesture” is considered gone. No error, no file, just… nothing. We tried the usual workarounds (and complexity ballooned): bundle the encoder (avoid CDN globals) two-click “prepare then download” Save File Picker (showSaveFilePicker) where supported pre-open a tab/window on click, then navigate it to the blob At some point the export UX became the least reliable part of the app, so we removed the Download MP3 button instead of shipping something flaky. Reliability beats cleverness: a flaky button poisons trust. Browser policies are product constraints: autoplay unlock + download gesture rules define your UX. Determinism makes iteration fun: stable parsing/metadata keeps debugging sane. Build our own MIDI library: crawl/cache “known good” MIDIs, normalize metadata, dedupe, rank by “sounds good in our synth”. Better musical intelligence (still lightweight): improved role mapping, basic key/scale heuristics, smarter drum/noise handling. Bring export back properly: either server-side rendering/export or a deliberate “Save…” flow that’s actually reliable cross-browser. 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.