Musical Creativity in the Browser

on YouTube ↗14m

" summary

Demonstrates a browser-connected MIDI keyboard and drum visualizer using the Web MIDI API and a React front end with React Context API to stream real-time MIDI events, mapping raw three-byte messages (event, note, velocity) to SVG graphics and CSS key presses. Proves low-latency local playback, prototypes multi-user streaming via AWS API Gateway + Lambda and a simple DB but finds serverless reordering causes perceptible delay, recommending a websocket server for ordered delivery.

AI-written summary · about

" chapters (6)

1. 0:00Introduction to musical creativity
2. 1:55Web MIDI API basics
3. 3:43Building a virtual keyboard
4. 5:38Transmitting MIDI over web
5. 7:02Visualizing drum hits
6. 9:27Potential and future of MIDI

" related talks

• 40mLiveJS: Making Music with JavaScriptRuth John, Martin Schuhfuss, Matt Mckegg · ColdFront 2017
• 22mMusic of ReactVladimir Barsukov · CSS-Minsk-JS 2018
• 40mBeats in the Browser: Coding Music withJavaScriptRowdy Rabouw · Øredev 2023
• 20mLook What You MIDI Me Do!Rachel White · JSConf Hawaiʻi 2020
• 29mMIDI A New Dimension in Controlling Your BrowserArmagan Amcalar · You Gotta Love Frontend 2019
• 23mLet's talk about MIDIRuth John · RuhrJS 2016
• 44mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · NDC Sydney 2024
• 47mHow live music is evolving in a post pandemic worldBen Michel · Strange Loop 2022