Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.7 Analysis

In this lesson, we’ll look at how Analyser nodes can be used to retrieve audio information.

Related Links

2.7 Analysis

In 2001. I went to see Radiohead in concert. For one of the songs, Climbing up the Walls, if you're a fan, they had an oscilloscope projected on some massive screen behind the band. The oscilloscope showed the wave form of the synthesizer as it was being played in real time. Okay first, what's an oscilloscope? Remember how we talked about different wave forms having different shapes? A square wave looks like a square and a triangle wave looks a triangle. Well an oscilloscope, analyzes this audio and draws a corresponding waveform on a screen. Okay secondly, why am I telling you this? Because this is exactly what we're going to do. We're going to make an oscilloscope so you can see the wave forms your synth makes as you play. Okay, first we need to create the space we're going to show our waveform. We're going to use a canvas element to draw the waveform on, so create one just above the keyboard And give it an ID of oscilloscope. If you've been following along and using the same CSS and keyboard width as I have here, then give the canvas a width of 587 like so. This is because even though we specify the width of the keyboard to be 600, it wasn't possible for the keys to be evenly spaced out enough. So we're left with a 15 pixel gap, we'll fill up two of those pixels with a border, leaving us 13 pixels short of 600. And that's 587, which our canvas is taking into account. We'll also need to give the canvas a height, which can be anything you like. 150 pixels sounds about right to me. Okay. Over to our CSS. We'll need to give our canvas a nice background color to make it look the part. So I'm gonna say medium violet red. I will add that border I was talking about too by saying, border: 1px solid black. We don't need a bottom border as the keyboard automatically provides one. Let's see what we've got in the browser. Great, a nice blank canvas to show our synthesizing on. There's a little gap here though, which is probably due to the default font size. Seeing as we have no text here, we can just set the font size to zero, perfect. In order to be able to draw a waveform, we need to get the information about what's being played out from our audio notes. And the way to do this is by connecting the output of our notes to a special AnalyserNode. An AnalyserNode doesn't change the sound connected to it in any way whatsoever. It just lets it process the audio data that flows through it. Okay, over to our JavaScript. Let's create an analyzer note up at the top with the rest of our variables. Then we figure out the point in our node graph, where we want to analyze our audio at points where the sound from our oscillators flows through. I recommend connecting it to the output of our gain note, which we do by saying, volume dot connect and pass an analyzer. We could connect both oscillators to the analyzer note directly. But by connecting it after the gain note, we get a more accurate picture of what's actually being played out to our speakers. Okay, now that our analyzer is connected, we need to get the data out of it as audio passes through it. And of course, there's a method for that, this one here, GetByteTimeDomainData. That says, the getByteTimeDomainData method of the analyzer node copies the cutaway form, or time domain data into an unsigned battery passed into it. Sounds exactly what we need. So just a quick note about this part. It says that we have to pass the data into a un eight array. which is a special array of eight bit on the same integers. So we're going to create one for our data to go in, back to our JS. Let's see, we have data = new Uint8Array. And we need to declare how big this array should be. And this case it's the number of points of data the analyzer node gives us. We can get this value from analyzer.frequencyBinCount. By default, this is 1,024, which means that we're creating an array for 1,024 pieces of audio data. Great, so our analyzer node is receiving our data and we've created a place for that data to go. In the next lesson, we'll get that data out by using to get data method. And learn how to pin our data onto our canvas.

Back to the top