Using Android SoundPool Build your Own Android Piano App

Using Android SoundPool build such apps that use Android media library class that handles short music tones on pressing of a button or object.

Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!

In this tutorial learn how to build your own musical instrument on your Android device like, be it Piano, Violin or Xylophone.

Android SoundPool Example

In this given below tutorial, we will teach you how to build your own Piano using Android SoundPool class.

Things Needed

• Android Studio (with SDK and latest API) and JAVA installed on system.
• MP3 Piano Resource Files for each button. Link is here.

What we will build

So the app we will build in this tutorial will have around 14 buttons, each having assigned to an onClick() method that’ll play the audio using the Android SoundPool class.

The buttons and their location will be set using ConstraintLayout introduced in API 9. 8 buttons will be white in color with C, D, E, F, G, A and B sound and 5 black color buttons with C#, D#, F#, G#, A#, and another C# sound.

Files Created in Process

• activity_main.xml
• MainActivity.java
• AndroidManifest.xml (No permissions required)

Steps to Build Android Project

Open Android Studio and Create a new Project with app name as ‘My Piano’, Select to create an empty activity with MainAvticity.java class.

In activity_main.xml file, delete the ‘Hello World’ TextView and add 8 buttons.

Each Button must have the height as 63sp and width as match_parent. These 8 buttons will have white (#FFFFFF) and grey (#E5E5E5) color as background.

Add respective text i.e, C, D, E, F, G, A, B, and C. Text size should be 30sp and color as black (#000000) with bold style and alignment set to ‘textstart’.

Assign an onClick method to each button in the end, the method name we kept is ‘play[BUTTON_NAME]’. The Code for Button C is as follows:

<Button
    android:id="@+id/c"
    android:layout_width="match_parent"
    android:layout_height="63dp"
    android:text="   C"
    android:textSize="30sp"
    android:textStyle="bold"
    android:textAlignment="textStart"
    android:background="#ffffff"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:onClick="playC" />

Now add 6 more buttons in this layout with very first C# button in between C and D white colored buttons.

You can constrain the next button i.e, D# below C# and to the end of the parent. Each button has a width of 187sp and height as wrap_content.

The text for each button is C#, D#, F#, G#, A# and C# again. These 6 buttons will have black (#000000) color as background with Text size should be 20sp and color as white (#FFFFFF) with bold style and alignment set to ‘textstart’.

Assign an onClick method to each button in the end, the method name we kept is ‘play[BUTTON_NAME]S’. The Code for Button D# is as follows:

<Button
    android:id="@+id/ds"
    android:layout_width="187dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:text="   D#"
    android:textAlignment="textStart"
    android:textSize="20sp"
    android:textStyle="bold"
    android:background="#000000"
    android:textColor="#ffffff"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/cs"
    android:onClick="playDS"/>

The complete XML Code for activity_main.xml is as follows:

You can use RelativeLayout as well, learn more from link here.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context="com.androiddvlpr.mypiano.MainActivity">


    <Button
        android:id="@+id/c"
        android:layout_width="match_parent"
        android:layout_height="63dp"
        android:text="   C"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textAlignment="textStart"
        android:background="#ffffff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:onClick="playC" />

    <Button
        android:id="@+id/d"
        android:layout_width="match_parent"
        android:layout_height="63dp"
        android:text="   D"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textAlignment="textStart"
        android:background="#e5e5e5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/c"
        android:onClick="playD"/>

    <Button
        android:id="@+id/e"
        android:layout_width="match_parent"
        android:layout_height="63dp"
        android:text="   E"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textAlignment="textStart"
        android:background="#ffffff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/d"
        android:onClick="playE"/>

    <Button
        android:id="@+id/f"
        android:layout_width="match_parent"
        android:layout_height="63dp"
        android:text="   F"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textAlignment="textStart"
        android:background="#e5e5e5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/e"
        android:onClick="playF"/>

    <Button
        android:id="@+id/g"
        android:layout_width="match_parent"
        android:layout_height="63dp"
        android:background="#ffffff"
        android:text="   G"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textAlignment="textStart"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/f"
        android:onClick="playG"/>

    <Button
        android:id="@+id/a"
        android:layout_width="match_parent"
        android:layout_height="63dp"
        android:text="   A"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textAlignment="textStart"
        android:background="#e5e5e5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/g"
        android:onClick="playA"/>

    <Button
        android:id="@+id/b"
        android:layout_width="match_parent"
        android:layout_height="63dp"
        android:text="   B"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textAlignment="textStart"
        android:background="#ffffff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/a"
        android:onClick="playB"/>

    <Button
        android:id="@+id/cc"
        android:layout_width="match_parent"
        android:layout_height="63dp"
        android:text="   C"
        android:textSize="30sp"
        android:textStyle="bold"
        android:textAlignment="textStart"
        android:background="#e5e5e5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/b"
        android:onClick="playCC"/>

    <Button
        android:id="@+id/cs"
        android:layout_width="187dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="40sp"
        android:text="   C#"
        android:textAlignment="textStart"
        android:textSize="20sp"
        android:textStyle="bold"
        android:background="#000000"
        android:textColor="#ffffff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:onClick="playCS"/>

    <Button
        android:id="@+id/ds"
        android:layout_width="187dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="   D#"
        android:textAlignment="textStart"
        android:textSize="20sp"
        android:textStyle="bold"
        android:background="#000000"
        android:textColor="#ffffff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cs"
        android:onClick="playDS"/>

    <Button
        android:id="@+id/fs"
        android:layout_width="187dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:text="   F#"
        android:textAlignment="textStart"
        android:textSize="20sp"
        android:textStyle="bold"
        android:background="#000000"
        android:textColor="#ffffff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ds"
        android:onClick="playFS"/>

    <Button
        android:id="@+id/gs"
        android:layout_width="187dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="   G#"
        android:textAlignment="textStart"
        android:textSize="20sp"
        android:textStyle="bold"
        android:background="#000000"
        android:textColor="#ffffff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/fs"
        android:onClick="playGS"/>

    <Button
        android:id="@+id/as"
        android:layout_width="187dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="   A#"
        android:textAlignment="textStart"
        android:textSize="20sp"
        android:textStyle="bold"
        android:background="#000000"
        android:textColor="#ffffff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/gs"
        android:onClick="playAS"/>

    <Button
        android:id="@+id/css"
        android:layout_width="187dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="64dp"
        android:text="   C#"
        android:textAlignment="textStart"
        android:textSize="20sp"
        android:textStyle="bold"
        android:background="#000000"
        android:textColor="#ffffff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/as"
        android:onClick="playCSS"/>


</android.support.constraint.ConstraintLayout>

 

Now go to MainActivity.java and create 14 int variables for each sound, as shown in the code below.

private int csound;
private int dsound;
private int esound;
private int fsound;
private int gsound;
private int asound;
private int bsound;
private int ccsound;
private int cssound;
private int csssound;
private int dssound;
private int gssound;
private int assound;
private int fssound;

Now let‘s talk about the key class in this project which is Android SoundPool.

We will use the Android SoundPool in our project because firstly, SoundPool can play audio files for applications and secondly it can also manage the number of audio streams being rendered at once, which is our case will be many keys pressed at once.

Though you may think about using the Android Mediaplayer over here instead of SoundPool, but we won’t recommend using it because of SoundPool’s ability to manage multiple audio streams. So to use Android SoundPool in our project we will first import and create its object. Code is as follows:

private SoundPool mSoundPool;

Now in Android SoundPool you can actually control the volume of the left and the right speaker, give Priority to a particular audio file, Loop an Audio File and tweak its play speed.

So we will control these attributes of SoundPool using different variables as coded below:

private float LEFT_VOL = 1.0f;
private float RIGHT_VOL = 1.0f;
private int PRIORITY = 1;
private int LOOP = 0;
private float RATE = 1.0f;

Now create the SoundPool constructor using code below:

mSoundPool = new SoundPool(10, AudioManager.STREAM_MUSIC,0);

Now for each sound variable created above, load it to its respective sound. Code for this will be as follows:

csound = mSoundPool.load(getApplicationContext(),R.raw.c,1);
dsound = mSoundPool.load(getApplicationContext(),R.raw.d,1);
esound = mSoundPool.load(getApplicationContext(),R.raw.e,1);
fsound = mSoundPool.load(getApplicationContext(),R.raw.f,1);
gsound = mSoundPool.load(getApplicationContext(),R.raw.g,1);
asound = mSoundPool.load(getApplicationContext(),R.raw.a,1);
bsound = mSoundPool.load(getApplicationContext(),R.raw.b,1);
cssound = mSoundPool.load(getApplicationContext(),R.raw.c_hash,1);
csssound = mSoundPool.load(getApplicationContext(),R.raw.c_hash,1);
ccsound = mSoundPool.load(getApplicationContext(),R.raw.c2,1);
assound = mSoundPool.load(getApplicationContext(),R.raw.a_hash,1);
fssound = mSoundPool.load(getApplicationContext(),R.raw.f_hash,1);
gssound = mSoundPool.load(getApplicationContext(),R.raw.g_hash,1);
dssound = mSoundPool.load(getApplicationContext(),R.raw.d_hash,1);

Voila, now all you need to do is to create an onClick public method for each button as set in activity_main.xml file above using play method in SoundPool class as shown in the code below for C button only:

public void playC(View v){
    mSoundPool.play(csound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
}

The code for MainActivity.java file is here:

import android.media.AudioManager;
import android.media.SoundPool;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    private SoundPool mSoundPool;
    private int csound;
    private int dsound;
    private int esound;
    private int fsound;
    private int gsound;
    private int asound;
    private int bsound;
    private int ccsound;
    private int cssound;
    private int csssound;
    private int dssound;
    private int gssound;
    private int assound;
    private int fssound;

    private float LEFT_VOL = 1.0f;
    private float RIGHT_VOL = 1.0f;
    private int PRIORITY = 1;
    private int LOOP = 0;
    private float RATE = 1.0f;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mSoundPool = new SoundPool(10, AudioManager.STREAM_MUSIC,0);
        csound = mSoundPool.load(getApplicationContext(),R.raw.c,1);
        dsound = mSoundPool.load(getApplicationContext(),R.raw.d,1);
        esound = mSoundPool.load(getApplicationContext(),R.raw.e,1);
        fsound = mSoundPool.load(getApplicationContext(),R.raw.f,1);
        gsound = mSoundPool.load(getApplicationContext(),R.raw.g,1);
        asound = mSoundPool.load(getApplicationContext(),R.raw.a,1);
        bsound = mSoundPool.load(getApplicationContext(),R.raw.b,1);
        cssound = mSoundPool.load(getApplicationContext(),R.raw.c_hash,1);
        csssound = mSoundPool.load(getApplicationContext(),R.raw.c_hash,1);
        ccsound = mSoundPool.load(getApplicationContext(),R.raw.c2,1);
        assound = mSoundPool.load(getApplicationContext(),R.raw.a_hash,1);
        fssound = mSoundPool.load(getApplicationContext(),R.raw.f_hash,1);
        gssound = mSoundPool.load(getApplicationContext(),R.raw.g_hash,1);
        dssound = mSoundPool.load(getApplicationContext(),R.raw.d_hash,1);

    }

    public void playC(View v){
        mSoundPool.play(csound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
    }

    public void playD(View v){
        mSoundPool.play(dsound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
    }

    public void playE(View v){
        mSoundPool.play(esound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
    }

    public void playF(View v){
        mSoundPool.play(fsound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
    }

    public void playG(View v){
        mSoundPool.play(gsound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
    }

    public void playA(View v){
        mSoundPool.play(asound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
    }

    public void playB(View v){
        mSoundPool.play(bsound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
    }

    public void playCC(View v){
        mSoundPool.play(ccsound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
    }

    public void playCS(View v){
        mSoundPool.play(cssound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
    }

    public void playDS(View v){
        mSoundPool.play(dssound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
    }

    public void playFS(View v){
        mSoundPool.play(fssound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
    }

    public void playGS(View v){
        mSoundPool.play(gssound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
    }

    public void playAS(View v){
        mSoundPool.play(assound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
    }

    public void playCSS(View v){
        mSoundPool.play(csssound,LEFT_VOL,RIGHT_VOL,PRIORITY,LOOP,RATE);
    }



}

Now Run your app in your mobile, Play and enjoy your instrument! Share your experience in the comment section below.

android_dvlprs

Learn Android development via comics... join us on Instagram!

#android #androidusers #androiddeveloper #androidm

#android #androidusers #androiddeveloper #androidm

#android #androidusers #androiddeveloper #androidm

#android #androidusers #androiddeveloper #androidm

Committing but forgetting to push the code. #andro

#android #androidusers #androiddeveloper #androidm

This feels so TRUE! 😢 #android #androidusers #a

Deploying my app now... #android #androidusers #an

No Java in my project dear God! #android #androidu

There are two types of Android Developer #android

When i choose Kotlin multiplatform over React Nati

Which theme do you use amigo? #android #androiduse

Omg! I can't keep repeating this... xoxo #android

This is impossible babe! #android #androidusers #a

Bruh... how old are you? #android #androidusers #a

Is it only me? #android #flutter #jetpack

Instagram post 18032791087441866

#android #androidusers #androiddeveloper #androidm

#android #androidusers #androiddeveloper #androidm

Java... Kotlin and now Dart 😜 #android #android

Load More Follow on Instagram