Web Audio and Web MIDI — IRCAM
Web Audio and Web MIDI — ATIAM master’s programme, IRCAM.
From 2017 to 2019, I taught a course in IRCAM’s ATIAM master’s programme on processing and controlling sound in the browser. Two hands-on labs guided students through building musical instruments for the web, from audio input to control through a physical interface.
| Format | lecture and 2 hands-on labs |
| Level | Master’s year 2 — ATIAM, IRCAM |
| Period | 2017-2019 |
| Tools | Web Audio API, Web MIDI API, JavaScript, Pizzicato.js |
Lab 1 — Kaoss Pad: real-time effects with the mouse
Inspired by the Korg Kaoss Pad controller, the exercise captures the computer’s microphone with the Web Audio API and runs it through a chain of effects: Ping Pong Delay, low-pass and high-pass filters, with Pizzicato.js. Students then map mouse movements to sound parameters: the X axis drives the delay feedback, the Y axis the filter frequency.
The exercise ends with a critical analysis of the setup: latency, playability in a concert situation, audio clicks, CPU load.
Lab 2 — Drum Pad: driving Web Audio with a MIDI keyboard
The second exercise connects musical hardware to the browser through the Web MIDI API. Students detect connected MIDI controllers, interpret incoming messages, load drum samples into Web Audio buffers and trigger them from MIDI notes. Finally, they add a biquad filter, driven continuously by a knob on the keyboard (Control Change).
Skills covered
- Web Audio API: context, sources, nodes, buffers.
- Web MIDI API: detecting controllers, reading messages.
- Event-driven JavaScript.
- Audio synthesis and filtering.
- Gesture-to-sound mapping.
- Real-time audio performance: measuring and evaluating it.