7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. MIDI

Introducción a Web MIDI

Scroll to top
Read Time: 8 mins

Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)

"¿Un tutorial sobre Web MIDI? ¿En 2016? Estás bromeando, ¿verdad?"

¡No! ¡No es lo que piensas! Para aquellos que hemos utilizado la web desde la década de 1990, la frase "Web MIDI" por lo general induce recuerdos de una época en que los sitios web reproducían automáticamente una versión electrónica de baja fidelidad de The Final Countdown mientras firmabas el libro del webmaster. Sin embargo, en 2016, Web MIDI, y específicamente la API Web MIDI, tiene mucho más potencial.

MIDI significa Interfaz Digital de Instrumentos Musicales. Es un protocolo que permite que los instrumentos musicales electrónicos, computadoras y otros dispositivos se comuniquen entre sí. Funciona enviando pequeños mensajes de un dispositivo a otro diciendo cosas como "nota 12 se acaba de presionar" o "nota 62 ya no se está presionando", pero en una abreviatura digital.

La API MIDI web utiliza este protocolo y te permite tomar un instrumento habilitado para MIDI como un teclado, conectarlo a tu ordenador y tener información enviada desde el teclado a tu navegador.

Actualmente, la API Web MIDI solo es compatible con Chrome y Opera, pero puedes seguir tu progreso en Firefox visitando esta página de seguimiento de errores.

Entonces, ¿por qué querríamos conectar un teclado a un navegador web? Bueno, no muchos músicos conocen tanto un teclado QWERTY como uno musical. Además, la gama de dispositivos musicales que admiten MIDI es enorme. Al conectar un dispositivo de entrada habilitado para MIDI a nuestro navegador, junto con el uso de la API Audio Web, podemos crear instrumentos musicales en la web.

¿Quieres tocar el piano? Simplemente conecta tu teclado y visita alguna página web que utilice estas tecnologías para reproducir el sonido de un piano. ¿Quieres un sonido diferente? Simplemente visita un sitio diferente.

Con suerte, puedes ver los beneficios de esta API, pero ¿cómo funciona realmente?

Acceso a un dispositivo MIDI

Primero queremos verificar si tu navegador es compatible con la API Web MIDI. Hacemos esto viendo si existe el método navigator.requestMIDIAccess. Este método solo se implementa en los navegadores que admiten la API.

Ahora que sabemos que existe el método, llamémoslo para solicitar el acceso a cualquier entrada MIDI que se le presente en el navegador.

navigator.requestMIDIAccess() devuelve una promesa, lo que significa que llamará a una función de éxito o una función de error dependiendo del resultado de la solicitud de acceso MIDI. Aquí le hemos dado los nombres de dos funciones que crearemos a continuación.

Como puedes ver, nuestra función de éxito toma un parámetro MIDI en forma de un objeto MIDIAccess. El objeto MIDIAccess es la clave para recibir datos midi. El objeto en sí proporciona una interfaz para cualquier dispositivo MIDI que hayas conectado. Las entradas representan cualquier dispositivo MIDI que hayas conectado a tu computadora. Tengo solo un teclado MIDI conectado, por lo que si tuviera que registrar midi.inputs.size, saldría "1".

Para obtener los datos de entrada de nuestro dispositivo, primero creamos una variable y le asignamos midi.inputs.values() así.

Una cosa importante a tener en cuenta es que el valor asignado a los inputs es un iterador. Un iterador es un objeto que sabe cómo acceder a sus propiedades de una en una, mientras realiza un seguimiento de la posición actual en la secuencia de iteración. Proporciona un método next() que te permite obtener el siguiente elemento de la secuencia. También tiene una propiedad done para hacernos saber si hemos iterado sobre todas las propiedades del objeto. Esto significa que podemos escribir bucles 'for' elegantes como este:

Lo que dice este bucle 'for' es:

  1. Crea una variable llamada input y asígnale la siguiente entrada. Debido a que aún no hemos iterado sobre ninguna entrada, esto devolverá la primera de nuestras entradas.
  2. Si tenemos una entrada y el valor hecho del iterador de entrada no es igual a verdadero, entonces continúa con el ciclo.
  3. Establece el input en la siguiente entrada de nuestro objeto iterador.

