What Does The Angular Say? 🦊

Rate this content

We are very used to generating visual results with code but are still often surprised to hear that we can create music in the same way. Oh, you didn’t know that? You are not alone. Even though the idea of music programming is older than all of us this concept is still pretty unfamiliar among many developers. Not for long! Let's shed some light on music coding in our daily bases web applications using Angular.

8 min
18 Jun, 2021

Video Summary and Transcription

Today's Talk is about using Angular, Web Audio API, and ToneJS to create custom sounds and instruments in a web application. The speaker demonstrates how to create an audio context, connect sources, and add filters to modify the sounds. They explore different elements in the ToneJS library, such as synthesizers, parts, noise, and audio tracks, to enhance the user experience. The Talk also showcases instruments that play cat and dog samples according to the pitch. Overall, it highlights the possibilities of using these technologies to create unique and interactive audio experiences in web applications.

Available in Español

1. Introduction to Angular Sounds and Web Audio API

Short description:

Hello, everybody. Today, I want to show you the sounds of Angular using Web Audio API and ToneJS. We can create our own sounds, modify them, and use browsers as synthesizers. To do this, we need to create an audio context, connect sources like microphones or oscillators, and add filters if needed. ToneJS is a recommended library for this. I will demonstrate how to use ToneJS in an Angular web application to create our own instrument.

Hello, everybody. I'm Laura. I am a front-end developer at Swedbank, and today I want to show you the sounds of Angular. Or in other words, to answer, what does the Angular say? What do I mean here? We are very used to generate visuals for the code but are still often surprised that we can do the same thing for the music as well. We can code music.

And if we are looking into all your possibility in the web, that is nothing new. We have different ways how we can handle music in the web as well. But today I want to focus on the most sophisticated way to do that nowadays, which is Web Audio API. And why it is so great? Web Audio API not only enables us to replay some audio track. Web Audio API enables us to create our own sounds to modify them and analyze as well. So basically it enables us to use browsers as synthesizers.

How does that work? If we have some application for that, we would need to create the audio context to store the state of audio. And everything going to happen there. We would create the sources. That can be your microphone, that can be your oscillators, or it can be audio tracks as well. And then we would need to connect that to the destination, which is usually just speakers. If you would like to add some modifications as filters, that would happen in the middle. And of course there are helpers for that. Because we developers, we love libraries. And there are libraries for that as well. One of them is ToneJS. ToneJS is even recommended if you are reading about the web or the API in MDM documentation. And today I'm going to show you a quick demo of how we can use ToneJS in our web application using Angular. What do I have here so far? I just installed the Tone library symbol with npm install. I as well have the instrument component. So as you understand, we will create our own instrument today. In HTML, I'm just iterating through a bunch of notes. And on click event, I'm calling playNode method. In the component itself, I am taking symf element from the Tone library. And in playNode method, I'm just triggering that exact note with the length of 1 eighth.

2. Exploring Modifications and Different Elements

Short description:

Amazingly, with just a few lines of code, we created an instrument capable of playing any pitch. But we're not stopping there. Let's explore some modifications to make our instrument more unique. We have the Katiana instrument that plays cat samples according to the right pitch. Surprisingly, it was much easier than expected with the help of the ToneJS library. We also have the sampler element, which allows us to map samples to the right note. And don't judge too soon, because I've created something special: the doggyana instrument, which plays dog samples. There are many different elements in this library, including synthesizers, parts, noise, and audio tracks, that can enhance the user experience.

How does that look and sound like? Amazingly, those few lines of code, we created the instrument which is capable to play any pitch you want. But we are not stopping here because so far, we're using just default sounds. And for that, I thought to add some a bit modifications to make our instrument a bit more unique.

We have this is Katiana instrument which plays cat samples but still according the right pitch. And honestly, I was surprised how easy that is to make the ToneJS library, because in my imagination, I thought that I will need to change every sample by myself and then just to map it to the help of Tone library. But that was way easier than this. Let's look into.

We have one more element from Tone library, it is called the sampler. And for sampler initialization, I had to provide the original cat sample, which is here. And then to map it to the right note. So to understand what cat was singing, that was the tough part. But nothing more was needed to provide. All other adjustments were done by the library itself. And you see that in the play note now I'm triggering sampler and synthesizer together.

Now, some of you may think, cat sound instrument, super useful information. But don't judge me too soon. Because for those few of you, I went an extra mile. And I created something else, something special. This is doggyana instrument, which plays dog samples according to the right pitch. But not only this. There are many different elements and I do not want to overhelm you with many different details but just quick overview what you can use in this library. Let's start with different synthesizers, before I was using synth now you see that I have polysynth as well. I can provide different parameters as different oscillators, squares, sines and so on and so on. Then there is the part, part is element which helps you to play predefined notes with predefined instrument. I'm taking for example here chords even from separate constant files and then I have the loop on top of everything and so on. Then different element is noise, noise here I'm not just playing straightly I'm adding the filter, auto filter which makes some waving effect and then back to basics I have some audio tracks I'm playing them randomly and the general parameters is changing tempo, the speed of the microphone, the speed of the mic and speed up a bit so there are many different elements which you can use according to different users actions and usually when we are thinking about front end development our full focus is only on visual parts sometimes we totally forget that we have audio possibility in the dev, but please know that sometimes the right audio can really enrich our visuals and in this way we can create the next level user experience in the dev. And with this, I want to finish up.

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
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
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
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
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
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.