Midi Meets CSS

on YouTube ↗40m

" summary

Live songs come from a physical KO2 sequencer hooked to the browser via the Web MIDI API, feeding velocity (1–127) and note on/off events into CSS animations and custom properties; 12 hardware pads map to particle, burst and seismic ring effects, intensity drives size/count/duration, audio is split into low/high bands via getUserMedia, gradients update from those values, colors use P3/OKLCH palettes, noisy.netlify.app and wake lock keep visuals running — it works live.

AI-written summary · about

" chapters (8)

1. 0:00Introduction and first song
2. 4:00Inspiration and passion
3. 8:54Second live musical performance
4. 12:27Technical overview of noise
5. 17:50Web MIDI and CSS animations
6. 30:46Intermission performance
7. 33:35Velocity and sensitivity mapping
8. 37:07Final song and conclusion

" related talks

• 20mLook What You MIDI Me Do!Rachel White · JSConf Hawaiʻi 2020
• 40mLiveJS: Making Music with JavaScriptRuth John, Martin Schuhfuss, Matt Mckegg · ColdFront 2017
• 23mLet's talk about MIDIRuth John · RuhrJS 2016
• 33mWe ❤ Music & the WebMartin Schuhfuss, Tim Pietrusky · JSConf Budapest 2016
• 14mMusical Creativity in the BrowserScott Ammon · CascadiaJS 2020
• 44mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · NDC Sydney 2024
• 26mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · JSDayIE 2023
• 40mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · Copenhagen Developers Festival 2023