Armağan Amcalar PRO
Armagan is the founder of Coyotiv GmbH, and is currently on a mission to bring a scalable and nimble engineering culture to startups and enterprises. Armagan is a public speaker, a mentor and a lecturer.
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:
MIDI: A new dimension in controlling your browser
By Armağan Amcalar
MIDI: A new dimension in controlling your browser
Gone are the days of knobs and buttons, or tactile controls. But are you really limited to a keyboard and a trackpad or a mouse, or could physical controls enable better control of your software? This talk builds up on Web MIDI API, demonstrating how physical interaction with browser software enables greater control. An online image editor, a software instrument, and a Snake game are demonstrated on stage as examples of applications that can benefit from extended physical control. And the best part is, everything happens in JavaScript and in your browser.
