I built a playable ocarina in the browser, inspired by Ocarina of Time. You can play the twelve songs from the game with the keyboard or by touch, and the simulator recognises which song you played.
Live: Ocarina Simulator: Play Ocarina of Time Songs Online — OoT Guide
Source (MIT): GitHub - zengm32343/ocarina-simulator: Playable 3D ocarina in the browser: six ocarinas, Ocarina of Time song recognition, practice and microphone blow mode. Live at ootguide.com/ocarina/ · GitHub
What’s in it
- Six ocarinas: a procedural Italian 10-hole ocarina built from three.js geometry, plus five CC BY photogrammetry scans (terracotta, Chilean black clay, Chinese xun, bird and a pre-Columbian turtle) loaded as GLB.
- Fingering on the model: each style has its own hole positions, and the open holes light up for every note.
- Note particles float off the model as you play.
- Sound: Web Audio only. Some styles use looped recordings re-pitched from the nearest sample; the others use a synth with vibrato, breath noise, glide between notes and a small room reverb.
- Blow mode: optional microphone input. It detects low-frequency wind noise above an adaptive noise floor, so blowing harder makes the note louder and slightly sharper, like a real ocarina. Nothing is recorded or sent.
- Practice mode lights the next note on the model and on the keys.
?song=song-of-stormsopens straight into practice.
No framework: just TypeScript, three.js and Vite. The src/ocarina/ modules (scene, synth, breath input, song matcher) don’t depend on the page, so you can reuse them in other projects.
The trickiest part was making the scanned models usable: each scan needed its own hole positions and camera framing, and the light needed to read well on both dark clay and pale terracotta.
Feedback welcome, especially on the lighting and on how it performs on phones.
