¿Sabía que existe una API de navegador bien compatible que le permite interactuar con hardware interesante e incluso personalizado utilizando un protocolo maduro que es anterior a la web? Permítame presentarle MIDI y WebMIDI API y mostrarle cómo presenta una oportunidad única para que los desarrolladores front-end salgan del navegador y se adentren en el mundo de la programación de hardware sin dejar la relativa comodidad de JavaScript y el DOM.
¿Qué son exactamente MIDI y WebMIDI?
MIDI es un protocolo de nicho diseñado para que los instrumentos musicales se comuniquen entre sí. Fue estandarizado en 1983 y hasta el día de hoy lo mantiene una organización formada por empresas y representantes de la industria musical. No es muy diferente a cómo el W3C dicta y preserva los estándares web, en algún sentido.
Foto por Jiroe en Unsplash
La API WebMIDI es la implementación basada en navegador de este protocolo y permite que nuestras aplicaciones web “hablen” MIDI y se comuniquen con cualquier hardware compatible con MIDI que pueda estar conectado al dispositivo de un usuario.
¿No eres músico? ¡No te preocupes! Descubriremos muy rápidamente que este protocolo simple diseñado para instrumentos musicales electrónicos puede usarse para construir cosas divertidas, interactivas y completamente no musicales.
¿Por qué querría hacer esto?
Gran pregunta. La respuesta más corta: ¡porque es divertido!
Si esa respuesta no es lo suficientemente satisfactoria para usted, le ofreceré esto: crear algo que se extienda a ambos lados de la línea entre el mundo físico y el mundo virtual en el que pasamos la mayor parte de nuestros días construyendo cosas es un buen ejercicio para pensar de manera diferente. Es una oportunidad para retoques creativos y para considerar y crear nuevas interfaces de usuario y experiencias para navegar. Realmente creo que este tipo de exploración lúdica nos ayuda a usar diferentes partes de nuestro cerebro y nos hace mejores desarrolladores a largo plazo.
¿Qué tipo de cosas puedo construir?
Autómatas celulares en un controlador MIDI
jugando ir
Aplasta un topo
Mezclando colores con movimientos de manos.
¿Qué necesito para empezar?
Estos son los requisitos previos para comenzar a experimentar con WebMIDI:
Un controlador midi
Esta podría ser la parte más complicada. Deberá adquirir una pieza de hardware compatible con MIDI para experimentar. Es posible que pueda encontrar algo barato en Craigslist, Amazon o AliExpress. O, si es muy ambicioso y tiene un Arduino disponible, puede crear el suyo propio (consulte el final de este artículo para obtener más información al respecto).
Un navegador compatible con WebMIDI
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y en adelante.
Escritorio
Cromo | Firefox | ES DECIR | Borde | Safari |
---|---|---|---|---|
43 | No | No | 79 | No |
Móvil / Tableta
Android cromo | android firefox | Androide | iOSSafari |
---|---|---|---|
96 | No | 96 | No |
En el momento de escribir este artículo, según caniuse.com, es compatible con aproximadamente el 73 % de los navegadores, aunque la mayor parte del trabajo pesado lo realiza Chromium. Cualquier navegador basado en Chromium admitirá WebMIDI, que incluye aplicaciones Electron y el Microsoft Edge más nuevo basado en Chromium. También es compatible con Opera y el navegador de Internet de Samsung. En Firefox todavía se está discutiendo, pero es de esperar que llegue más pronto que tarde.
Hola WebMIDI
Una vez que haya adquirido ambas cosas, ¡podemos comenzar a escribir algo de código! Trabajar con WebMIDI no es muy diferente a trabajar con otras API de navegador como las API de Geolocalización o MediaDevices, si está familiarizado con alguna de ellas.
El flujo de alto nivel se ve así:
- Detectamos disponibilidad de la API WebMIDI en el navegador.
- Si se detecta, solicitamos permiso al usuario para acceder a ella.
- Una vez que se nos otorga el permiso, ahora tenemos acceso a métodos adicionales para detectar y comunicarnos con cualquier dispositivo MIDI conectado.
Veamos eso en acción:
if ("requestMIDIAccess" in navigator) {
// The Web MIDI API is available to us!
}
Ahora, suponiendo que estamos en un navegador compatible con WebMIDI, solicitemos acceso:
navigator.requestMIDIAccess()
.then((access) => {
// The user gave us permission. Now we can
// access the MIDI-capable devices connected
// to the user's machine.
})
.catch((error) => {
// Permission was not granted. :(
});
Si el usuario nos da permiso, ahora deberíamos tener acceso a la interfaz MIDIAccess. Esto nos ayuda a crear una lista de los dispositivos desde los que podemos recibir entrada MIDI y enviar salida MIDI.
Hagamos eso a continuación. Este es el código que va dentro de la función que estamos pasando then
del fragmento de código anterior:
const inputs = access.inputs;
const outputs = access.outputs;
// Iterate through each connected MIDI input device
inputs.forEach((midiInput) => {
// Do something with the MIDI input device
});
// Iterate through each connected MIDI output device
outputs.forEach((midioutput) => {
// Do something with the MIDI output device
});
Quizás se pregunte cuál es la diferencia entre un dispositivo de entrada y salida MIDI. Algunos dispositivos están configurados para enviar únicamente información MIDI a la computadora (aparecerán como entradas) y otros pueden recibir información de la computadora (aparecerán como salidas). No es raro que un dispositivo se pueda enviar y recibir, por lo que lo encontrará en la lista de ambos.
Ahora que tenemos un código que puede iterar a través de todos los dispositivos MIDI conectados, básicamente solo hay dos cosas que querremos hacer;
- Si es un dispositivo de entrada, querremos escuchar cualquier mensaje MIDI entrante que se emita desde él.
- Si es un dispositivo de salida, es posible que queramos enviarle un mensaje MIDI.
El código para configurar un detector de eventos para responder a cualquier mensaje MIDI entrante de nuestros dispositivos de entrada se parece mucho a un detector de eventos que puede configurar para otros eventos DOM, excepto en este caso, el evento que estamos escuchando es el midimessage
evento:
midiInput.addEventListener('midimessage', (event) => {
// the `event` object will have a `data` property
// that contains an array of 3 numbers. For examples:
// [144, 63, 127]
})
Si queremos enviar un mensaje MIDI a un dispositivo de salida del código podemos hacerlo así;
outputsend([144, 63, 127]);
Aquí hay una demostración de CodePen con la mayor parte de esto preparado para usted. Le informará sobre todas las entradas y dispositivos de salida MIDI conectados a su sistema y le mostrará los mensajes MIDI entrantes a medida que ocurren:
ver la pluma
Prueba básica de WebMIDI por George Mandis (@georgemandis)
en CodePen.
Captura de pantalla de demostración de WebMIDI Test que destaca qué dispositivos de entrada y salida MIDI se encontraron
Captura de pantalla de demostración de WebMIDI Test que resalta los mensajes MIDI recibidos por uno de los dispositivos de entrada MIDI. En este caso, estamos viendo cuando se presiona una tecla en el teclado MIDI.
Captura de pantalla de demostración de WebMIDI Test que resalta los mensajes MIDI recibidos por uno de los dispositivos de entrada MIDI. En este caso, estamos viendo cuando se suelta una tecla del teclado MIDI.
Quizás te estés preguntando un par de cosas en este punto:
- Cuando estás escuchando el
midimessage
evento, ¿cómo hago cara o cruz de esa matriz de tres números enevent.data
? - ¿Por qué enviaste una matriz de tres números a tu dispositivo de salida MIDI y por qué enviaste esos números específicos?
La respuesta a ambas preguntas radica en explorar y comprender más a fondo cómo funciona el protocolo MIDI y los problemas para los que fue diseñado.
Anatomía de un mensaje MIDI
Cuando un controlador MIDI “habla” a otro dispositivo o computadora compatible con MIDI, están enviando y recibiendo mensajes MIDI entre sí. El protocolo subyacente a esta comunicación es bastante simple en la práctica pero un poco detallado cuando se explica. Aún así, lo intentaré.
Cada mensaje MIDI consta de tres bytes que consta de 8 bits (0-255). Representado en binario, un mensaje podría verse así:
10010000 | 00111100 | 01111111
Solo hay dos tipos de mensajes MIDI: Estado y datos. Cada mensaje constará de un byte de estado y dos bytes de datos.
El byte de estado está destinado a comunicar qué tipo de mensaje se está entregando, incluyendo cosas como:
- nota sobre
- Nota desactivada
- Cambio de inflexión de tono
- Cambio de control/modo
- Cambio de programa
…y muchos otros.
Si vienes a esto desde un fondo no musical, estos mensajes de estado pueden parecer un poco extraños, pero no te preocupes demasiado por eso. El byte de datos está destinado a proporcionar más información y contexto al estado. Para dar un ejemplo, si tengo un piano MIDI conectado a mi máquina y presiono una tecla para tocar una nota, enviaría un byte de estado de “Nota activada” acompañado de bytes de datos que indican qué nota toqué y quizás con qué fuerza la presioné. eso.
Un byte de estado siempre comenzará con el número 1
y bytes de datos con el número 0
.
1x0010000 | 0x0111100 | 0x1111111
^status ^data1 ^data2
Para bytes de datos que deja 7 bits para expresar los datos en ese byte. Eso nos da un rango entero de 0-127
.
Para los bytes de estado, los siguientes 3 bits después del primero describen el tipo de mensaje de estado, mientras que los 4 bits restantes describen el canal. Para desglosar nuestra representación binaria:
1x001x0000
Cómo se traduce esto en WebMIDI y JavaScript
Como habrás adivinado por los ejemplos de código anteriores, con la API WebMIDI, rara vez tenemos que lidiar con estas representaciones binarias directamente. Cuando enviamos y recibimos estos mensajes en JavaScript, simplemente usamos arreglos como este:
[144, 63, 127]
Si está trabajando con hardware musical existente, es útil tener una comprensión más profunda de cómo y por qué los mensajes están estructurados de la forma en que están. Es útil saber que recibir una 144
en su primer byte significa que se está activando una nota en el primer canal y que un 128
indicaría que se está apagando una nota.
Sin embargo, si estamos construyendo experiencias no musicales y creando nuestro propio hardware, ¡estos números se pueden reutilizar para representar lo que quieras!
¿Qué tipo de hardware puedo usar?
Cualquier dispositivo compatible con MIDI que se pueda conectar a su computadora también debe ser accesible a través de la API WebMIDI. Los dispositivos que pueden enviar datos MIDI a otro dispositivo compatible con MIDI a menudo se denominan controladores MIDI. Un ejemplo común sería un teclado simple estilo piano como este Korg nanoKey2:
Pero pueden variar ampliamente en apariencia y modos de interacción. Los botones son ciertamente comunes, pero también puede encontrar algunos que incorporen diales o pads sensibles a la presión como el AKAI LPD8:
Otros usan modos de interacción más abstractos e interesantes, incluido el mapeo de movimiento o respiración a señales MIDI. Por ejemplo, este controlador (The Hothand de Source Audio) utiliza tres acelerómetros para asignar gestos con las manos a mensajes MIDI:
Algunos controladores pueden enviar y recibir mensajes MIDI, lo que le permite tener una verdadera conversación bidireccional con el mundo físico. Novation Launchpad es un ejemplo clásico: se pueden presionar botones para enviar mensajes y también se pueden recibir mensajes para cambiar dinámicamente los colores en el dispositivo:
¿Puedo construir mi propio hardware?
Resulta que no son terriblemente difíciles de construir y puedes encontrar muchos controladores MIDI caseros en la naturaleza. Pueden volverse mucho más elaborados rápidamente. Algunos pueden ser francamente plátanos:
Plátanos conectados por cables a un Adafruit Circuit Playground programado para funcionar como un instrumento MIDI
Construir su propio controlador MIDI lo llevará un poco fuera del mundo de JavaScript, pero aun así es sorprendentemente accesible si está familiarizado o interesado en la plataforma Arduino. El Circuit Playground Classic de Adafruit es un excelente dispositivo para comenzar y puede encontrar un código de inicio para actualizar el dispositivo y convertirlo en un controlador MIDI multifacético aquí en GitHub.
Resumen
La API WebMIDI es una forma de entrada de baja barrera para que los desarrolladores front-end comiencen a experimentar con interacciones básicas de hardware y software. La implementación es relativamente sencilla en comparación con otras API web de hardware (como Bluetooth) y el estándar MIDI está bien documentado. Hay muchos dispositivos compatibles con MIDI existentes para experimentar o construir cosas geniales, y si realmente quieres hacer todo lo posible y comenzar a construir tu propio hardware MIDI personalizado para tu proyecto, también puedes hacerlo.
¡Sal y haz algo!