브라우저 탭에서 4개의 소형 신경망이 음악을 분석해 리듬 게임을 만드는 오픈 소스 프로젝트
Made a rhythm game where 4 small neural nets listen to your song right in the browser tab (open source)
핵심 요약
사용자의 음악을 로컬 브라우저 환경에서 실시간 분석해 레벨을 생성하는 리듬 게임입니다.
- 로컬 추론 — onnxruntime-web을 사용하여 브라우저 탭 내에서 모든 모델이 로컬로 실행됨
- 음악 분석 모델 — BeatNet, Basic Pitch, Spleeter, SwiftF0를 활용해 비트, 음정, 보컬을 추출함
- 자동 레벨 생성 — 분석된 음악 데이터를 기반으로 장애물과 배경 환경을 실시간으로 구성함
- 오픈 소스 — MIT 라이선스로 공개되어 누구나 자신의 MP3 파일로 게임을 즐길 수 있음

LLM 관련 글은 아니긴 한데, 전부 로컬 추론으로 돌아가는 거라 여기 형들도 좋아할 것 같아서 가져와 봤어.
노래에 맞춰서 달리는 맵이 생성되는 브라우저 리듬 게임을 하나 만들었거든. 가지고 있는 mp3 파일을 넣으면 기기 안에서, 그러니까 브라우저 탭 안에서 모든 "듣기" 과정이 다 처리돼. 서버로 업로드되는 거 하나도 없음.
모델들은 전부 onnxruntime-web(wasm, 각각 별도의 웹 워커에서 실행) 위에서 로컬로 돌아가고, 게임에서 각 모델을 이렇게 써먹어:
-
BeatNet (비트 + 다운비트 트래킹, ~1.6 mb) - 모든 비트랑 마디 시작점을 찾아내. 이게 레벨 전체의 뼈대야. 모든 장애물, 점프, 킥이 이 비트 위에 배치되고, 드롭 구간은 마디 선에 맞춰서 떨어지게 돼 있어.
-
Basic Pitch by spotify (음표 전사, ~0.2 mb) - 어떤 음이 연주되는지 파악해. 길게 끄는 음은 막대나 매달리는 줄이 되고, 솔로 파트는 음 높이에 맞춰서 통과해야 하는 고리들이 줄줄이 생성돼.
-
Spleeter 보컬 넷 (소스 분리, ~20 mb) - 믹스에서 목소리만 쏙 뽑아내서, 나머지 노래 소리가 다음 모델을 헷갈리게 하지 않도록 해줘.
-
SwiftF0 (피치 트래킹, ~0.1 mb) - 16ms마다 목소리 높낮이랑 음절 시작점을 잡아내. 노래하는 구간에서는 가수의 음절에 맞춰 고리를 통과하게 되고, 멜로디 높낮이에 따라 위아래로 움직이게 돼.
이 4개 다 합쳐도 22mb 정도고, 처음 로드하고 나면 캐시돼서 괜찮아. 만약 기기 사양이 딸려서 제시간에 못 돌리면, 그냥 일반 DSP 방식으로 전환돼서 게임은 계속 돌아가.
모델 말고도 일반적인 DSP도 쓰는데, 온셋(onsets)이나 마디별 음량, 드롭 시점 같은 걸 분석해. 이걸로 맵 분위기나 날씨를 정하고, 드롭 터질 때 맵이 미친 듯이 변하게 만들었어. 같은 노래면 항상 같은 맵이 나오니까 외워서 플레이할 수도 있어.
영상은 Pendulum & WARGASM의 Cannibal 전체를 게임 내 봇이 플레이한 거야.
코드 (MIT): https://github.com/Felliks/Struna 플레이하기: https://struna.ai (폰에서도 잘 돌아감)
영어가 모국어가 아니라서 글 쓸 때 AI 도움 좀 받았어. 코드도 상당 부분 AI(claude code) 도움받아서 짰고, 딱히 숨길 생각은 없어.

