Learning to Read Music with the Web MIDI API

on YouTube ↗26m

" summary

A small web app connects a USB digital keyboard to the browser via navigator.requestMIDIAccess and the Web MIDI API, listens for MIDI note on (144) messages, reads note numbers (middle C = 60, range used 60–72 = 13 notes) and velocity, compares incoming note numbers to a shuffled target sequence, marks each note green or red, waits 1.5s, advances and reports a score out of 13; it runs in Chrome/Opera and the demo works.

AI-written summary · about

" chapters (14)

1. 0:00Intro
2. 0:32Who are we
3. 1:02How this came about
4. 2:31What is MIDI
5. 2:57MIDI is not sound
6. 3:55MIDI messages
7. 6:35Web MIDI API
8. 6:53Browser support
9. 7:47Browser alternatives
10. 8:22Getting MIDI support
11. 10:26Getting MIDI data
12. 12:06Treble Clef demo
13. 16:42Resources
14. 18:39Google Magenta

" related talks

• 30mSmartWeb 2016 - Ruth JohnRuth John · SmartWeb 2016
• 29mMIDI A New Dimension in Controlling Your BrowserArmagan Amcalar · You Gotta Love Frontend 2019
• 23mLet's talk about MIDIRuth John · RuhrJS 2016
• 20mLook What You MIDI Me Do!Rachel White · JSConf Hawaiʻi 2020
• 14mMusical Creativity in the BrowserScott Ammon · CascadiaJS 2020
• 26mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · JSDayIE 2023
• 40mBeats in the Browser - Coding Music with JavaScriptRowdy Rabouw · Copenhagen Developers Festival 2023
• 40mBeats in the Browser: Coding Music withJavaScriptRowdy Rabouw · Øredev 2023