2.8 Seeing Sound
In this lesson, we'll render audio data onto a canvas in order to visualize our oscillator waveforms.
1.Introduction3 lessons, 07:07
2.Visualizing Sound8 lessons, 39:06
3.Conclusion1 lesson, 01:48
2.8 Seeing Sound
Okay, so in the last lesson, we figured out how to get audio data from the sounds we make. Next, we're going to get that data on screen. Now, audio is fast. When we hear oscillators, they're repeating a waveform hundreds of times a second. And if you want to keep up with that, we need to read the data from the analyzer over and over again in the loop. The fastest way to a loop in the browser is to use request animation frame. This calls the function as soon as the browser allows. Let's create a draw function for joining a wave form. Var draw equals function. And here we'll call the request animation frame, passing a function like so. Let's just console log a message and say to make sure it's working. And below that we need to call our draw function so it gets called again and again. An outsider function call draw again to kick things off. See that and head to the browser to see that it's working. Great. Okay, next we're going to draw on our canvas. First we need to reference the specific DOM element. While we're declaring our variables, create one called Canvas. And get our canvas element by saying document.creativeSelector. And pass the ID of oscilloscope. Now, to access the drawing methods of our canvas, we need to get its context. So below canvas, we'll create another variable called canvas context. And assign it canvas.getcontext. 2D. Also for convenience, assign the width and height of your canvas to variables as well. We'll be depending on these quite a bit. So that's canvas height equals 150 and canvas width equals 587. Okay let's head back down to our draw function again. The first thing we want to do, upon each frame being drawn is clear the canvas. Otherwise we would just be drawing on top of the previous frame which will result in a big mess. A simple trick for doing this is just to set the width of the canvas again. Which is easy as writing canvas.width = canvasWidth. Okay, now we get to use the getByteTimeDomainData method. If we write analyzer.getByteTimeDomainData, and then pass in our special WAV data array. This means that the analyzer node will fill up the WAV data array with information about the WAV form that's being passed through it. Have a look at this diagram. Imagine our array going along the x-axis here. And the values being stored in the waveform are that of the y-axis. Except you know this range. Error starts at 0, and goes all the way up to 255. If we draw lines between these values, and scale the range to fit our canvas, we'll hopefully the next wave form. Okay, the first thing we have to do is iterate over all the values in our array. We can do that with a standard for loop, for (var i = 0, i That's the size of our array. I++, and say let's calculate the position on the y axis for each value. Let's write, bar y position equals WAV data. Now, because this value can be between 0 and 255. That's 256 possible values. Then it's going to be too big for our canvas. Let's scale it down to be between zero and one in order to make it easier to scale back up to fit our canvas. Just divide wavData by 256. Then we scale up to the correct location on our canvas by multiplying it by canvas height, like so. Okay now we know where to draw the point on the y axis. But what about the x axis? First, we figure out the width of each point in the canvas by saying xWidth = canvasWidth divided by analyser.frequencyBinCount. So what we're seeing here is, if we divide the width of our canvas by the number of bits of audio data we have, then we know how wide each point we draw on the x-axis should be. That means our x position is simply i times x width. By using i, it means that our x position will move along each iteration of the loop. All that's left to do now is to draw the connecting lengths. This is as easy as writing canvas context dot line two, x position, and y position. After I've created the path to all our lines, we need to give our line a color. So we set the stroke color to yellow. Then we actually draw our line by saying canvas context.stroke. Okay, let's save this file. And now to the browser for our big moment. Refresh, and. [MUSIC] Brilliant, a synth that shows the sound that is playing. [MUSIC] If you're interested, try messing around with the different types of oscillators, and see the different shapes that are made. [MUSIC] Phew. So that was quite tough. But I think we've made something pretty good here. In the next lesson, we'll recap in what we've done, and where to go with your new found skills.