Visualiza tu música con React, un experimento de diseño de sonido

Hola a todos. Estoy muy agradecida de unirme a react advanced hoy para presentarles mi proyecto de diseño de sonido. Soy Claudia Bressi, y soy una desarrolladora senior de front-end y móvil. Vivo cerca de Venecia en Italia, y trabajo para una agencia de consultoría en Milán, Italia, donde construimos aplicaciones utilizando react y react native para móviles.

Realmente me apasiona tanto la música como la informática. Y desde que era niña, comencé a aprender piano y también a usar la computadora en la oficina de mi padre. En la actualidad, todavía me encanta tocar instrumentos como el teclado electrónico y la guitarra, escuchar mis listas de reproducción favoritas y me encanta ir a conciertos y festivales. Por eso intento combinar un proyecto de front-end con la música.

Hablemos del proyecto. El objetivo principal es visualizar la música utilizando la biblioteca React. Y la aplicación en general puede manejar cualquier tipo de archivo audio, por ejemplo, archivos MP3 o WAV. Y como resultado, generamos un componente visual para cada espectro de sonido. Y como resultado, generamos un componente visual para cada espectro de sonido. Sumergámonos más en los detalles del proyecto. El código es React y TypeScript para tener una mayor facilidad de mantenimiento. Para manejar un estado global en toda la aplicación, he configurado Redux toolkit Para animar componentes, he optado por la biblioteca Framer Motion, que es un paquete bastante moderno y sencillo. Luego, en los componentes de interfaz de usuario globales, como botones, entradas y tipografía, he elegido el conocido Material UI, que probablemente muchos de ustedes ya usen en sus aplicaciones de React.

La API de Web Audio es una biblioteca increíble que te permite trabajar con audio data. Nos brinda a los desarrolladores miles de métodos para analizar, filtrar y visualizar sonidos. Además, hay múltiples opciones disponibles para agregar efectos especiales 3D, panoramización, división multicanal y mucho más. Para este proyecto, principalmente utilizamos dos interfaces, el nodo Analizador, que nos permite manejar información específica del audio como las frecuencias, y el Audio Worklet, que nos permite a los desarrolladores agregar nuevos módulos que se ejecutan en el hilo principal. Hablando en términos generales, cada vez que trabajas con la API de Web Audio, el resultado generado será un grafo acíclico directo, donde cada nodo es una fuente de audio, un efecto de filtro o un destino de destino. A través de la API de Web Audio, las visualizaciones se logran evaluando parámetros de audio a lo largo del tiempo. Estas variables son ganancia, tono y frecuencias la mayoría de las veces. La API de Web Audio tiene, de hecho, el nodo de analizador mencionado anteriormente que deja inalterada la señal de audio que pasa a través de él. En cambio, produce data de audio que se puede pasar a una tecnología de visualización como HTML Canvas o, en nuestro caso, componentes funcionales de React. Un dato curioso esperado es la compatibilidad con el navegador. Como pueden ver, Internet Explorer no es compatible en absoluto. Afortunadamente para nosotros, este navegador se retirará el próximo año el 15 de junio.

Para mejorar nuestro proyecto, he creado hooks personalizados para mejorar la modularidad y reutilización en todo el código base. UseFrequency extrae cualquier valor de frecuencia del archivo de audio. UseWaveform obtiene todo el espectro de sonido en términos de datos de dominio de tiempo. UsePitch lee el valor actual del tono del sonido. Y finalmente, useGain extrae el volumen de la entrada.

Tener una visualización rica de datos es fundamental, y para lograr esto, dividí el proyecto en cuatro áreas. Para dar forma específica, he utilizado el parámetro Pitch Audio. Para colorear los componentes, he aplicado el hook personalizado UseFrequency. Mientras que para animar la interfaz de usuario, he optado por la API de FramerMotion. Y he utilizado la etiqueta AudioHTML para proporcionar la funcionalidad de reproducción al usuario en los archivos de audio ya cargados.

Tener herramientas es una parte crucial en el desarrollo de código para permitirnos inspeccionar y solucionar problemas en nuestro código. AudioOnChrome es un útil complemento de Chrome para depurar cualquier proyecto de audio. Luego, tenemos WebAudioDevToolsExtension que resulta práctico para inspeccionar el gráfico de audio generado.

Como próximo paso, mejoraré todo el proyecto, lo convertiré en una aplicación web progresiva, lo que lo convertirá en una herramienta universalmente accesible. También mejoraré las características agregando algoritmos de Machine Learning, renderizado en el lado del servidor y la capacidad de utilizar workers para optimizaciones de rendimiento.

Finalmente, te dejaré algunas reflexiones. React es una gran biblioteca para expresar el desarrollo web de una manera creativa. Así que te sugiero que pruebes y experimentes tanto como sea posible en tu proyecto personal, en particular, codificando con AudioData y la API de Web Audio, que es muy sencilla de aplicar. Si alguna vez intentas codificar sobre este tema, comparte tus ideas utilizando el hashtag que he creado a continuación. Sería genial ver tu creación. Así que sí, gracias por escuchar, espero que hayas encontrado interesante este tema y disfruta el resto de la conferencia. Adiós.