¡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!

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.

Jean-Philippe Côté
Jean-Philippe Côté
28 min
16 Jun, 2022

Comments

Sign in or register to post your comment.

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.

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

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

Instalar Nada: Interfaces de Aplicación con APIs Nativas del Navegador
JSNation 2024JSNation 2024
31 min
Instalar Nada: Interfaces de Aplicación con APIs Nativas del Navegador
Tal vez no necesites tanto JS como crees para lograr patrones comunes de UI con estas nuevas APIs nativas del navegador. Sumérgete en las nuevas y futuras APIs de CSS, HTML y JS que hacen que nuestro código sea más liviano y rápido de implementar.
Diseño Dirigido por Dominio con Aplicaciones Vue
Vue.js London 2023Vue.js London 2023
14 min
Diseño Dirigido por Dominio con Aplicaciones Vue
Top Content
Introducción al Diseño Dirigido por Dominio- ¿Qué es DDD?- Principios clave de DDD- Beneficios de usar DDD en el desarrollo de aplicaciones webModelado de Dominio en Aplicaciones Vue 3- Cómo diseñar e implementar modelos de dominio en Vue 3- Estrategias para integrar la lógica de dominio con el modelo de datos reactivo de Vue y la arquitectura basada en componentesMejores Prácticas para Implementar DDD en Vue 3- Estrategias para organizar el código de una manera que siga los principios de DDD- Técnicas para reducir el acoplamiento entre la lógica de dominio y la lógica de la aplicación- Consejos para probar y depurar la lógica de dominio en las aplicaciones Vue 3
Ampliando los límites de la codificación de video en navegadores con WebCodecs
JSNation 2023JSNation 2023
25 min
Ampliando los límites de la codificación de video en navegadores con WebCodecs
Top Content
La codificación de video de alta calidad en los navegadores ha sido tradicionalmente lenta, de baja calidad y no permitía mucha personalización. Esto se debe a que los navegadores nunca tuvieron una forma nativa de codificar videos aprovechando la aceleración de hardware. En esta charla, repasaré los secretos de la creación de videos de alta calidad en los navegadores de manera eficiente con el poder de WebCodecs y WebAssembly. Desde contenedores de video hasta muxing, audio y más allá, esta charla te dará todo lo que necesitas para renderizar tus videos en los navegadores hoy en día!
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
React Summit 2022React Summit 2022
7 min
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
Por lo general, crear aplicaciones web y móviles requiere diferentes conjuntos de tecnologías, y es bastante difícil compartir código. Esta charla mostrará cómo agregué una aplicación web de React y una aplicación móvil de React Native en el mismo monorepo utilizando Nx, y cómo optimicé el intercambio de código entre la aplicación web de React y la aplicación móvil de React Native.
Visualización de Cuellos de Botella de Rendimiento Front-End
React Summit 2020React Summit 2020
34 min
Visualización de Cuellos de Botella de Rendimiento Front-End
Hay muchas formas de medir el rendimiento web, pero lo más importante es medir lo que realmente importa a los usuarios. Esta charla trata sobre cómo medir, analizar y solucionar el código JavaScript lento utilizando las API del navegador.
API WebHID: Controla Todo a través de USB
JSNation 2022JSNation 2022
23 min
API WebHID: Controla Todo a través de USB
El sistema operativo permite controlar diferentes dispositivos utilizando el protocolo de dispositivo de interfaz humana desde hace mucho tiempo. Con la API WebHID, puedes hacer lo mismo directamente desde el navegador. Vamos a hablar sobre las características y limitaciones del protocolo. Intentaremos conectar algunos dispositivos a la laptop y controlarlos con JavaScript.

Workshops on related topic

Accesibilidad web en aplicaciones JavaScript
React Summit 2022React Summit 2022
161 min
Accesibilidad web en aplicaciones JavaScript
Workshop
Sandrina Pereira
Sandrina Pereira
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 ;)
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
JSNation 2023JSNation 2023
66 min
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
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
Construye aplicaciones Web3 con React
React Summit 2022React Summit 2022
51 min
Construye aplicaciones Web3 con React
WorkshopFree
Shain Dholakiya
Shain Dholakiya
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.
Construyendo Aplicaciones Web Modernas impulsadas por CMS con Strapi el CMS Headless de código abierto
React Advanced Conference 2021React Advanced Conference 2021
159 min
Construyendo Aplicaciones Web Modernas impulsadas por CMS con Strapi el CMS Headless de código abierto
Workshop
Daniel Madalitso Phiri
Daniel Madalitso Phiri
En esta masterclass, construiremos un sitio web completamente funcional y un blog integrado con Next.js y Strapi.

Tabla de contenidos:
- Una introducción a los CMS Headless y las arquitecturas compatibles
- Puesta en marcha con Strapi y Next.js
- Integración de la funcionalidad de blog en una aplicación Next.js
- Despliegue de tus aplicaciones Next.js y Strapi (Bonus)
- Implementación de vistas previas de contenido con Next.js

Requisitos previos:Conocimientos básicos de React Conocimientos básicos de Node.js y npm Conceptos básicos de la web.