Building a Music Learning Game with Elm, Web MIDI, and SVG Animation
summary
A playable browser prototype ties a digital piano into the web via Web MIDI API and JavaScript interop, sends note integers into Elm ports, and renders SVG sprite animation that initially uses Super Mario sheets then swaps to original art. Movement uses requestAnimationFrame with lerp and simple projectile math to compute jump velocity; early bugs include inconsistent scrolling and a three‑note level where playing notes too fast rockets the sprite. Source is on GitHub and Chrome is required for MIDI.
AI-written summary · about
chapters (6)
- 0:00Start
- 9:13Summary
- 10:53Element Elm Style Animation Library
- 14:50Linear Interpolation
- 15:39Standard Exponential Slide
- 22:06Drawing Your Own Pixel Art
related talks
26m"Building a Music Learning Game with Elm, Web MIDI, and SVG Animation"
36mTeaching WebGL to Dance to Music
14mMusical Creativity in the Browser
20mLook What You MIDI Me Do!
44mMy adventure with Elm
24mPlay Them Off, Keyboard App: Building a virtual piano in JavaScript
31mBuilding a JavaScript Video Synthesizer for Live Performance
29mMIDI A New Dimension in Controlling Your Browser