Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.3 The Web Audio API

In this lesson, we’ll take a look at the Web Audio API and I’ll give you a high-level overview of how the API works.

Related Links

1.3 The Web Audio API

Okay, we've determined that sounds pretty cool, and we understand waveforms a little bit more, but how does this relate to web browsers. Well recently the thing called the Web Audio API was added to most major browsers. Let's check which ones by heading over to canIuse.com we can see this currently supported in Chrome, Firefox, Safari, and Opera. Looks like it isn't available in Internet Explorer. But the good new is that it's in Microsoft's new Edge browser. The Web Audio API is a powerful way of playing and manipulating sound in the browser using JavaScript. You may have used the audio tag before in your website, which is perfect for playing songs or podcasts as MP3s, but there's not much else you can do with it. With the web audio PI, we can create sound from scratch directly in the browser The Web Audio API provides us with some basic oscillators out of the box. Oscillators generate a tone by repeating a wave at an audible frequency. Let's try it out. An important thing to understand when working with the Web Audio API is the node graph. The API works by connecting different nodes together, forming a chain of effects that manipulate sound as it goes along. This collection of nodes and its connections is called the node graph. Okay, let's open the JavaScript console in our browser. The first thing we need to do is create an audio context. This is just how we access the way body of PA's methods. We do this like so, We write var context equals new AudioContext. Simple. Then we want to create an oscillator. Again, it's fairly straightforward. var osc equals context.createOscillator. So we're using the context there to access the Web Audio API methods. Also interest can be quite wide by default, so let's connected to note that lowers the volume a bit. First we create again note. Far volume equals, context.createGain. And set its volume by saying volume.gain.value = 0.5. This means that the volume of sound coming into this node will be multiplied by 0.5, and therefore making a half as loud. So then we need to connect these nodes up, chain them together. We say osc.connect, and then in parentheses, volume. That's the node we're connecting to. And then before we hit anything, we'll need to connect our key nodes to our speakers. So we take that node by saying volume.connect, and then pass in context.destination. Context.destination is always the final output of your sound if you want to hear anything. Think of it like connecting to your speakers. Just to recap, what we've done here is create an oscillator which generates a tone. We've then connected the output of that node to the input of a gain node. Which halves its volume. Then we've connected the output of our node to our speakers. So you can see that we're creating this chain that the sound is flowing through. That all looks good. So all we need to do now is start our oscillator. Effie writes osc.start. Then we hear a lovely oscillator. To stop it, we just write osc.stop. And that's how we create sound in the browser. Just like that. In the next lesson we'll see what we can do with that new superpower.

Back to the top