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!
This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.
FAQ
MIDI significa Interfaz Digital de Instrumento Musical y es un protocolo de comunicación que permite controlar instrumentos musicales, iluminación escénica, pirotecnia y otros dispositivos con solo números que identifican notas, intensidad y otros comandos, sin transmitir audio.
La API Web MIDI permite interactuar con dispositivos compatibles con MIDI directamente desde un navegador web, facilitando el control de sintetizadores, máquinas de ritmo, controladores de viento y otros instrumentos. Esto abre nuevas oportunidades para la creación y manipulación de música y otros controles en tiempo real a través de la web.
El estándar MIDI 2.0 se lanzó en 2020. Añade comunicación bidireccional y mejora la funcionalidad del protocolo sin reemplazar al estándar MIDI original, que fue lanzado en 1983.
Se puede acceder y manipular dispositivos MIDI desde un navegador mediante la API Web MIDI, que permite la comunicación directa con dispositivos MIDI. Los usuarios pueden conectar su dispositivo MIDI a través de USB y utilizar la API para enviar y recibir mensajes MIDI.
Hasta la fecha, la mayoría de los navegadores de escritorio soportan la API Web MIDI, con la excepción notable de los navegadores desarrollados por Apple, que no la soportan debido a preocupaciones sobre privacidad y huellas digitales.
WebMidi.js es una biblioteca que simplifica el uso de la API Web MIDI. Facilita el envío y recepción de mensajes MIDI, permitiendo a los desarrolladores y músicos interactuar más fácilmente con dispositivos MIDI a través de interfaces web sin tener que manejar directamente los mensajes MIDI básicos.
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.
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.
This Talk introduces real demos using HTML, CSS, and JavaScript to showcase new or underutilized browser APIs, with ship scores provided for each API. The dialogue element allows for the creation of modals with minimal JavaScript and is supported by 96% of browsers. The web animations API is a simple and well-supported solution for creating animations, while the view transitions API offers easy animation workarounds without CSS. The scroll snap API allows for swipers without JavaScript, providing a smooth scrolling experience.
Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.
This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.
This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.
Today's Talk introduces the webHID API, which allows developers to control real devices from the browser via USB. The HID interface, including keyboards, mice, and gamepads, is explored. The Talk covers device enumeration, input reports, feature reports, and output reports. The use of HID in the browser, especially in Chrome, is highlighted. Various demos showcase working with different devices, including a DualShock controller, microphone, gamepad, and Stream Deck drum pad. The Talk concludes with recommendations and resources for further exploration.
React's web-based tools allow for independent learning. Dazzone, a sports streaming service, faces challenges with low memory and CPU targets. Measuring, analyzing, and fixing performance issues is crucial. Virtualization improves rendering efficiency and performance. The application is now much faster with significantly less jank.
A menudo vemos que JavaScript daña la accesibilidad de un sitio web. En esta masterclass, aprenderás cómo evitar errores comunes y cómo utilizar JS a tu favor para mejorar la accesibilidad de tus aplicaciones web. En esta masterclass exploraremos múltiples ejemplos del mundo real con problemas de accesibilidad, y aprenderás cómo hacer que funcionen para las personas que utilizan un mouse o un teclado. También aprenderás cómo se utilizan los lectores de pantalla, ¡y te mostraré que no hay razón para tener miedo de usar uno! Únete a mí y déjame mostrarte cómo la accesibilidad no limita tus soluciones o habilidades. ¡Al contrario, las hace más inclusivas! Al final, serás capaz de:- Comprender los principios de WCAG y cómo están organizados- Conocer casos comunes en los que JavaScript es esencial para la accesibilidad- Crear enlaces, botones y elementos conmutables inclusivos- Utilizar regiones en vivo para errores y estados de carga- Integrar la accesibilidad en el flujo de trabajo de tu equipo de inmediato- Darte cuenta de que crear sitios web accesibles no es tan difícil como parece ;)
Esta sesión se centrará en los bloques de construcción universales de Starbeam. Usaremos Starbeam para construir una biblioteca de datos que funcione en múltiples frameworks.Escribiremos una biblioteca que almacene en caché y actualice datos, y admita relaciones, ordenación y filtrado.En lugar de obtener datos directamente, funcionará con datos obtenidos de forma asíncrona, incluidos los datos obtenidos después de la representación inicial. Los datos obtenidos y actualizados a través de web sockets también funcionarán bien.Todas estas características serán reactivas, por supuesto.Imagina que filtras tus datos por su título y luego actualizas el título de un registro para que coincida con el filtro: cualquier resultado que dependa de los datos filtrados se actualizará para reflejar el filtro actualizado.En 90 minutos, construirás una increíble biblioteca de datos reactiva y aprenderás una nueva herramienta poderosa para construir sistemas reactivos. La mejor parte: la biblioteca funciona en cualquier framework, incluso si no piensas en (o dependes de) ningún framework al construirla. Tabla de contenidos- Almacenar un registro obtenido en una celda- Almacenar múltiples registros en un Mapa reactivo- La iteración reactiva es una iteración normal- El filtrado reactivo es un filtrado normal- Obtener más registros y actualizar el Mapa- La ordenación reactiva es una ordenación normal (¿se está volviendo un poco repetitivo?)- Modelar la invalidación de la caché como datos- Bonus: relaciones reactivas
El masterclass está diseñado para ayudar a los desarrolladores Web2 a comenzar a construir para Web3 utilizando el Hyperverse. El Hyperverse es un mercado abierto de módulos inteligentes construidos por la comunidad, auditados y fáciles de descubrir. Nuestro objetivo es hacer que sea fácil para los desarrolladores de React construir aplicaciones Web3 sin escribir una sola línea de código de contrato inteligente. Piensa en 'npm para contratos inteligentes'. Aprende más sobre el Hyperverse aquí. Repasaremos todos los conceptos básicos de blockchain/crypto que necesitas saber para comenzar a construir en el Hyperverse, por lo que no necesitas tener ningún conocimiento previo sobre el espacio Web3. Solo necesitas tener experiencia en React.
En este masterclass te guiaré en la escritura de un módulo en TypeScript que pueda ser utilizado por usuarios de Deno, Node y los navegadores. Explicaré cómo configurar el formato, linting y pruebas en Deno, y luego cómo publicar tu módulo en deno.land/x y npm. Comenzaremos con una breve introducción sobre qué es Deno.
Comments