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 off

Status 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

armagan@amcalar.com
   dashersw
   dashersw

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.

  • 1,929