Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So we have set up the basic recording capability, now let's provide some feedback to the user to show them the amplitude of the data that they're seeing. We'll come over and look in the solution and see that we've added an additional image here. Let's take a look at what that image looks like. So this essentially is our amplitude meter, and what we're going to do is we actually have another piece of XAML code that sits on top of that whose size we shrink from the right side to the left in time with the data coming back from the buffer to show how much data is there.
So we don't actually render the squares at runtime, we simply shrink the mask that's hiding them at runtime. So let's take a look at the XAML for the main page to see how we set that up. So here is our XAML, and you can see that here we've created an image and filled it with the meter bar, and then inside that we've created a rectangle that is exactly inside the meter bar and at runtime we then shrink that--let's say that we've set this to 400.
But we also adjust the Margin at the same time so that the right-hand end of this rectangle always stays here, and we shrink the size of the rectangle and move it to the right so the right-hand end is always there. Thus, if we do this, this way and shrink it again, the image underneath is more exposed. Let's undo all this stuff and put it back to its original state and go take a look at the code. So our code looks very similar to what we had before. We still have our same four instance variables, the microphone, the buffer, the stream, and our RecordingMode, got the same Xna .FrameworkDispatcher.Update logic.
We've reduced the time span of the buffer duration from half a second to a 10th of a second, and that way our meter on the screen will update more quickly. So how do we do that? Well, we do it all here in the Callback method for the microphone data. So when a buffer of data comes in, we do what we did before, we go get the data buffer, we write it out to the stream, and now we compute the average amplitude of the sound that's inside that buffer so that we know how big or how small to make the rectangle mask, thus deciding how much of the meter image underneath we should expose.
So first we go through all the samples. Now, the samples are two byte samples, so the recording on a Windows phone device is always 16-bit recording, and it's 16-bit raw PCM, so we know that every one is two bytes. So we basically loop through the data, looking at all the samples, we extract one sample from the buffer, then we convert it to a 32-bit int, because we want to Math.Abs, because the data coming from the microphone is either -32768 in that direction, or up to +32767, but all we really care about is the absolute magnitude, because what that data is actually representing is digital samples of the sine wave of the sound.
So even though it might be loud, it might be up in the 10,000s, it could be on the bottom end of the sine wave, so the number coming back might be -10,000, but we don't care about that right here, all we really want to know is what's the magnitude of the wave that's currently being recorded at the moment. So we grab it as an integer, we get its absolute value, we create an absolute number, and then we turn around and just calculate the average so that we get an average volume inside that buffer. Then we have to do a little bit of graphic magic, so we need to scale that, because that number is going to be between 0 and 32,000, and we need to scale it so we can use it with our meter bridge.
We scale it by 10, because in order to get a reasonable response out of the meter, it's very rare that someone is actually going to get a volume that's all the way up into the red, but if you just use the raw values, then you only get just a little bit of the green showing, so we scale it up a little bit, because most recording data is going to be in the middle, and we want to have that meter look reasonable in terms of what the user is expecting, to give them visual feedback. So now we have our CoverSize that says how big should that rectangle be, and now we need to convert that into XAML units so we can adjust the coordinates for that rectangle.
So we first create a Thickness object from the current margin of that rectangle, and then we update the left edge of the rectangle by saying it's 21 plus the meterCoverSize, meaning the size we just calculated. This is what shifts it to the right. And then we update the Width so that it shifts back so it doesn't overflow the right-hand end of the graphic so that the teal border we have around the meter always shows exactly as it should. And then finally, this is the same code we had before. We go get the current position in our current stream and update the recording number in our TimerTextBlock, and that's it.
But we've also added one more thing to the recordbutton_Click, which is when you're in Record mode, and you stop, we want to put the cover back on top of our meter so that it appears that there's no sound coming in, so we want the meter to be completely black now with none of the green, yellow, or red showing. So let's rebuild our solution and give it a whirl. Just like before, we click the Record button, but now as we're recording, you can see that the meter is showing the amplitude of the volume that's actually coming in through the microphone.
So if I say 1-2-3, you can see as the meter goes up, as I'm talking, we've got that visual feedback so that the user knows something is really happening here, and their sound is actually being recorded. So that's great! Now we've got the microphone hooked up, we've got some feedback going on so that your user knows that there's actual sound being recorded. Let's go on now and add something to play that sound back so that we can actually hear what got recorded.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 103238 Viewers
61 Video lessons · 89973 Viewers
71 Video lessons · 73553 Viewers
56 Video lessons · 105091 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.