What Does The Angular Say? 🦊

Hello, everybody. I'm Laura. I'm 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 audio 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 is it so great? Web audio api not only enables us to play or 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's 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 Web audio api in MDM documentation. And today I'm going to show you the quick demo how we can use ToneJS in our web application using angular. What do I have here so far? I just installed the Tone library, simple 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 playNote method. In the component itself, I am taking synth element from the Tone library. And in playNote method, I'm just triggering that exact note with the length of 1 eighth. 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. What do we have? This is Catiana instrument, which plays cat samples, but still according to the right pitch. And honestly, I was surprised how easy that is to make the ToneJS library. Because 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 overheard you with many different details. But just quick overview what you can use with 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. This element which helps you to play predefined notes, 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 as changing tempo. I can speed up a bit. So there are many different elements which you can use according different user's 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 back.

But please note that sometimes the right audio can really enrich our visuals. And in this way, we can create the next level of user experience in the web.

And with this, I want to finish up. If you want to look into live music coding using javascript and Sonic Pi, you can check my previous talks on YouTube. And thanks a lot for listening and have a great conference.