Android 004: Thumb Piano

This will help you:

Create a musical keyboard app for Android devices.

Time: 1-2 hours / Level: B2

You should already:

Part 1: The Layout

The app will have 2 columns of 8 buttons for keys. In this example, each column will have a complete C major scale, with higher notes higher on the screen. The left side will be an octave lower than the right side. Make sure you are in the "Designer" view, not the "Blocks" view, to edit the appearance and layout.

Step 1: Key Layout

From the "Layout" panel in the component list, add a table arrangement to the screen. This will hold all the keys. In the "Properties" panel for the table arrangement, set the size to 2 columns and 8 rows. You will probably need to set the height to 100 percent.

From the "User Interface" panel, get buttons and place them in each of the 16 spots in the table arrangement. Make sure to name all the buttons with which note they will play. From the bottom to the top, they should be lettered C, D, E, F, G, A, B, C_ (where C is at the bottom, and C_ is at the top). The right and left columns should have different naming patterns, like adding "left" and "right", "L" and "R", or "1" and "2" to the key names. It's important to make sure all the keys are labeled appropriately, so you can map the right sounds.

Step 2: Appearance

While you can customize the appearance of your components however you want, here are some steps to make the user interface a little easier to use for playing sounds:

In the "Properties" panel for each button, you may want to change each label to have the note name (C, D, E, and so on).

You could also change the background color for the keys. They could all be one color, or each column could be different. In my example, I used a rainbow of colors for each note, with the right (higher octave) keys being lighter colors.

Set the width of the top 2 keys to 50 percent. The rest of the keys should have automatic width and fill the screen. If not, you can set them each to "Fill parent" or 50 percent. Set the height of each key to 12 percent (12*8 keys = 96 percent of the screen used).

In the "Properties" panel for the screen, uncheck "ShowStatusBar" and "TitleVisible" to create more vertical space.

Step 3: Sound Components

From the "Media" section of the "Components" menu, drag 16 sound components into the work area. Yes, 16. One for each key. If we used just one sound component, it could only play one key sound at a time, and it would have to change the sound source file each time you played a key. Name the sound components using the same naming system you used for the key buttons.

Your layout should look something like this:

[image]

Part 2: The Code

Now that you have the interface set up, it's time to make the app work!

There are really only 2 things to implement:

  • When a key is pressed, play the correct sound.

  • When a key is released, stop playing its sound. The code will mainly require a lot of repetition, because each key has to have the same few blocks of code.

Step 4: Sound Files

To make the keys play sounds, you will need sound files for each note. Finding a complete set of note sounds can be surprisingly difficult. Here is a source with 2 complete octaves, including sharp and flat notes (which we won't use in this example). You can scroll down to the "Download Options" menu on the right, and click on the "VBR MP3" option to get each file in MP3 format. Note that clicking the words "VBR MP3" will show a dropdown to download each file individually, but clicking where it says "25 files" will download them all at once.

Once your sounds are downloaded, you should open and unzip the folder containing them. You should rename each file according to its note. In this example, I named the files with the official note names, since 2 of the keys will share a file. You can decide how to name them. Here are the files for the notes you need:

  • Low C1: Piano11

  • D1: Piano13

  • E1: Piano15

  • F1: Piano16

  • G1: Piano18

  • A1: Piano110

  • B1: Piano112

  • High C1/Low C2: Piano113

  • D2: Piano115

  • E2: Piano117

  • F2: Piano118

  • G2: Piano120

  • A2: Piano122

  • B2: Piano124

  • High C2: Piano125

You'll notice that 2 keys will use the same sound file. This will be fine, and you don't need to make a copy of the file. Just make sure you can tell which C is the lowest, middle (shared), and highest.

Once you have the files organized, go back to the layout designer. Click on one of the sound components in the component tree on the right side. For each sound component, click on the "Source" property and click "Upload File..." and upload the appropriate sound file. Remember that there are multiple notes with the same letter, so you must make sure the file you choose matches up with that sound component. Also, the higher C in one octave will use the same sound file as the lower C in the next octave up. That means you'll only have to upload that sound file once.

That was a little bit tedious, but if you got this far, you're doing great!

Step 5: Playing Sounds

Now, time to write some code. It will be pretty simple, because we just need 2 things to happen:

when [button] is pressed:
  play the sound for that button

when [button] is released:
  stop plating the sound for that button

Click on the "Blocks" button in the upper-right area of your screen to edit the code.

Go to one of the buttons' blocks menu, and get a when [button].TouchDown block and a when [button].TouchUp block. Place them both in the work area, ideally side by side. Then, go to the blocks menu for the corresponding sound component. Get a call [sound].Play block and a call [sound].Stop block, and place them inside the TouchDown and TouchUp blocks, respectively.

It should look something like this:

[image]

Now, for each of those block stacks, right-click on it, click "Duplicate", and place the copy underneath the original. Do this for each note, i.e., make 15 duplicates of both the start and stop functions.

You'll notice that there are angry red X's in the corner of each of these block stacks. That's because AppInventor doesn't like to have 2 instruction sets for what should happen when a single event occurs. To fix this, and make the entire app work, click on the drop downs for button selection and sound selection, and change the buttons and sounds. Make sure to change both for each function, and that the button selected has the right corresponding sound selected.

I won't include all of them here, but basically, it should look like this:

[image]

At this point, you should test your app, as described in the Android Startup activity or AppInventor online documentation. Here are a few things to check and look out for:

  • Do all the keys play a sound?

  • Do they each stop playing when you release the key?

  • When you play the left keys from bottom to top, then the right keys from bottom to top, does each note sound higher than the last? Do they sound pleasant as you go up?

  • Can you press 2 or 3 keys at once and hear their sounds?

If anything doesn't work, go back and fix your code. Otherwise, congratulations, you're done!

Step 6: Extensions

Here are some ideas for taking your app further:

  • Make different instruments available.

  • Either display buttons or a drop-down to choose an instrument...

  • ...or use an accelerometer component to change instruments when the device is shaken.

  • Add the ability to play a backing track from the phone's media files, or pre-loaded.

  • Add the ability to record and play back music.

  • Add the ability to record and loop music.