Friday, October 14, 2016

Audio Visualizer using libGDX for multiple platforms

This article & project is about visualizing audio as waveforms on screen. Before starting let's understand few terms and minimum requirements related to the project. Most of details about app is inside the source code. This article is only about audio section.

Requirements:
  • A device supported by libGDX library. 
  • Device must support microphone. 



Sample Rate:
Total number of samples of audio to be captured per second. We will use standard 44100 samples per second i.e. 44.1KHz.


Audio Sample:
Size of 1 sample. 1 sample is signed 16 bits in size and therefore can represent total 65536 volume levels. Negative samples have value from -1 to -32768 and +ve samples have value from 0 to 32767. We will use Mono samples only. Please refer to Audio documentation on Wikipedia, website or a book for further information on samplerate etc.



Working:
This project uses libGDX audio recorder interface to capture audio from MIC. Code is extremely simple to understand and implement on multiple platforms. Functions to create & delete recorder.

public final void make_recorder() {
        if( m_rec == null ) {
            m_rec = Gdx.audio.newAudioRecorder(44100, true);
            m_samples = new short[ (int)(44100f / FPS)];            
        }
    }
    public void destroy_recorder() {
        if( m_rec != null ) {
            m_rec.dispose();
            m_rec = null;
        }
    }

Below code is used for capturing audio samples in a buffer for drawing purpose.

m_rec.read(m_samples, 0, m_samples.length);
// plot samples by moving from left middle of screen to right middle. Delta is how
// high the resolution of plotting is.
for( float i = 0; i <= 100f; i += delta ) {
       
}




m_sample is a short buffer of size 44100/FPS. This is because in this project we draw screen at 25FPS and every frame plots audio data. So we divide 1 second of audio into 25 parts and sync with screen. Total samples we need per frame is 44100/FPS.



Pseudo code of drawing audio data:
  • Capture 44100/FPS number of samples into SAMPLES buffer. 
  • Loop from left middle of screen i.e. x=0 to x=100% of screen width plotting audio sample related to the % value. Means x=0% means 0% position of sample in SAMPLES. x=35% = 35/100 x SAMPLES's SIZE. Formula: Audio Sample = PERCENT_POS/100 * SAMPLES's SIZE. 
  • Take amplitude of sample as per your choice and plot audio using pixel. Plot line between current and last sample. 


Visualizer snapshot:



Download link for java only source code of project.

MylibGDX-articles-14-Oct-2016.7z


With same logic i built my Sound Visualizer which renders beautiful design using voices. It can be called Rangoli Maker or simple Mandalas or Cymatics kind of plotter. Cymatics needs lots of calculation in 3D but this app is good for flower like designs.


Download link for Android app:
http://play.google.com/store/apps/details?id=org.greh.sacredsound