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

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.

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
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.
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
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.
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
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.
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
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.
API WebHID: Controla Todo a través de USB
JSNation 2022JSNation 2022
23 min
API WebHID: Controla Todo a través de USB
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.
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
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.

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.
Escribiendo Módulos Universales para Deno, Node y el Navegador
Node Congress 2022Node Congress 2022
57 min
Escribiendo Módulos Universales para Deno, Node y el Navegador
Workshop
Luca Casonato
Luca Casonato
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.