También notarás que dentro de este bucle 'for' estamos asignando una función al oyente onmidimessage de la entrada. Esta función se llamará cada vez que se reciba un evento MIDI desde el dispositivo representado por esa entrada. Creemos esa función:

Decodificación de datos MIDI

La parte del mensaje MIDI que nos interesa son sus datos; ¿qué tipo de evento MIDI se envió? ¿Qué tecla del teclado se presionó?

Si sigues este tutorial, verás que cuando presiones una tecla en tu teclado, el navegador registrará algo como [144, 61, 95] en la consola. Y cuando quitas el dedo de la tecla, el navegador volverá a registrar algo ligeramente diferente, como [128, 61, 0].

Esta matriz se puede desglosar así. El primer elemento es el tipo de evento MIDI. Los mensajes MIDI pueden contener un número bastante pequeño de eventos, y cada evento tiene un número correspondiente. En nuestro caso, 144 se le asigna a un mensaje noteOn, lo que indica que se presionó una tecla, mientras que 128 es un mensaje noteOff, diciéndonos que la tecla ya no se está presionando. Para obtener una lista completa de posibles tipos de eventos MIDI, consulta la lista de mensajes en la especificación MIDI.

El segundo valor de la matriz representa qué tecla del teclado se presionó. A cada nota de un teclado se le asigna un número del 0 al 127. En el ejemplo anterior, presioné la tecla 61, que al usar esta tabla de búsqueda podemos ver que era C#.

El tercer y último valor de la matriz representa la velocidad, básicamente la velocidad con la que se presionó la tecla. Esto se puede utilizar para imitar tocar un piano donde las teclas se pueden tocar suavemente o presionar rápido y fuerte.

Ahora que sabemos qué número de tecla se está presionando o soltando, vamos a convertirlo en algo útil. Conectemos la API Web MIDI a la API Audio Web. Si no estás familiarizado con la API Audio Web, consulta mi serie de tutoriales sobre ese tema.

Creación de un instrumento web

Convirtamos nuestro navegador en un mini sintetizador. Queremos crear un oscilador que genere la frecuencia de la nota presionada, por lo que necesitaremos convertir el número de la nota MIDI a su frecuencia relevante. Por suerte, nuestro buen amigo Wikipedia nos da un pequeño algoritmo para hacer precisamente esto. Así es como se ve en formato JavaScript:

Dale una nota y recupera la frecuencia. Usemos esto en nuestra función onMIDIMessage.

A continuación queremos tocar una nota de esta frecuencia si el mensaje MIDI es un mensaje noteOn.

Probablemente comprenderás la primera parte de esta declaración if con bastante facilidad. Estamos comprobando que el tipo de mensaje es 144, que es el mensaje noteOn.

Pero, ¿y la segunda parte? Bueno, algunos dispositivos MIDI, en lugar de enviar un mensaje noteOff, enviarán un mensaje noteOn con velocidad cero, por lo que estamos verificando que el mensaje tenga una velocidad mayor a cero.

Ya que tratamos noteOn, escribiremos algo similar para noteOff. El valor del mensaje NoteOff es 128, por lo que debemos verificar no solo ese valor, sino también si su velocidad fue cero para abarcar la situación que acabo de mencionar.

Todo lo que tenemos que hacer ahora es completar las funciones startNote y stopNote. Esto es trabajo de la API Audio Web, y por lo tanto está tristemente fuera del alcance de este tutorial, pero si conoces la API, el siguiente código te resultará muy obvio.

Si no es así, revisa mi serie en la API Audio Web, que incluye cómo crear un sintetizador. El código de ese tutorial es similar a lo que hice aquí, así que sería el lugar perfecto para aplicar lo que aprendiste aquí.

¿Qué sigue?

Recuerda, noteOn y noteOff son solo dos de los tipos de mensajes disponibles para nosotros, y un teclado MIDI es solo uno de los muchos, muchos tipos de dispositivos MIDI. Ni siquiera tienes que usar MIDI para hacer algo musical. ¿Un juego HTML5 que juegas con una trompeta MIDI? Suena como me gusta exactamente.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.