GEORGE MANDIS TWITTER — EMAIL — GITHUB — WEB — WORK — Freelance web developer from Portland, Oregon. Developing for the web for over 10 years. That's... Maybe 45 in JavaScript years? @georgeMandis [email protected] @georgemandis george.mand.is snaptortoise.com
GEORGE MANDIS FUN FACTS! First time visting Colombia! Once lived as digital nomad in 18 countries Born in Saudi Arabia (Long story!) Most known projects — & Once unintentionally cheated running a marathon in North Korea Konami-JS Jeklly RSS Feeds
WHAT I'M TALKING ABOUT JAVASCRIPT (Un poco obvio!) TINY COMPUTERS Arduinos, Espruinos, Rasperry Pis, & more MIDI The Musical Instrument Device Interface
WHAT MAKES JAVASCRIPT + MIDI + TINY COMPUTERS EXCITING? JavaScript talking to real-world interfaces Low-barrier to entry towards making interactive hardware / web / IoT stuff A tool for art projects and creative explorations that touch on the physical world
JAVASCRIPT IS EVERYWHERE Clients, servers, websites, software, hardware, apps, bots, AIs, IoT, embedded tech... It's basically become the lingua franca of the web.
IT'S WHERE THE PEOPLE ARE In ~8 years Node.JS has made JavaScript a legitimate server-side contender and fundamentally changed how we develop for the web and beyond. If you want longevity in this industry you have to at least pay attention to where the crowds are gathering.
TINY COMPUTERS ARE... Affordable and (generally) easy to use Powerful-enough to perform a variety of tasks Great for stand-alone projects and creative tinkering Capable of running JavaScript natively (on many of them) FUN!
MIDI MUSICAL INSTRUMENT DEVICE INTERFACE Often used interchangeably to describe: The MIDI protocol created in 1983 The MIDI standard The MIDI file format
MIDI THE PROTOCOL Allows electronic musical instruments to communicate with other MIDI-capable devices This is done by sending and receiving 3-byte MIDI Messages
MIDI THE STANDARD Gives our MIDI messages meaning Most describe common instrument performance parameters — noteOn, noteOff, pitchbend, and others Think HTTP codes: 404 (Not Found), 301 (Moved Permanently), 418 (I'm a teapot) Maintained by the since 1985. Roland, Oberheim, Sequential Circuits, Yamaha, Korg, Kawai MIDI Association
REGRESAR A LA PREGUNTA... ¿POR QUE MIDI? MIDI is asynchronous (JavaScript!) MIDI talks to hardware (The IoT!) MIDI is easy to use for non-musical applications (Yay!)
ANATOMY OF A MIDI MESSAGE 128x0001 | 0x1111111 | 0x0000000 Every message is 3 bytes — 1 status, 2 data A status byte always begins with 1 and data bytes always begin with 0 For a status message, 3 bits of the first byte describe the type of status message. The remaining 4 describe the channel (16). For data messages that leaves 7 bits left per byte to describe the event — note, velocity, etc.
JAVASCRIPT + MIDI IN THE BROWSER Iterating through the MIDI inputs and attaching listeners to MIDI messages as they're received const onMIDIInit = (MIDIAccessObject) => { for (let input of MIDIAccessObject.inputs.values()) { if (input.name === "Logidy UMI3") logidy = input; if (input.name === "PuckCC Bluetooth") puckJS = input; } logidy.onmidimessage = handleLogidyController; puckJS.onmidimessage = handlePuckController; }
JAVASCRIPT + MIDI IN THE BROWSER Libraries to make life a little easier WebMIDI.js WebMidi.enable((err) => { logidy = WebMidi.getInputByname("Logidy UMI3"); puck = WebMidi.getInputByname("PuckCC Bluetooth"); puck.addListener("noteon", "all", (event) => { let data = e.data; }); logidy.addListener("noteon", "all", (event) => { let data = e.data; }); });
JAVASCRIPT + MIDI IN THE BROWSER Libraries to make life a little easier MIDIUtils.js puck.addListener("noteon", "all", (event) => { let frequency = MIDIUtils.noteNumberToFrequency(e.data[1]) let noteName = MIDIUtils.noteNumberToName(e.data[1]) let noteNumberFromName = MIDIUtils.noteNameToNoteNumber("A-4") let noteNumberFromFreq = MIDIUtils.frequencyToNoteNumber(440) });
JAVASCRIPT + MIDI ON THE SERVER What's different and what's the same We don't need to request permission Latency can be more of an issue in some contexts Working with MIDI files is easier (more packages) Some of the frontend libraries work on the server Do more interesting, system-level things
JAVASCRIPT + MIDI ON THE SERVER Basic setup for talking to and listening to a controller const midi = require("midi"); let input = new midi.input(); input.on('message', function(deltaTime, message) { console.log(message); // [144, 80, 127] }); input.openPort(0);
GRACIAS! George Mandis Demos and more info @ Email: Twitter: GitHub: Website: https://midi.mand.is [email protected] @georgeMandis georgemandis george.mand.is
georgemandis
ivargrimstad
irof
bells17
goutarouh
ojun9
sanfrecce_osaka
codemountains
.png){kind=avatar}
melonattacker
nano72mkn
mipypf
morikann
eileencodes
akosma
lara
brianwarren
reverentgeek
myddelton
searls
paigeccino
aki_iinuma
paulrobertlloyd
tanoku
kastner