¿Qué dice Angular? 🦊

Hola a todos. Soy Laura. Soy una desarrolladora front-end en Swedbank, y hoy quiero mostrarles los sonidos de Angular. O en otras palabras, responder a la pregunta, ¿qué dice Angular? ¿Qué quiero decir aquí? Estamos muy acostumbrados a generar visualizaciones para el código pero a menudo nos sorprendemos de que también podamos hacer lo mismo para la música. Podemos codificar música.

Y si exploramos todas las posibilidades en la web, eso no es nada nuevo. También tenemos diferentes formas de manejar la música en la web. Pero hoy quiero centrarme en la forma más sofisticada de hacerlo en la actualidad, que es la Web Audio API. ¿Y por qué es tan genial? La Web Audio API no solo nos permite reproducir una pista de audio. La Web Audio API nos permite crear nuestros propios sonidos modificarlos y analizarlos también. Básicamente nos permite utilizar los navegadores como sintetizadores.

¿Cómo funciona eso? Si tenemos alguna aplicación para eso, necesitaríamos crear el contexto de audio. Y todo va a suceder allí. Crearíamos las fuentes. Eso puede ser tu micrófono, eso puede ser tus osciladores, o también pueden ser pistas de audio. Y luego necesitaríamos conectar eso al destino, que generalmente son solo los altavoces. Si deseas agregar algunas modificaciones como filtros, eso sucedería en el medio. Y, por supuesto, hay ayudantes para eso. Porque nosotros, los desarrolladores, amamos las bibliotecas. Y también hay bibliotecas para eso. Una de ellas es ToneJS. ToneJS incluso se recomienda si estás leyendo sobre la Web o la API en la documentación de MDM. Y hoy voy a mostrarles una demostración rápida de cómo podemos usar ToneJS en nuestra aplicación web utilizando Angular. ¿Qué tengo aquí hasta ahora? Acabo de instalar la biblioteca Tone con el símbolo npm install. También tengo el componente de instrumento. Como entenderán, hoy crearemos nuestro propio instrumento. En HTML, simplemente itero a través de una serie de notas. Y en el evento de clic, llamo al método playNode. En el propio componente, tomo el elemento symf de la biblioteca Tone. Y en el método playNode, simplemente activo esa nota exacta con una duración de 1 octavo.

¿Cómo se ve y suena eso? ¿Cómo se ve y suena eso? Increíblemente, con esas pocas líneas de código, creamos el instrumento que es capaz de reproducir cualquier tono que desees. Pero no nos detendremos aquí porque hasta ahora, solo estamos usando sonidos predeterminados. Y para eso, pensé en agregar algunas modificaciones para hacer nuestro instrumento un poco más único.

Tenemos este instrumento llamado Katiana que reproduce muestras de gatos pero aún según el tono correcto. Y honestamente, me sorprendió lo fácil que es hacerlo con la biblioteca ToneJS, porque en mi imaginación, pensé que tendría que cambiar cada muestra por mí misma y luego simplemente asignarla con la ayuda de la biblioteca Tone. Pero resultó ser mucho más fácil que eso. Echemos un vistazo.

Tenemos otro elemento de la biblioteca Tone, se llama el sampler. Y para la inicialización del sampler, tuve que proporcionar la muestra original de gato, que está aquí. Y luego asignarla al tono correcto. Así que entender qué estaba cantando el gato, esa fue la parte difícil. Pero no se necesitó nada más para proporcionar. Todos los demás ajustes los hizo la biblioteca misma. Y puedes ver eso en la reproducción de la nota ahora que estoy activando el sampler y el sintetizador juntos.

Ahora, algunos de ustedes pueden pensar, instrumento de sonido de gato, información súper útil. Pero no me juzguen demasiado pronto. Porque para aquellos pocos de ustedes, fui un paso más allá. Y creé algo más, algo especial. Este es el instrumento doggyana, que reproduce muestras de perros según el tono correcto. Pero no solo eso. Hay muchos elementos diferentes y no quiero abrumarlos con muchos detalles, pero solo una visión general rápida de lo que puedes usar en esta biblioteca. Comencemos con diferentes sintetizadores, antes estaba usando synth y ahora ves que tengo polysynth también. Puedo proporcionar diferentes parámetros como diferentes osciladores, cuadrados, senos, etc. Luego está la parte, que es un elemento que te ayuda a reproducir notas predefinidas con un instrumento predefinido. Aquí estoy tomando, por ejemplo, acordes incluso de archivos constantes separados y luego tengo el bucle encima de todo y así sucesivamente. Luego, otro elemento es el ruido, el ruido aquí no lo estoy reproduciendo directamente, estoy agregando el filtro, el filtro automático que hace un efecto de ondulación y luego volviendo a lo básico, tengo algunas pistas de audio que reproduzco al azar y los parámetros generales están cambiando el tempo, la velocidad del micrófono, la velocidad del micrófono y acelerando un poco, así que hay muchos elementos diferentes que puedes usar según las acciones de los diferentes usuarios y usualmente cuando pensamos en el desarrollo de front-end, nuestro enfoque completo está solo en las partes visuales, a veces olvidamos por completo que tenemos la posibilidad de audio en el desarrollo, pero por favor sepan que a veces el audio correcto realmente puede enriquecer nuestras visuales y de esta manera podemos crear el siguiente nivel user experience en el desarrollo. Y con esto, quiero terminar. Si quieres ver música en vivo codificando usando javascript y sony pi, puedes ver mis charlas anteriores en YouTube y muchas gracias por escuchar y que tengas una gran conferencia!