Video Summary and Transcription
Claudia Bressi, una desarrolladora senior de front-end y móvil, combina música y ciencias de la computación en su proyecto de diseño de sonido utilizando React y la API de Web Audio. El proyecto admite diferentes formatos de archivo de audio y utiliza métodos poderosos para analizar y visualizar sonidos. Se utilizan hooks personalizados para modularidad y reutilización de código. El proyecto se divide en cuatro áreas: forma, color, animación y reproducción. Las mejoras futuras incluyen convertirlo en una aplicación web progresiva, agregar algoritmos de aprendizaje automático, renderizado del lado del servidor y optimización del rendimiento con workers.
1. Introducción al Proyecto de Diseño de Sonido
Soy Claudia Bressi, una desarrolladora senior de front-end y móvil de Italia. Soy apasionada por la música y la informática, y las he combinado en mi proyecto de diseño de sonido utilizando React. El proyecto visualiza la música utilizando la API de Web Audio y admite diferentes formatos de archivo de audio. Utilizamos React, TypeScript, Redux Toolkit, Framer Motion y Material UI para el desarrollo. La API de Web Audio proporciona métodos potentes para analizar, filtrar y visualizar sonidos, y utilizamos el nodo Analizador y Audio Worklet para este proyecto. La compatibilidad con el navegador es una consideración, y hemos creado hooks personalizados para modularidad y reutilización de código.
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.
2. Mejorando el Proyecto y Reflexiones Finales
Para mejorar nuestro proyecto, he creado hooks personalizados para modularidad y reutilización. UseFrequency extrae valores de frecuencia, UseWaveform obtiene datos del espectro de sonido, UsePitch lee valores de tono y useGain extrae el volumen. Dividimos el proyecto en cuatro áreas: forma con Pitch Audio, color con UseFrequency, animación con FramerMotion y reproducción con AudioHTML. Herramientas como AudioOnChrome y WebAudioDevToolsExtension son útiles para depurar e inspeccionar el gráfico de audio. A continuación, convertiremos el proyecto en una aplicación web progresiva, agregaremos algoritmos de ML, renderizado en el lado del servidor y optimizaremos el rendimiento con workers. Experimenta con React, AudioData y la API de Web Audio en tus proyectos. Comparte tus ideas con el hashtag que he creado. ¡Gracias por escuchar y disfruta de la conferencia!
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.
Comments