← Back to Home
Case Study

NoteRunner

A browser platformer controlled by your guitar — play higher to go up, lower to go down. Real instrument, real game.

📋 Overview

NoteRunner is a side-scrolling platformer that uses your microphone to detect what you're playing on guitar or bass. Higher pitch moves your character up, lower pitch moves it down. Platforms scroll past and you have to hit them by playing the right notes. No music theory required — the game auto-calibrates to your instrument's range from the first few notes you play.


💡 Context

Built as a way to jam with my guitar-playing buddy and maybe learn a little bit about playing guitar myself. Quick proof of concept — what if you could turn real instrument playing into a game? Most music games use button presses to simulate playing. NoteRunner flips that — you play your actual instrument and the game responds.


🛠 Tech Stack

Web Audio API YIN Pitch Detection Web Workers Canvas 2D Vanilla JavaScript

🧠 Technical Challenges

Getting real-time pitch detection to coexist with a smooth 60fps game loop in the browser turned out to be the core technical challenge of this project.

⚡ Challenge

The YIN pitch detection algorithm is O(n²) with a buffer of 4096+ samples. Running it on the main thread via setTimeout crashed the browser when combined with a requestAnimationFrame game loop — ~335 million operations per second competing with rendering. The game would freeze within seconds of enabling the microphone.

✓ Solution

Moved the entire YIN algorithm into a Web Worker running on a separate thread. The main thread only copies the audio buffer and posts it to the worker using Transferable ArrayBuffers for zero-copy message passing. Added backpressure with a workerBusy flag so the main thread never queues up detection requests. Result: 12-20 pitch detections per second running smoothly alongside a 60fps game loop, with full bass guitar support (30-2000Hz range, 8192 FFT buffer, 0.20 threshold).


🎯 Role

Solo project — built with AI assistance. A browser game where your real instrument controls the character through pitch detection.


Key Highlights


Play NoteRunner

Launch Game →