The web can be weird

on YouTube ↗20m

" summary

Demo shows the browser reading battery level to fade a page, using battery status API to drop visibility at 10% and restore when charging. A USB audio interface and controllers connect via webHID to send button presses that change RGBA values in real time. A groove box feeds notes over webMIDI to trigger an MP4 and map pitch and velocity to HSL color channels. All demos run in-page and work live on desktop browsers that support these APIs.

AI-written summary · about

" chapters (13)

1. 0:00Introduction and setup
2. 1:34Why the web should be fun
3. 2:17The useless web and eel slap
4. 3:22Arc browser CSS injection
5. 4:28Battery status API demo
6. 6:12Web HID API exploration
7. 8:39From DJ to analog music gear
8. 11:09Web MIDI API introduction
9. 12:53Building a music-controlled website
10. 16:25CSS color manipulation with MIDI
11. 17:46Practical use cases for MIDI
12. 18:30Use and abuse the web platform
13. 19:12Final thoughts and call to action

" related talks

• 23mWarm-Up Talk: Browser APIs – the unknown Super HeroesRowdy Rabouw · Beyond Tellerrand Düsseldorf 2018
• 33mWe ❤ Music & the WebMartin Schuhfuss, Tim Pietrusky · JSConf Budapest 2016
• 29mMIDI A New Dimension in Controlling Your BrowserArmagan Amcalar · You Gotta Love Frontend 2019
• 44mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · NDC Sydney 2024
• 40mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · Copenhagen Developers Festival 2023
• 36mThe internet of browsersBen Foxall · Full Stack Fest 2015
• 40mBeats in the Browser: Coding Music withJavaScriptRowdy Rabouw · Øredev 2023
• 29mControlling the web with a PS5 controllerHarshil Agrawal · Armada JS 2023