Look What You MIDI Me Do!
summary
Builds a browser-based visual instrument that reads raw MIDI messages and maps them to live canvas visuals, using Web MIDI API to enumerate devices and a MIDI Fighter 3D for button, knob, and tilt input. Uses the Web Audio API and Donald Hansen’s pixel-sense library for rendering, code hosted on GitHub, and is battle-tested live (Magfest, ~30,000 attendees). Potentiometer controls rotation and scale, button IDs map to specific effects, and it works with minor tuning for jitter and deprecation warnings.
AI-written summary · about
chapters (13)
- 0:00Intro
- 0:28New Romance
- 1:32MS Paint
- 2:08Women
- 3:05Why MIDI
- 4:42What is MIDI
- 5:45How does MIDI work
- 7:30Web MIDI
- 8:56Demo
- 11:45PixelSense
- 12:51Demonstration
- 14:05Code
- 16:56Future
related talks
23mLet's talk about MIDI
14mMusical Creativity in the Browser
40mMidi Meets CSS
07mRapidly Prototyping MIDI Controllers With Web MIDI
40mLiveJS: Making Music with JavaScript
44mBeats in the Browser - Coding Music with JavaScript
31mBuilding a JavaScript Video Synthesizer for Live Performance
33mWe ❤ Music & the Web