MIDI
A new dimension in controlling your browser
Armagan Amcalar
You Gotta Love Frontend, Vilnius
May 16th, 2019
Who am I?
Armagan Amcalar
Senior Engineering Manager @ Wayfair
Founder @ Lonca Works
dashersw dashersw
AUTHORED ON GITHUB
dashersw
What are we going to talk about today?
dashersw
What is midi?
Musical Instrument Digital Interface
A communication protocol for
digital musical instruments.
Think of jSON, but for music
dashersw
dashersw
Invented in 1983 By Japanese Digital Musical Instrument makers
Almost any music you hear today has been produced with midi-compatible devices
dashersw
dashersw
serial 8-bit messages between instruments, synthesizers and other modules
dashersw
[144, 48, 127] // C3 on
[144, 48, 0] // C3 offStatus byte
Data byte 1
Data byte 2
enter webmidi api
dashersw
Bad news first:
Chrome AND OPERA only
dashersw
dashersw
const access = await navigator.requestMIDIAccess()
const inputs = access.inputs.values()
for (let input of inputs) {
input.onmidimessage = ({ data }) => console.log(data)
}experiment #1
A music instrument
dashersw
experiment #2
A snake game
dashersw
experiment #3
An image editor
dashersw
experiment #4
a YouTube Equalizer
dashersw
What else can we build?
dashersw
MIDI is great for accessibility
dashersw
did you know?
some motorized wheelchairs can output midi
dashersw
WebMIDI is a great way to build more software in the browser. try it today!
dashersw
thank you!
Let's keep in touch!
Armagan Amcalar
get these slides at: