¡MIDI en el Navegador... ¡Vamos a Rockear la Web!

Rate this content
Bookmark

Si tienes un instrumento de música electrónica fabricado en las últimas 3 décadas, es muy probable que admita el protocolo MIDI. ¿Qué tal si te digo que es posible interactuar con tu keytar o máquina de ritmos directamente desde tu amado navegador? Te volverías loco, ¿verdad? Bueno, prepárate para hacerlo...

Con soporte incorporado en Chrome, Firefox y Opera, esta posibilidad ahora es una realidad. Esta charla presentará a la audiencia la API Web MIDI y mi propia biblioteca WEBMIDI.js para que puedas empezar a rockear rápidamente.

¡Desarrolladores web, preparen sus sintetizadores!

28 min
16 Jun, 2022

Video Summary and Transcription

MIDI es un protocolo de comunicación versátil que se extiende más allá de la música y abre emocionantes posibilidades. La API Web MIDI permite el acceso remoto a sintetizadores y módulos de sonido desde navegadores web, lo que permite diversos proyectos como sistemas de educación musical e instrumentos basados en audio web. Los desarrolladores pueden conectar y utilizar dispositivos MIDI fácilmente, y la API Web MIDI proporciona mensajes MIDI sin semántica. La biblioteca WebMidi.js simplifica el trabajo con la API Web MIDI y ofrece una interfaz fácil de usar para músicos y desarrolladores web. MIDI en la web ha generado un gran interés, con potencial de crecimiento comercial y posibilidades infinitas para desarrolladores web.

Available in English

1. Introducción a MIDI en la Web

Short description:

Estoy aquí para hablarles sobre MIDI en la web. MIDI es un protocolo de comunicación que va más allá de la música. Se puede utilizar para controlar diversos dispositivos y abre increíbles posibilidades. MIDI es un protocolo ligero y eficiente que ha resistido la prueba del tiempo.

Gracias por estar aquí tan tarde después de este largo, largo día en esta habitación tan calurosa, pero seguirá haciendo calor. También saludo a las personas que están en casa. Me alegra que estén aquí mientras están allá, así que eso es bueno. Sí, mi nombre es Jean-Philippe Cote y estoy aquí para hablarles sobre MIDI en la web. Ahora, bien, porque no quiero arruinar esto. ¿Tengo sonido, verdad? Dado que esto no es una conferencia de música, algunos de ustedes pueden preguntarse qué es realmente MIDI o no, no lo sé. Pero para muchas personas, me temo que MIDI es esta tecnología obsoleta de los años 80. Es como... Es la razón de los horribles ripoffs de pistas como esta. Eso es increíble. Probablemente todos hayan escuchado cosas como esta antes, y solo para que quede claro, esta charla no tratará sobre esos estúpidos archivos MIDI estándar o archivos de karaoke. Así que tachémoslo ahora mismo. Siempre pueden guardarlos para la fiesta posterior si quieren, pero esta charla no tratará sobre eso. La charla tratará sobre la interacción con dispositivos compatibles con MIDI desde su navegador web. Así que estoy hablando de sintetizadores, máquinas de ritmo, controladores de viento, percusiones e incluso el increíble keytar, mi favorito. Aunque el acrónimo significa Interfaz Digital de Instrumento Musical, MIDI se extiende mucho más allá de la música. El protocolo se puede utilizar para controlar la iluminación escénica, la pirotecnia y se puede encontrar en robótica, control de atracciones de parques temáticos, y todo tipo de otros dispositivos y contactos. Por lo tanto, tener acceso a MIDI desde el navegador realmente abre increíbles posibilidades. Ahora, para que estemos en la misma página, MIDI es un protocolo de comunicación. No hay audio involucrado. No se transfiere audio. El único data que se transfiere son solo números, que identifican las notas que se están tocando o deteniendo, y con qué intensidad se tocaron. Obviamente, el protocolo también tiene mensajes para cambios de tono, cambios de programa, sincronización de tiempo, etc. Pero es un protocolo muy ligero y eficiente que se puede utilizar en dispositivos con capacidades de procesamiento realmente modestas. Piensen en los Arduinos, por ejemplo. Se puede hacer MIDI en un Arduino. MIDI ha resistido la prueba del tiempo y está integrado en prácticamente todas las piezas de música electrónica, hardware y software, fabricadas en los últimos 35 años. Esto es un largo camino para la tecnología. El estándar MIDI central se lanzó en 1983 y prácticamente ha permanecido igual desde entonces. 37 años después, en 2020, se lanzó el estándar MIDI 2.0 y se basa en el

2. Web MIDI API y Instrumentos de Software

Short description:

La API Web MIDI, introducida en 2012, permite el acceso remoto a sintetizadores y módulos de sonido desde navegadores web. La mayoría de los navegadores admiten la API, excepto Apple. Los desarrolladores pueden crear varios proyectos utilizando la API, como páginas web para editar configuraciones de pedales, sistemas de educación musical, herramientas de enseñanza de teoría musical e instrumentos basados en audio web. Ahora, vamos a experimentar un instrumento de software utilizando el WebSynths Microtunnel de Mitch Wells.

original. No lo reemplaza. Es como si agregara una comunicación bidireccional y muchas otras cosas. Pero en nuestro caso, el año que realmente es el más interesante, supongo, es 2012. Y la razón es porque este es el año de publicación de la API Web MIDI. En ese momento, midi.org promocionó la API Web MIDI como el avance más significativo de MIDI desde MIDI en sí mismo. Así que ahí lo tienen. Pero en realidad, fue algo bastante grande. De repente, todos tus sintetizadores y módulos de sonidomodules y bibliotecarios y editores de parches y lo que sea, todo podía ser accedido de forma remota desde el navegador. Teóricamente. Obviamente, la especificación se lanzó en 2012, pero tuvimos que esperar unos años más para la primera implementación, y esto ocurrió en 2015 con Chrome 43. Hasta el día de hoy, prácticamente todos los navegadores lo admiten, excepto una excepción notable, que es Apple, y, como probablemente saben, Apple ha decidido bloquear o no admitir un montón de APIs debido a preocupaciones de huellas digitales. Pero, hey, prácticamente todos los demás, como pueden ver, ya lo admiten. Por lo tanto, esto representa aproximadamente el 87% del tráfico de navegadores de escritorio, que es realmente el objetivo, bueno, el objetivo principal de esta API. Obviamente, se puede hacer MIDI en dispositivos portátiles, pero creo que todavía el objetivo principal son los navegadores de escritorio. Entonces, la pregunta aquí es, ¿estarás entre esta primera ola de desarrolladores que crean nuevos proyectos increíbles con esta API? ¿Qué podemos construir con ella? Bueno, puedes hacer como Francois Georgi y construir una pequeña página web para editar la configuración de tu pedal de reverberación. ¿Por qué no? O puedes ir un poco más lejos y construir este sistema de educación musical en línea, considerando la pandemia que acabamos de atravesar, esto tiene sentido ahora. O tal vez lo que quieras enseñar es teoría musical. Y esto es lo que hace el proyecto Chromatone. ¿O eres solo un equipo de personas locas y quieres construir tu propio jamming, algo así como codificación en vivo? Bueno, ya se ha hecho antes. Obviamente, también puedes crear y usar la API WebMedia para controlar tus propios instrumentos basados en audio web. Ya existen varios instrumentos de este tipo pero no tantos. Y nuevamente, probablemente la idea aquí es que podría ser un buen momento para que ustedes se unan y construyan esos instrumentos, construyan esas herramientas para la próxima ola de música MIDI en línea. Entonces, ¿cuál es la experiencia de un usuario que quiere probar uno de estos instrumentos de software? Para demostrar eso, voy a usar este increíble sintetizador que se llama simplemente WebSynths Microtunnel de Mitch Wells. Es uno de los primeros. Es realmente bueno. Es basado en audio web, por lo que todos los sonidos que escucharán provienen del audio web y simplemente lo voy a controlar desde mi pequeño controlador Akai. Ahora, hemos tenido algunos problemas con el Wi-Fi. Así que creo que voy a seguir usando

3. Conexión y Uso de Dispositivos MIDI

Short description:

Vamos a conectar el dispositivo MIDI y verificar si funciona. Desde la perspectiva del usuario, solo necesitas enchufar el dispositivo. La pestaña MIDI muestra el tráfico cuando se presionan los botones. También es posible cargar un parche. ¡Eso es todo!

Tengo mi propio teléfono aquí para estar seguro. Vamos a conectar a este chico y esto debería funcionar, con suerte. Muy bien. Cruzando los dedos. Vamos, vamos, vamos. Sí. Muy bien. Muy bien. De acuerdo. Así es, esto es... espera, pantalla equivocada, oh, mierda. Espera. ¿Dónde están ustedes? Aquí. De acuerdo. Disculpen por eso. No me di cuenta de que no veían nada. Muy bien. Entonces, esto es en vivo. Esto es hasta ahora. Y básicamente, desde la perspectiva del usuario, tú enchufas tu dispositivo. Básicamente, la mayoría de los dispositivos MIDI son MIDI a través de USB en 2020. Así que no hay mucho más que hacer que simplemente enchufarlo. Y puedes ver en la pequeña pestaña MIDI aquí, si presiono algunos botones, sí, tengo algo de tráfico allí. Así que realmente lo reconoció y está recibiendo algunos data. Voy a cargar un parche porque puedes guardar y cargar parches como archivos JSON. Aquí estamos. ¿Funciona eso? Sí. Muy bien. Así es genial. Y eso es todo. Esto es desde la perspectiva del usuario. Bueno, aplausos para

4. Uso de la API Web MIDI

Short description:

Desde la perspectiva del usuario, vas a un sitio web, conectas tu dispositivo y tocas. Dependiendo del desarrollador, puedes guardar, compartir parches y tocar con otros. Desde la perspectiva del desarrollador, el uso de la API Web MIDI requiere solicitar acceso MIDI, solicitar autorización al usuario y acceder a los dispositivos disponibles. La API no proporciona semántica para los mensajes MIDI, por lo que los desarrolladores reciben mensajes MIDI sin procesar.

ese tipo. Él es el genio. Yo solo estoy presumiendo aquí. Pero desde la perspectiva del usuario, esto es lo que significa. Vas a un sitio web, conectas tu dispositivo y boom, tocas. Y eso es todo. Y dependiendo de lo que haya hecho el desarrollador, eventualmente puedes guardar y compartir parches, tocar con otras personas, y así sucesivamente. Esto me lleva de vuelta a nosotros, en realidad. Desde la perspectiva del desarrollador, ¿cómo se ve? Así que voy a ir a través del ejemplo mínimo de lo que se requeriría de un desarrollador para usar la API Web MIDI. Básicamente, lo que vamos a hacer es que cada vez que presione una nota en el teclado, voy a cambiar algo en la página. Veamos el color de fondo. Algo muy simple. Pero solo para que podamos seguir adelante. Entonces, lo primero es buscar esta función de solicitud de acceso a MIDI. Si está presente, tenemos soporte para MIDI. Si no, bueno, seguimos adelante. No hay forma de hacer nada más. Entonces una vez que sabemos que tenemos soporte para MIDI, podemos llamar a esta función de solicitud de acceso a MIDI, y aquí es cuando obtenemos la solicitud. Se le pide al usuario que autorice. Si el usuario niega el acceso, entonces no podemos hacer nada más. Pero si concede acceso, obviamente, se llamará a este método que está en la cláusula then. Y la función de acceso a MIDI en este caso recibe un objeto de interfaz de acceso a MIDI, y este objeto te permite listar los dispositivos disponibles y acceder a ellos. Así que eso es bastante sencillo. En este caso, lo que estoy haciendo es simplemente recorrerlos todos. Es terrible y mirar el nombre del dispositivo y ver si coincide con el dispositivo que quiero usar. Y si lo hace, puedo asignar una función a la propiedad on-MIDI-message. Y esta función se llamará cada vez que llegue un nuevo mensaje MIDI desde ese dispositivo. Hasta ahora, todo bien, cosas simples. Entonces, digamos que presiono una nota en mi teclado o un pad o una batería electrónica o cualquier instrumento que estés usando, llega un mensaje MIDI. Ahora, es un poco más complicado porque resulta que la API Web MIDI no proporciona ninguna semántica sobre el MIDI web básico, los mensajes MIDI básicos. Entonces, lo que obtenemos en la propiedad E.data

5. Analizando Mensajes MIDI

Short description:

Veamos más de cerca un mensaje MIDI básico. Consiste en tres bytes, siendo el segundo y tercer byte el número de nota y la velocidad. El primer byte contiene el tipo de mensaje y el canal MIDI. Al examinar el primer byte, podemos determinar el tipo de mensaje, como nota encendida, consultando la especificación MIDI. El segundo byte representa el número de nota, que se puede cruzar con la notación científica de tonos para identificar notas específicas.

es el mensaje MIDI crudo real en una matriz uint8. Así que voy a hacer una pequeña pausa aquí y vamos a ver un mensaje MIDI básico. Se ve así, generalmente consta de tres bytes. El byte número 2 y número 3 representan respectivamente la nota y la velocidad entre cero y 127. No está mal. El primer byte se divide en dos partes. La primera parte es el tipo de mensaje, que puede ser nota encendida cuando se toca la nota, nota apagada cuando se suelta, pero también puede ser una serie de otras cosas, cambio de programa, cambio de tono banda, señal, lo que sea. Puede ser varias cosas. Y la segunda parte, como la segunda parte de 4 bits de este primer byte, es el canal MIDI. Así que hay 16 canales en el sistema MIDI y ese segundo número lo identificaría. No está mal. Quiero decir, estamos adentrándonos en lo binario, pero aún lo estamos manejando. Entonces, lo que esto significa para nosotros es que primero debemos mirar el primer byte de ese data. Y luego lo desplazamos a la derecha en cuatro para obtener esta primera parte. Y luego tenemos que averiguar qué número es ese. Y si resulta ser 9, tenemos suerte porque 9 significa nota encendida. ¿Cómo diablos lo sabíamos eso? Bueno, ya sabes, tienes que leer las especificaciones. Oh, Jesús. Bueno, estas son del sitio media.org. Y si buscas allí, un valor hexadecimal de 9, 0, en realidad significa un mensaje de nota encendida en el canal 1. Obviamente, los canales se numeran del 1 al 16 cuando hablamos, pero en realidad son del 0 al 15. De todos modos, al menos acertamos eso. Entonces, volvemos y luego verificamos el segundo byte de data. Y el segundo byte es como todos recuerdan, sí, lo sé. Es el número de nota. Entonces, ¿qué es este 60 allí? Bueno, digamos que quiero verificar si es el do central. Si te gusta la música, como el do central en el teclado, esto es C4, depende de las plataformas, generalmente es C4, y resulta que es el número de nota 60. Y no lo sabrías mirando la especificación MIDI, porque no lo dice, lo sabrías mirando el

6. Usando la biblioteca WebMidi.js

Short description:

Esta fue mi primera experiencia usando la API WebMIDI, y fue un poco decepcionante. La API básica no proporciona ninguna semántica sobre los mensajes en bruto, lo que dificulta su uso. Por eso creé la biblioteca WebMidi.js, que ofrece una interfaz fácil de usar para desarrolladores web y músicos. Con la biblioteca, puedes habilitar fácilmente el soporte de MIDI, obtener el dispositivo deseado y agregar oyentes para eventos específicos como la nota encendida. La biblioteca simplifica el proceso y te permite centrarte en crear música.

Especificación MIDI y cruzarla con la notación científica de tonos. Ahí lo tienes. Cosas fáciles, y luego cambias el color de fondo. Entonces, esta fue mi primera experiencia usando esta API. En esta etapa, estaba un poco desanimado. Tal vez tú también lo estés. ¿Realmente tendremos que hacer aritmética binaria y buscar hojas de especificaciones solo para react ante una nota que se está tocando? Esto es un poco molesto. La respuesta es sí, si te quedas con la API básica de WebMIDI. Como dije antes, no proporciona ninguna semántica sobre los mensajes en bruto. Entonces, para ser justos, la API de WebMIDI es como muchas otras API en ese sentido. Si miras WebGL, por ejemplo, no es exactamente fácil de usar. Por eso tenemos bibliotecas como Babylon o 3JS o bibliotecas similares. Entonces, básicamente, esto es lo que me impulsó a crear mi biblioteca WebMidi.js. La idea era que los desarrolladores web, pero también los músicos que también programan, pudieran usar MIDI en la web con algún tipo de interfaz o API fácil de usar. Entonces, si volvemos al ejemplo anterior pero usando la biblioteca, esto es cómo se vería. No necesariamente es mucho más corto, pero creo que tiene un poco más de sentido. Primero, importamos la biblioteca, eso es obvio. Lo siento. Y luego llamamos al método enable de la biblioteca que hace dos cosas, verifica si tenemos soporte para MIDI y solicita autorización. Obviamente, lo mismo que antes, si un usuario niega la autorización, entonces hemos terminado. Pero si un usuario nos autoriza a acceder al subsistema MIDI, entonces se llama a la función on enabled. Esta función on enabled básicamente obtiene el dispositivo que queremos usar. Entonces, obtenemos la entrada por nombre simplemente como dice, solo recuperamos la entrada y especificamos el nombre del dispositivo que queremos usar. Y a partir de ahí, podemos agregar un oyente para el evento de nota encendida. Entonces, en lugar de tener que buscar qué número coincide con qué, simplemente obtenemos un montón de eventos predefinidos con los que trabajar. Y cada vez que se desencadena un evento de nota encendida, se llama a la función on-note-on. Y en este caso, esta función recibe un evento, y este evento tiene mucha información. Una propiedad es la propiedad de nota que tiene una subpropiedad de identificador, que es simplemente la nota seguida de la octava. Entonces, si quiero C4, simplemente pido C4. Y luego podemos cambiar el color de fondo. Eso está en el resumen

7. Características de la biblioteca y demostración

Short description:

La biblioteca facilita recibir entradas y enviar mensajes a dispositivos externos. Tiene funciones de coincidencia para todas las capacidades de envío de MIDI, eliminando la necesidad de consultar hojas de especificaciones. WebMD envía eventos para mensajes MIDI salientes comúnmente utilizados a nivel de dispositivo o canal. Aunque no podemos cubrir todo en esta charla, aún podemos hacer una pequeña demostración.

lo que la biblioteca hace por nosotros. Obviamente, hay muchas más cosas que hace , pero básicamente la idea es que la biblioteca facilite recibir entradas y también enviar mensajes a dispositivos externos. En cuanto a los mensajes salientes, la biblioteca tiene una función de coincidencia para prácticamente todas las capacidades de envío de MIDI. Esto te permite enviar un mensaje a un puerto de salida sin tener que consultar una hoja de especificaciones. Créeme, eso no es divertido. En la otra dirección, WebMD envía eventos para todos los mensajes MIDI salientes comúnmente utilizados. Estos eventos se envían ya sea a nivel de dispositivo o a nivel de canal dependiendo del tipo de mensajes. Obviamente, no hay forma de que podamos revisar todo

8. Using HTML Page and Modules

Short description:

Esta es la página HTML que estoy utilizando con cuatro módulos diferentes: SVG inject, TinyTween, Tone.js y mi propia reunión web. SVG inject permite la manipulación en tiempo real de un archivo SVG. TinyTween es una biblioteca de interpolación. Tone.js es una biblioteca de audio web y creador de instrumentos. El último módulo es mi propia reunión web. Ahora veamos el código y el archivo SVG.

todo eso en una charla tan corta. Pero aún podemos hacer una pequeña demostración. Muy bien. Vamos a rezar para que los dioses de la demostración nos ayuden hoy. Si puedo encontrar mi cursor, ¿dónde está? Oh, aquí estamos. Y no ves nada, ¿verdad? Aquí. De acuerdo. Lo tengo. Muy bien. Esta es la página HTML que voy a utilizar. Como puedes ver, hay cuatro módulos diferentes que se están utilizando. SVG inject, que quizás conozcas, simplemente se utilizará porque tengo un archivo SVG para ese dispositivo y quiero manipularlo en tiempo real. Quiero cambiar los colores de los pads que voy a tocar. Así que básicamente, SVG inject simplemente toma el SVG e lo inserta en el DOM para que podamos manipularlo. Así que eso es solo un uso secundario allí. TinyTween, lo explicaré más tarde, es solo una biblioteca de interpolación. Tone.js, que quizás ya hayas oído hablar, es una increíble biblioteca de audio web, pero también es una forma de crear instrumentos como sintetizadores, samplers y cosas así. Así que si quieres hacer música en la web, esta es realmente una que debes tener en cuenta. Y obviamente, el último es mi propia reunión web. Algunos estilos, nada extravagante. Este es nuestro código que vamos a ver en un segundo. Básicamente, como dije, este es el SVG de mi teclado, que vamos a manipular mientras jugamos con él. Si miramos el código en sí, en realidad vamos a ver la página. Solo para mostrarte cómo se ve por ahora. Oh sí, cierto. Tú probablemente sabes que no podemos reproducir sonidos a menos que, bueno, necesitamos un gesto del usuario antes de que se habilite un sonido. Así que esa es la razón de eso. Pero esto no tiene nada que ver con MIDI, simplemente la mayoría de los navegadores lo implementan de esa manera. Este es el archivo SVG que vamos a

9. Using Tone.js to Create a Sampler Object

Short description:

Aquí es donde usamos Tone como una biblioteca para crear un objeto de sampler. Un sampler es un dispositivo que reproduce sonidos pregrabados cuando golpeas un pad o una tecla. Mapeamos ocho sonidos a los ocho pads del dispositivo, con notas y octavas correspondientes. Habilitamos el MIDI web, obtenemos el dispositivo deseado y agregamos un listener para el evento de nota activada. Cuando se activa un evento de nota activada, reproducimos la nota correspondiente utilizando el ataque del objeto de sampler. También hacemos parpadear los pads correspondientes en el SVG para obtener retroalimentación visual. Esto se logra creando un objeto de mapeo y ajustando la opacidad de los pads.

simplemente manipular más adelante. Muy bien. Este es el código. Cosas súper simples, creo. Esto es solo el listener para el clic. Cuando hay un clic, nos movemos aquí, eliminamos la ventana emergente, mostramos el SVG y eliminamos el listener. Así que cosas aburridas. Muy bien. Ahora, comienza lo divertido. Aquí es donde usamos Tone como biblioteca para crear un objeto de sampler. En términos musicales, un sampler es generalmente un dispositivo que cuando golpeas un pad o una tecla reproduce un sonido pregrabado. Eso es solo un poco. En este caso, tengo ocho sonidos que se asignan a los ocho pads del dispositivo, y además de eso, tengo la nota y la octava que coinciden con cada sonido. Es bastante simple de hacer. Hay un pequeño método canalizable allí que al final simplemente envía el audio a la salida principal porque, obviamente, queremos escuchar algo. Tone se puede usar en una configuración en vivo como la que voy a hacer hoy, pero se usa como reproducción o secuenciador, y, por defecto, tiene un tiempo de espera un poco largo cuando intentas tocar en vivo, así que lo pongo en cero para que sea más receptivo, pero esa es la única razón por la que está ahí. Y luego estamos listos para habilitar el MIDI web y, nuevamente, si el usuario lo autoriza, activamos esto en la función MIDI lista preparada. Ahora, mi dispositivo se llama MPK Mini 3, así es como lo informa el subsistema MIDI, así que si obtengo la entrada por nombre, simplemente paso ese nombre. Obviamente, puedes listar las entradas y salidas bastante fácilmente registrando web MIDI dot inputs o web MIDI dot outputs. Es fácil de obtener. Así que obtengo el dispositivo. Coloco eso en una constante llamada synth, y luego en ese dispositivo, agrego un listener para el evento de nota activada como vimos anteriormente. Este método aquí se llamará cada vez que se active un evento de nota activada, no cada vez que se reciba un mensaje MIDI, sino solo cuando se reciba un mensaje de nota activada. En este caso, lo que estoy haciendo es usar el ataque del objeto de sampler, lo que significa reproducir, reproducir una nota, y simplemente necesitas pasarle la nota que quieres tocar en paréntesis. En este caso, estoy usando el identificador de nota que vimos antes. Entonces, básicamente, todo esto coincide bastante bien. Ahora, esto va a reproducir un sonido real. A continuación, voy a hacer parpadear los pads correspondientes en el SVG mientras estoy tocando para obtener una retroalimentación visual. Y en este caso, simplemente creé un pequeño objeto de mapeo allí, así que tengo ocho pads y simplemente digo, bueno, E2 coincide con el pad uno y luego F2 coincide con el pad dos, y así sucesivamente. Y luego, estúpidamente, simplemente llevo la opacidad a uno porque actualmente está transparente. Así que eso es todo. Y una pequeña biblioteca de interpolación allí es solo porque soy elegante y quiero un pequeño desvanecimiento para la opacidad.

10. WebMidi.js y el Interés Comercial

Short description:

Entonces, veamos esto. Si quieres probar Web MIDI, simplemente ve al sitio web. WebMidi.js es un proyecto apasionante para mí. Muchas gracias por esto. ¿Hay algún interés comercial en WebMidi.js? Realmente deseo que las grandes empresas se interesen. Aún estamos en el comienzo, pero hay mucho espacio para crecer. Necesitaremos etiquetarlos en Twitter cuando les mostremos.

Entonces, esa es la única razón por la que está ahí. Entonces, veamos esto. En realidad, no voy a mantener ambos. Solo mantengamos uno. Muy bien. ¿Esto funciona? Hagámoslo. Ahí lo tienes. Cosas fáciles. Cosas fáciles. Entonces, eso fue lo esencial. Si quieres probar Web MIDI, simplemente ve al sitio web. Tiene una sección de inicio rápido y podrás tocar en poco tiempo. WebMidi.js es un proyecto apasionante para mí. Simplemente sucedió que se volvió popular, pero definitivamente no lo hago por el dinero. Lo hago por la fama. Entonces, si construyes cosas increíbles con esto, avísame o compártelo en la página de discusiones de GitHub. Muchas gracias por esto. Gracias. Muchas gracias. Fue muy divertido verlo. Me preguntaba, ¿es el paquete WebMidi.js en absoluto? ¿Hay algún interés comercial en ello? ¿O es principalmente para personas que crean cosas como esta? Lo cual es genial. No tengo nada en contra. Pero, ¿también hay algún interés comercial en ello?

Bueno, realmente deseo que las grandes empresas como Yamaha y Roland y todas esas empresas realmente muestren algún tipo de interés en eso. No estoy seguro de por qué no están tan interesadas hasta ahora. Quiero decir, están un poco presentes, pero no sé. Aún estamos en el comienzo. Por eso decía que si ustedes quieren subirse a ese tren y desarrollar estos proyectos, creo que hay mucho espacio para crecer allí. Pero las grandes compañías, creo que aún están un poco tímidas. Así que necesitarán convencerlas, lo cual estoy tratando de hacer a mi manera. Bueno, entonces necesitamos etiquetarlos en Twitter cuando se los mostremos. Sí, sí, exactamente, exactamente.

11. Interés en MIDI en la Web

Short description:

En la escena Chiptune y entre varias personas, hay mucho interés en utilizar MIDI en la web. Ofrece una combinación perfecta para los desarrolladores web que desean mantenerse en el ámbito web. Hay infinitas posibilidades, incluyendo visualizaciones en vivo. Se presentó una demostración genial y las conversaciones sobre medios web pueden continuar en el stand del orador. Además, hay entusiasmo por la primera proyección del nuevo documental de Ofrezen sobre Svelte en el escenario principal.

Y me imagino que también en la escena Chiptune, ¿hay mucho interés en esto, verdad? Sí, sí, totalmente. Quiero decir, hay interés de varias personas. Chiptune es un ejemplo, esto es como una configuración de DJ VJ y poder controlar nuestras cosas, pero ella es una desarrolladora web y solo quiere mantenerse en el ámbito web. Y esto es la combinación perfecta. Así que sí, hay un montón de cosas que se pueden hacer con esto.

Sí, y también visualizaciones en vivo, hombre. Sí, totalmente. Bueno, básicamente ya lo hiciste. Bueno, puedes llevarlo al extremo. Sí, exactamente. Pero la demostración fue realmente genial. Así que muchas gracias. Si alguien quiere continuar la conversación sobre medios web, pueden ir al stand del orador. Y ahora mismo en el escenario principal, vamos a tener la primera proyección del nuevo documental de Ofrezen sobre Svelte. Así que estoy realmente emocionado por eso también. Un gran aplauso para Jean-Philippe. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Introduction to Domain Driven Design- What is DDD?- Key principles of DDD- Benefits of using DDD in web application developmentDomain Modeling in Vue 3 Applications- How to design and implement domain models in Vue 3- Strategies for integrating domain logic with Vue's reactive data model and component-based architectureBest Practices for Implementing DDD in Vue 3- Strategies for organizing code in a way that follows DDD principles- Techniques for reducing coupling between domain and application logic- Tips for testing and debugging domain logic in Vue 3 applications
JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
High quality video encoding in browsers have traditionally been slow, low-quality and did not allow much customisation. This is because browsers never had a native way to encode videos leveraging hardware acceleration. In this talk, I’ll be going over the secrets of creating high-quality videos in-browsers efficiently with the power of WebCodecs and WebAssembly. From video containers to muxing, audio and beyond, this talk will give you everything you need to render your videos in browsers today!
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
JSNation 2022JSNation 2022
23 min
The Next Wave of Web Frameworks is BYOJS
Web application development has had many shifts over the lifetime of the web. From server-side applications with a sprinkle of JavaScript to Single Page Applications built entirely with JavaScript. Now we’re heading back to where many new web frameworks build for static first, with JavaScript added as needed. This talk covers building web applications with JavaScript through the lens of Astro, a static site generator where the choice of JavaScript framework is uniquely yours.

Workshops on related topic

React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
React Summit 2022React Summit 2022
51 min
Build Web3 apps with React
WorkshopFree
The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”
Learn more about the Hyperverse here.
We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.
React Advanced Conference 2021React Advanced Conference 2021
159 min
Building Modern CMS Driven Web Applications with Strapi the OSS Headless CMS
Workshop
In this workshop, we'll build out a fully functional website and integrated blog with Next.js and Strapi.

Table of contents:
- An introduction to Headless CMS and supported architectures
- Getting up and Running with Strapi and Next.js
- Integrating Blog functionality into a Next.js app
- Deploying your Next.js and Strapi Apps Bonus
- Implementing content previews with Next.js

Prerequisites:Basic React Knowledge Basic knowledge of Node.js and npm Basic Web Concepts.