¿Qué dice Angular? 🦊

Rate this content
Bookmark

Estamos muy acostumbrados a generar resultados visuales con código, pero a menudo nos sorprende escuchar que también podemos crear música de la misma manera. ¿No lo sabías? No estás solo. Aunque la idea de programar música es más antigua que todos nosotros, este concepto aún es bastante desconocido para muchos desarrolladores. ¡Pero no por mucho tiempo! Vamos a arrojar algo de luz sobre la programación musical en nuestras aplicaciones web diarias utilizando Angular.

8 min
18 Jun, 2021

Video Summary and Transcription

La charla de hoy trata sobre cómo usar Angular, Web Audio API y ToneJS para crear sonidos e instrumentos personalizados en una aplicación web. El orador demuestra cómo crear un contexto de audio, conectar fuentes y agregar filtros para modificar los sonidos. Explora diferentes elementos en la biblioteca ToneJS, como sintetizadores, partes, ruido y pistas de audio, para mejorar la experiencia del usuario. La charla también muestra instrumentos que reproducen muestras de gatos y perros según la altura del tono. En general, destaca las posibilidades de utilizar estas tecnologías para crear experiencias de audio únicas e interactivas en aplicaciones web.

Available in English

1. Introducción a los Sonidos de Angular y Web Audio API

Short description:

Hola a todos. Hoy quiero mostrarles los sonidos de Angular utilizando Web Audio API y ToneJS. Podemos crear nuestros propios sonidos, modificarlos y utilizar los navegadores como sintetizadores. Para hacer esto, necesitamos crear un contexto de audio, conectar fuentes como micrófonos u osciladores, y agregar filtros si es necesario. ToneJS es una biblioteca recomendada para esto. Demostraré cómo usar ToneJS en una aplicación web de Angular para crear nuestro propio instrumento.

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.

2. Explorando Modificaciones y Diferentes Elementos

Short description:

Increíblemente, con solo unas pocas líneas de código, creamos un instrumento capaz de reproducir cualquier tono. Pero no nos detendremos ahí. Vamos a explorar algunas modificaciones para hacer nuestro instrumento más único. Tenemos el instrumento Katiana que reproduce muestras de gatos según el tono correcto. Sorprendentemente, fue mucho más fácil de lo esperado con la ayuda de la biblioteca ToneJS. También tenemos el elemento sampler, que nos permite asignar muestras al tono correcto. Y no juzgues demasiado pronto, porque he creado algo especial: el instrumento doggyana, que reproduce muestras de perros. Hay muchos elementos diferentes en esta biblioteca, incluyendo sintetizadores, partes, ruido y pistas de audio, que pueden mejorar la experiencia del usuario.

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

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

JSNation 2022JSNation 2022
20 min
The Wind and the Waves: The formation of Framework Waves from the Epicenter
Top Content
What do you do when you're a framework that's survived and innovated in two JavaScript Framework Waves, and see the new wave cresting in the distance? You innovate. In this talk, we explore the JavaScript Framework landscape, and some of the major competitive features we've seen. We'll explore what Angular is introducing today and where we're headed in the future.
JSNation 2023JSNation 2023
22 min
Angular Momentum
In this talk you'll learn all about the renaissance Angular has been going through! First, we'll look into how the framework embraced fine-grained reactivity with signals to boost its runtime performance by orders of magnitude.
After that we'll dive into applying a similar fine-grained approach to code loading to make everything load faster. At the end, you'll learn about the tooling you can leverage to land all this in your apps!
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Introduction to Domain Driven Design- What is DDD?- Key principles of DDD- Benefits of using DDD in web application developmentDomain Modeling in Vue 3 Applications- How to design and implement domain models in Vue 3- Strategies for integrating domain logic with Vue's reactive data model and component-based architectureBest Practices for Implementing DDD in Vue 3- Strategies for organizing code in a way that follows DDD principles- Techniques for reducing coupling between domain and application logic- Tips for testing and debugging domain logic in Vue 3 applications
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
JSNation 2022JSNation 2022
23 min
The Next Wave of Web Frameworks is BYOJS
Web application development has had many shifts over the lifetime of the web. From server-side applications with a sprinkle of JavaScript to Single Page Applications built entirely with JavaScript. Now we’re heading back to where many new web frameworks build for static first, with JavaScript added as needed. This talk covers building web applications with JavaScript through the lens of Astro, a static site generator where the choice of JavaScript framework is uniquely yours.
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!

Workshops on related topic

JSNation 2022JSNation 2022
116 min
Get started with AG Grid Angular Data Grid
WorkshopFree
Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid.
Contents:- getting started and installing AG Grid- configuring sorting, filtering, pagination- loading data into the grid- the grid API- add your own components to the Grid for rendering and editing- capabilities of the free community edition of AG Grid
JSNation Live 2021JSNation Live 2021
113 min
Micro-Frontends with Module Federation and Angular
Workshop
Ever more companies are choosing Micro-Frontends. However, they are anything but easy to implement. Fortunately, Module Federation introduced with webpack 5 has initiated a crucial change of direction.
In this interactive workshop, you will learn from Manfred Steyer -- Angular GDE and Trusted Collaborator in the Angular team -- how to plan and implement Micro-Frontend architectures with Angular and the brand new webpack Module Federation. We talk about sharing libraries and advanced concepts like dealing with version mismatches, dynamic Module Federation, and integration into monorepos.
After the individual exercises, you will have a case study you can use as a template for your projects. This workshop helps you evaluate the individual options for your projects.
Prerequisites:You should have some experience with Angular.
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
React Summit 2022React Summit 2022
51 min
Build Web3 apps with React
WorkshopFree
The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”
Learn more about the Hyperverse here.
We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.