실제 MIDI로 Game Boy “Wario Synth” 배송

Source: Dev.to

Wario Synthesis Engine 8-Bit Midi

어떤 노래든 Game Boy 버전으로 바꿔줍니다.

Live Demo

www.wario.style

About

WAH! 🎮

사실상 어떤 노래든 입력하세요. 인터넷 어딘가에 있는 MIDI 파일을 찾아서, 브라우저에서 실행되는 구식 홈브류 Game Boy 사운드 칩을 통해 완전히 파괴합니다.

• 정확한가요? 가끔은요.
• 법적인가요? 아마도요.
• 멋진가요? 절대적으로요.

네 개의 영광스러운 채널이 만드는 칩튠 혼돈:

• 🟨 Pulse 1 — 날카로운 리드 멜로디
• 🟨 Pulse 2 — Pulse 1이 놓친 것들
• 🟩 Wave — 색다른 저음 베이스
• ⬜ Noise — 퍼커션 (tssss pshhhh)

샘플 없음. 서버 오디오 없음. 순수한 오실레이터가 인생을 즐기고 있습니다.

Features

• MIDI 검색 – BitMidi 및 기타 소스에서
• 브라우저 재생 – 사운드폰 피아노 미리보기 제공
• Wario Synthesis Engine: 파싱된 MIDI 구조를 기반으로 절차적 Game Boy 스타일 합성
• 공유 링크 – 동적 소셜 프리뷰 포함

What we shipped (MVP)

• MIDI 검색 + 순위 매기기 – 여러 소스 통합 (백엔드 fetch/proxy와 SSRF 방어)
• 결정론적 MIDI 파싱 + 메타데이터 (안정적, 디버깅 용이)
• 신뢰할 수 있는 재생 – Web Audio + iOS “탭하여 오디오 활성화” UX
• Motif / 변형 모드 (역할 매핑: 멜로디/베이스/코드/텍스처 → 신스 레이어)

The feature that derailed us: “Download MP3”

우리는 다음을 수행하는 내보내기 버튼을 추가했습니다:

1. 오프라인 렌더링 (OfflineAudioContext)
2. JS에서 MP3 인코딩 (lamejs)
3. Blob 다운로드 트리거

처음엔 정말 기분이 좋았습니다:

• “오디오 렌더링 중…”
• “MP3 인코딩 중…”
• “MP3 다운로드 완료!”

그런데 브라우저가 이를 차단하기 시작했습니다.

The real problem

현대 브라우저는 오랜 비동기 작업(렌더링/인코딩) 후에 발생하는 다운로드를 조용히 차단합니다. “사용자 제스처”가 사라진 것으로 판단하기 때문이죠. 오류도 없고 파일도 없고, 그저… 아무 일도 일어나지 않습니다.

우리는 일반적인 우회 방법을 시도했지만 복잡성만 늘어났습니다:

• 인코더를 번들링( CDN 전역 변수 회피)
• 두 번 클릭 “준비 후 다운로드”
• 지원되는 경우 파일 저장 피커(showSaveFilePicker) 사용
• 클릭 시 탭/창을 미리 열고, 이후 Blob으로 이동

결국 내보내기 UX가 앱에서 가장 신뢰성이 낮은 부분이 되었고, 우리는 Download MP3 버튼을 제거하고 불안정한 기능을 배포하지 않기로 했습니다.

What we learned

• 신뢰성이 기교보다 우선: 불안정한 버튼은 신뢰를 무너뜨립니다.
• 브라우저 정책은 제품 제약: 자동재생 해제 + 다운로드 제스처 규칙이 UX를 정의합니다.
• 결정론성이 반복을 즐겁게 함: 안정적인 파싱/메타데이터가 디버깅을 수월하게 합니다.

How we can level it up next

• 우리만의 MIDI 라이브러리 구축: “알고 있는 좋은” MIDI를 크롤링·캐시하고, 메타데이터를 정규화·중복 제거, “우리 신스에서 잘 들리는” 기준으로 순위 매기기.
• 더 나은 음악 인텔리전스(여전히 가벼운 수준): 역할 매핑 개선, 기본 키·스케일 휴리스틱, 더 똑똑한 드럼·노이즈 처리.
• 내보내기 기능을 제대로 복구: 서버‑사이드 렌더링/내보내기 혹은 실제로 모든 브라우저에서 신뢰할 수 있는 “저장…” 흐름 구현.

무작위 MIDI를 바삭바삭한 Game Boy 퍼포먼스로 바꾸는 일은 어처구니없이 재밌으며, 오디오·MIDI의 이상함을 탐구하고 빠르게 배포할 수 있는 훌륭한 놀이터입니다.