Hello everyone, and welcome to another wonderful tutorial session.
Today, I'm going to show you how to create a custom SurfaceView that can visualizer the sound from your microphone!

This might sound really advanced, but it's isn't. Hang on and you'll find out for your self!

Introduction
Who doesn't like the beautiful music visualizations that you can find in your mediaplayer on your desktop?
But for some reason there aren't many music apps to Android that has this function.
That reason is that before Android 2.3, it was not possible to snoop the system sound.
Only the visualizer-wallpaper could do this, because is was hard-coded in to the android source code.
So, the only way to get sound from your device, would be from the microphone picking up sound from the speakers.
And this do of course not work very well for a music player where the user, often listen via headphones.

This is also the reason why you can find any tutorial on how to visualize sound on a android version older then 2.3
This is where i come in, this is going to be a quite big tutorial, with a lot of code, and i won't have time/room to explain everything.

Are you ready?
Then let's begin!

Creating the project
Okey, so lets start out with creating the project

Lets first create a new Android project and name it "com.example.soundvisualizer"
and the build target for Android 2.1, and next set the following:
Application name: Tutorial Sound Visualizer
Package name: com.example.soundvisualizer
Create Activity (Checked): MainActivity
Then press Finish.

We are not going to make any layout right now, because we need to make the widget, that we're going to use, first.

This is a bit more advance, right?
Actually no, this just instance a new AudioRecorder, starts and stops recording at the right time, and sends the data back to the main activity. Not really anything hard.
Well, now you might say "Hey man,i got an error at m_ma.setBuffer(CSampler.buffer);! What's up with that?"

That's because we haven't added that function to the Main activity, where we are trying to send the data.
Why haven't we done that, you might ask? Well there's no point at doing that until we completed the next step!

Lets move on to the hardest part, calculating the points for the line and render in to the screen.

A ballistic renderer, or not
Okey, so we got the audio-data where we want it, or soon we will.
Now, create a new class called CDrawer:

This class creates a SurfaceView that we can draw on, and it's this that will become our widget to place in a layout.
It also has the drawing thread in it, to keep the UI becoming unresponsive and do all calculations in on a separate thread. I could go on explaining the the code fully, but that would make this post to long for anyone to read.
Instead, the code is documented, specially the onDraw where the calculations happens.
But basically, I'm turning the data in to FFT-values and then easily calculating how long each line are going to be.

So, that is all the extra classes we need, now to MainActivity.java..

The Finish Line
Oh, that was quite a bit of code, right?
Well, we are almost done.
Now, in the ManActivity.java, we are going to do some stuff.
The code should look like this:

Basically, we handle all the onpause, onresume, onRestart so that the drawer dose the same as the MainActivity.
That way, it won't stay in the background draining battery and filling the garbage collector when you minimize the app.

Now we are almost done, now we go into the layout of the activity:
res->layout and there should be a file named main.xml
Replace all it's content with this small set of code

That's about it, just go in to the manifest and add permissions, remove titlebar and set it as landscape.
Permission needed are:android.permission.RECORD_AUDIOandroid.permission.MODIFY_AUDIO_SETTINGS
Your manifast should look like this if you followed the tutorial:

Replies To: Visualizing sound from the microphone

Hello,
Thank you for this tutorial, it really helps to understand audio sampling in android.
I have encountered an issue though. When I turn the screen off and on again, the behavior of the app seems to be unpredictable. Sometimes it starts again without problems, but other times it freezes or force closes. When you use the home button or go to another app (without closing the sound visualizer with the back button) and then go back to the sound visualizer, it freezes most of the time. To my understanding there's a problem with the activity's lifecycle, but I don't know exactly where.
I haven't changed anything in the code from this tutorial and I've tried the app with 3 different phones running android 4.0 and 4.1.

Hello,
Thank you for this tutorial
But i am not getting any wave .its just showing a blank line when i say something its not changing its state could you please help...
I haven't changed anything in the code from this tutorial and I've tried the app with android 2.3

Hello Again,
I just run the same code again in another phone and its working fine in android 4.1...
but have some orientation problems ,the app crashed when i tilted my phone everything else i s fine...
Then i run it on another phone it is android 2.2 And this time when I turn the screen off and on again, the behavior of the app seems to be unpredictable.

EndLessMind, on 03 December 2013 - 12:44 AM, said:

Are you running on and emulator?

no i am not running it on emulator

Any way this is a very nice tutorial i will try to fix my errors ...Thank you for such a wonderful code.....

k if possible can you please send the major fixes of the codes to my mail
my email id is sunilsunny565@gmail.com ..Thank you in advance

I would love to, but the only fixes i've right now is for the 1080p+ screen-issue.
I did fix almost all bugs, but that's when i used this code to create a firerate counter for Paintball guns.
But i lost all the code when my laptop crashed
Fortunately, the laptop only contained some old test project and that app.
So it wasn't much of a lost

k if possible can you please send the major fixes of the codes to my mail
my email id is sunilsunny565@gmail.com ..Thank you in advance

I would love to, but the only fixes i've right now is for the 1080p+ screen-issue.
I did fix almost all bugs, but that's when i used this code to create a firerate counter for Paintball guns.
But i lost all the code when my laptop crashed />
Fortunately, the laptop only contained some old test project and that app.
So it wasn't much of a lost />

EndLessMind, on 03 December 2013 - 05:24 AM, said:

sunil sunny, on 03 December 2013 - 12:15 PM, said:

k if possible can you please send the major fixes of the codes to my mail
my email id is sunilsunny565@gmail.com ..Thank you in advance

I would love to, but the only fixes i've right now is for the 1080p+ screen-issue.
I did fix almost all bugs, but that's when i used this code to create a firerate counter for Paintball guns.
But i lost all the code when my laptop crashed />
Fortunately, the laptop only contained some old test project and that app.
So it wasn't much of a lost />

Hi Thank you,
but I have a comment Iam trying this on a nexus 4 but the output signal does not seem to look like a sound wave it's very different and i was wondering how can I make it a little slower or make the (duration) of the visualizer larger so the signal would be clearer