Basic sound loading - JavaScript Tutorial

- [Instructor] In order to work with sound we're going to use something called the Web Audio API and you can read more about it at this URL. Now you want to make sure that you have a pretty modern browser that supports the Web Audio API or none of this is going to work. So something like the latest version of Google Chrome will work just fine. So let's take a look at what it takes. The way that you work with sound is you create something called a sound context and this is pretty much where you stored the actual sound and then what you do is you add a series of modules to that context and then connect them together. So by adding those modules you're essentially controlling how the sound will play with things like the volume, what kind of distortion you want, what wave form you want to use and so on and so forth. I'm gonna start off by creating my IIFE which is the Immediately Invoked Function Expression and it looks something like this and then in here I'm going to create some variables. First off I'll create something called my sound context. Again this is going to be the placeholder for the sound and then we'll create some of the modules that we're going to use so my oscillator, my gain which is the same thing as a volume and then my distortion. Once we had those variables, let's go ahead and hide that side bar so we have a little bit more room here. Then we'll also create another one here called context class and that is going to look at the window and make sure that we have an audio context, so you can say audio context available to us as we're just checking that things are working well in here or we can also check for a window web kit audio context depending on the browser and then we're going to do just to check to make sure that this context class does exist and if it does then we will do some stuff here. Otherwise we'll print out a message. We'll look for the element with a class of app and then we'll change the HTML of that element. So in addition to doing you know a message for people who don't have the audio API we want to go ahead and begin by creating a simple sound so that we can make sure that everything's working and first off I'll start with my sound context and I'm going to create a new context class that sort of initializes the context and then we will say my oscillator equals my sound context create oscillator so you're going to see we're going to create the different modules that we're going to be using and then we're going to connect them to the item with our context. So we'll start off by creating the oscillator. Think of the oscillator as the type of sound that you're trying to make. So you can say my oscillator type and we'll put in a sine wave here but you can also put a square a saw tooth or a triangle. They're are just different wave forms that have different shapes and it will just sound slightly differently and we'll say my oscillator frequency and we'll give that a value. So the frequency would be almost like the note that you're going to be playing. So here he just needs a numeric value and we'll just put in a value of 110. I'll give you some more frequencies later but this will work and then we'll say my oscillator start, right. So sort of initialize it and then we'll create the module called my gain used to create gain method and then we will set the gain value. This is important. This is the volume of the note that you want to be playing. I would suggest that you set it to something really small so if you set it to zero then it will essentially be silent which is normally great but if you want to hear it you want to set it to something like point two or one and it would be I think the loudest that you can set it to and then let's go ahead and do my distortion. And we'll just use create wave shaper here. So distortion, think of it is what you do when you have an electric guitar and you want to add something that will distort the original sine wave that you're creating in this case and you can get super complicated and look up different functions that can distort your original sound. But in here we're going to keep the distortion just minimal because we don't really need anything complicated for the sound of this instrument. So now we need to connect all these modules together in the way that we do that is we'll start by saying my oscillator connect and we're going to connect the distortion that we're going to place on that wave that we created and then we'll grab my distortion and we will connect to it, my gain. So this will be connecting the volume and then we will connect to my gain. The sound context and plug everything in. So we did everything correctly. Then when we save this we should hear a sound. Let's go ahead and switch that over to zero as you can see the sound is pretty loud so you can do like maybe point one let's try point one see if it's any better. And that's still pretty loud I think on your device you're going to notice it being a lot less loud than my device. We use the compressor here for audio so it might be equalizing like all the volumes but you definitely don't want to leave even really any sound playing. So try to keep it to zero and then I'll show you how you can control it with the mouse in later videos.